html { font-size: 16px;}
                
            /* Common Styles */
	        :root {
				--button-size: 16px;
				--button-font-size: 16px;          
				--plusminus-font-size: 16px;
				--text-font-size: 16px;
				--message-font-size: 16px;
				--content-top: 16px;
				--body-color: white;
            }


            @font-face {
                font-family: myFont;
                src: url(./Art/StevesChalk.ttf);
            }

            * {
                font-family: myFont;
                
            }

			/* Desktops	*/
			@media only screen and (min-width: 1281px) { 
				:root {
					/*--body-color: green;*/
                    --button-size: 3rem;
					--button-font-size: 1.8rem;          
					--container-width: 25%;
				}
			}

			/* Laptops Desktops  	*/
			@media only screen and (min-width: 1025px) and (max-width: 1280px) {  
				:root {
					/*--body-color: orange;*/
                    --button-size: 3rem;
					--button-font-size: 1.8rem;          
					--container-width: 40%;
				}
			}
			
			/* Tablets iPads (portrait)	*/
			@media only screen and (min-width: 768px) and (max-width: 1024px) {  
				:root {
					/*--body-color: violet;*/
                    --button-size: 6rem;
					--button-font-size: 3.6rem;          
					--message-font-size: 3rem;          
					--container-width: 80%;
				}
			}

			/* Tablets iPads (landscape)	*/
			@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {  
				:root {
                    /*--body-color: gray;*/
                    --button-size: 3rem;
					--button-font-size: 1.8rem;          
					--message-font-size: 1.5rem;          
					--container-width: 40%;
                    --content-top: 1px;
				}
            }
			

			/* Low Res tablets, Mobiles (landscape)	*/
			@media only screen and (min-width: 481px) and (max-width: 767px) {  
				:root {
					/*--body-color: red;*/               
                    --button-size: 3rem;
					--button-font-size: 1.8rem;          
					--container-width: 80%;
				}
			}

			/* Most Smartphones Mobiles (portrait)	*/
			@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {  
				:root {
					/*--body-color: blue;*/                                       
                    --button-size: 3rem;
					--button-font-size: 1.8rem;
					--container-width: 80%;

				}
			}
            body {
               	position: relative;
				top: var(--content-top);
                color: var(--body-color);
				background-image: linear-gradient(to bottom, rgba(240, 234, 43, 0.8), rgba(89, 87, 17, 0.8));
				background-size: 5100px 1600px;
            }
			
			.containerMain {
				margin: auto;
				width: var(--container-width);
				background-color: black;
				border-color: black;
				border-style: solid;
				border-radius: 12px;
				overflow: hidden;padding: 10px; /* Add padding to the inside of the border */
				}
			
            .containerB {
                width: 100%;
                display: flex;
				margin: 0 auto;
                justify-content: center;
				background-color: black;
				overflow: hidden;
                text-align: center;
                font-size: var(--button-font-size);
				/*border: 2px solid green;*/
            }
			
            .containerC {
                width: 100%;
                display: flex;
				margin: 0 auto;
                justify-content: center;
				background-color: black;
				/*border: 2px solid green;*/
            }                			
           .containerS {
                width: var(--container-width);
                display: flex;
				margin: 0 auto;
                justify-content: flex-start;
				background-color: black;
				/*border: 2px solid green;*/
            }                			
            .containerI {
                width: var(--container-width);
                display: flex;
				margin: 0 auto;
                justify-content: center;
				background-color: black;
				border-color: black;
				border-style: solid;
				border-radius: 12px;
				overflow: hidden;
            }
           .containerE {
                width: 100%;
                display: flex;
				margin: 0 auto;
                justify-content: flex-end;
				background-color: black;
				/*border: 2px solid green;*/
            }                
            .containerF {
                width: var(--container-width);
                display: flex;
				margin: 0 auto;
                justify-content: flex-fill;
				background-color: black;
				/*border: 2px solid green;*/
            }
  
            .container img {
                width: 200px;
            }

            .item {
                width: var(--button-size);
                height: var(--button-size);
                text-align: center;
                font-size: var(--button-font-size);
				/*border: 2px solid red;*/
            }
			
			.itemText {
                /*font-size: var(--button-font-size);*/
                text-align: center;
                font-size: var(--button-font-size);
				/*border: 2px solid red;*/
            }
            .itemLine {
                /*font-size: var(--button-font-size);*/
                text-align: right;
                font-size: var(--button-font-size);
				/*border: 2px solid red;*/
            }
                
            .goes {
                display: flex;
				font-size: var(--goes-font-size);
            }

            .itemMessage {
                display: flex;
				font-size: var(--message-font-size);
                justify-content: space-between;
            }