*
	{
	/*Fifth I like to define the font stuff*/
	line-height: 1.5em;

	}





#footer, #header
	{
	display:inline-block; 
	color: var(--dontknow);
	background: var(--main-background);
	/*font-size: 1.5em;
	text-transform:uppercase;*/
	width: 100%;
	z-index: 9999;
	/*height: 20em;*/
	}


div.actionbuttons a, div.actionbuttons input
	{
	width: calc(33.33% - 3px);
	}


h1
	{
	clear: both;
	margin-top: 2em;
	}


input
	{
	display: inline;
	padding: 0 0 0 0.2em;                    /*Defines the space to be left before the border*/
	border: 1px solid black;       /*Defines the border*/
	border-radius: 0.1em;        /*Makes rounded corners if you want them*/
	margin: 0 0 0 2em;     /*Defines the space to be left before the edge*/
	line-height: 1.5em;
font-size:1.2em;
	/*width: 200px;                  The image will be scaled to a width of 200px*/
	}


#TopMenuBox
	{
	padding: 0em 0em 0em 0em; 
	margin: 0em 0em 0em 3em;
	width: 100vw;
	font-size:1.1em;
	/*border: 4px solid cyan;*/
	}

#PageBox { padding: 0em 0em 0em 0em; }


.TextBox { margin: 5em 6em 6em 6em; }


/******************************************************************************
* Media Queries
*
* When the width of the browser changes significantly than changes of style 
* are overlaid to handle it.
*/

/******************************************************************************
* Media Queries
*/

/*********************/
/*The basic font size*/
body {font-size:1rem;}

@media (min-resolution: 1.5dppx)  /*When the resolution increases Samsung A12 my phone*/
	{ body {font-size:1.5rem;} }

@media (min-resolution: 2dppx)  /*When the resolution increases*/
	{ body {font-size:2rem;} }

@media (min-resolution: 3dppx)  /*When the resolution increases Samsung A52S Chiara*/
	{ body {font-size:3rem;} }

@media (min-resolution: 4dppx)  /*When the resolution increases*/
	{ body {font-size:4rem;} }



/*******************************/
/*The other more specific stuff*/

#TopMenuBox
	{
	padding: 0em 0em 0em 0em; 
	margin: 0em 0em 0em 0em;
	width: 100vw;
	font-size:1em;
	/*border: 4px solid cyan;*/
	}

#PageBox { padding: 0em; margin: 0em; /*border: 3px solid red;*/ }



.TextBox
	{ 
	margin: 6em 8em 5em 8em;
	padding: 0em;
	font-size:1em;
	/*border: 3px solid green;*/
	}


@media (min-resolution: 1dppx) and (max-width: 1024px), 
       (min-resolution: 1.5dppx) and (max-width: 1536px), 
       (min-resolution: 2dppx) and (max-width: 2048px), 
       (min-resolution: 3dppx) and (max-width: 3072px), 
       (min-resolution: 4dppx) and (max-width: 4096px) 
	{
	/* Things to think about adjusting
	font-size:16px;
	line-height: 1.5;
	padding:10px;
	border-width: 1px;
	background-image: url('icon.png');
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	svg { width: 100px; height: 100px; }
	text-shadow: 1px 1px 2px #000;
	*/

	#TopMenuBox { font-size:1.5em; /*border: 4px solid cyan;*/ }

	.TextBox { margin: 0em 4em 4em 4em; }
	}