/*
 * Started : 08-MAY-2022
 * Updated : 12-JUN-2022
 * Updated : 25-DEC-2022 More styles.
 * Updated : 06-JUN-2023 Added the beginnings of styling for keyboard shortcuts.
 * Updated : 22-JUN-2023 Added CSS to constrain images within their container.
 * Updated : 03-JUL-2023 further CSS for keycap CSS declaration. Needs a lot more work though.
 * Updated : 28-OCT-2023 Added CSS for default table style.
 * Updated : 06-SEP-2025 Added nowrap class.
 */

/*
 * This CSS file is intended to contain all the CSS rules that will apply globally across all webpages.
 * Intention then it is to apply individual styles for the various parts, such as cookery, Linux and so on.
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body
{
   background-color: white;
   color: black;
   font-size: 100%;
}

/* don't underline links */
A:link { text-decoration: none; }

h1
{
	margin-bottom: 25px;
   font-size: 2rem;
}

h2
{
	margin-bottom: 15px;
   font-size: 1.8rem;
}

h3
{
	margin-bottom: 12px;
   font-size: 1.6rem;
}

p
{
	margin-bottom: 20px;
}

ul, ol
{
	/* border: 1px solid red; For debugging */
	margin-bottom: 20px;
	margin-left: 20px;
}

/* ---------------------------------------------------------------------*/
/*
 * Default table style.
 */
table thead tr
{
	background-color: lightgrey;
   border: 1px solid #ffff;
}

table, th, td
{
   border: 1px solid black;
   border-collapse: collapse;
}

/* --------------------- */

.keycap
{
   /* font-weight: bold; */
   color: white;
   background: grey;
	padding: 5px;
   border-radius: 10px;
}

ul.horizontal_menu
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 1px solid red;
   background-color: #996633;
   overflow: hidden;
   border: 1px solid red;
   font-size: 1.6em;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.horizontal_menu li
{
	display: inline;
	padding: 8px;
	text-align: center;
   /* border-right: 1px solid #bbb; */
   border: 1px solid #bbb;
}

.horizontal_menu li a
{
   color: white;
}

/* Change the link color to #111 (black) on hover */
.horizontal_menu li a:hover
{
	background-color: #111;
}

/* Constrain IMG elements to remain within their container width.
   Recommended by responsive image tutorial website. */
img
{
   max-inline-size: 100%;
   block-size: auto;
}

.nowrap
{
   white-space: nowrap;
}