body {font-family: 'Roboto';font-size:14pt;margin:0;padding:0;background:#000000;color:#e0e0e0;}


a { 
	text-decoration: none; 
	text-decoration: underline;
}

#top {
    position: fixed;
    z-index: 999;
	align-items: center; 
    height: 50px;
	  width: 100%;          /* Full width by default (great for mobile) */
  background-color:#000000;
}

.container0 {
  width: 100%;          /* Full width by default (great for mobile) */
  max-width: 600px;     /* Caps it at 500px on larger screens */
  margin: 0 auto;       /* Centers it horizontally */
  padding: 1rem;        /* Optional: Adds inner spacing (adjust as needed) */
  box-sizing: border-box; /* Ensures padding doesn't add extra width */
}

.container1 {
  width: 100%;          /* Full width by default (great for mobile) */
  max-width: 1200px;     /* Caps it at 700px on larger screens */
  margin: 0 auto;       /* Centers it horizontally */
  padding: 1rem;        /* Optional: Adds inner spacing (adjust as needed) */
  box-sizing: border-box; /* Ensures padding doesn't add extra width */
}


.container2 {
            display: flex;          /* Makes children sit side by side */
            flex-wrap: wrap;        /* Allows wrapping to next line if needed */
            gap: 20px;              /* Space between the boxes */
            justify-content: center; /* Optional: centers the boxes if there's extra space */

        }

        .box2 {
            width: 425px;           /* Fixed width you wanted */
            min-height: 200px;      /* Just for visibility */

            box-sizing: border-box; /* Ensures padding/border doesn't add to width */
            padding: 20px;
            text-align: center;
        }

        /* Optional: Force stacking on very small screens if needed */
        @media (max-width: 900px) {  /* 350px * 2 + gap/padding */
            .box2 {
                width: 100%;        /* Full width when stacked */
            }
		}

.container3 {
            display: flex;          /* Makes children sit side by side */
            flex-wrap: wrap;        /* Allows wrapping to next line if needed */
            gap: 20px;              /* Space between the boxes */
            justify-content: center; /* Optional: centers the boxes if there's extra space */

        }

        .box3 {
            width: 360px;           /* Fixed width you wanted */
            min-height: 250px;      /* Just for visibility */
			border-width:1px;
			border-color:#ffffff;
			border-style:solid;
            box-sizing: border-box; /* Ensures padding/border doesn't add to width */
            padding: 19px;
            text-align: left;
        }

        /* Optional: Force stacking on very small screens if needed */
        @media (max-width: 900px) {  /* 350px * 2 + gap/padding */
            .box3 {
                width: 100%;        /* Full width when stacked */
            }
		}
				
		
.container6 {
            display: flex;          /* Makes children sit side by side */
            flex-wrap: wrap;        /* Allows wrapping to next line if needed */
            gap: 20px;              /* Space between the boxes */
            justify-content: center; /* Optional: centers the boxes if there's extra space */

        }

        .box6 {
            width: 160px;           /* Fixed width you wanted */
            min-height: 200px;      /* Just for visibility */
			border-width:1px;
			border-color:#ffffff;
            box-sizing: border-box; /* Ensures padding/border doesn't add to width */
            padding: 19px;
            text-align: center;
        }

        /* Optional: Force stacking on very small screens if needed */
        @media (max-width: 900px) {  /* 350px * 2 + gap/padding */
            .box6 {
                width: 100%;        /* Full width when stacked */
            }
		}
		
		
.img_container {
	display: flex;
	justify-content:center;
}

.tl {
	text-align:left;
}

.yellow1 {
		color:#ffff99;
		font-weight:bold;
}

.blue1 {
	color:#88bdf3;
	font-weight:bold;
}

.green1 {
	color:#b3ff66;
	font-weight:bold;
}

.magentia1 {
	color:#ffb3ec;
	font-weight:bold;
}

.orange1 {
	
	color:#ffcc80;
	font-weight:bold;
}



#sys_vars {
    display:block;
}

#header {
	text-align:center;
	background-color:#333333;
}


.large_button {
    background:#2f782d;
    color:#ffffff;
    width:60%;
    height:220px;
    text-align: center;
    margin: 0 auto;
    border:5px solid #ffffff;
}

.wide_button {
    background:#2f782d;
    color:#ffffff;
    width:80%;
    height:70px;
    text-align: center;
    margin: 0 auto;
    border:5px solid #ffffff;
}

#create_new_group {
    display:none;
}

.getinfo
{
    display:none;
    position:absolute;

    top:100px;
    right: 0px;
    left: 0px;


    margin: auto;
    height:40%;
    width:80%;
    background:#222222;
    color:#ffffff;

    font-size:18pt;
    border:5px solid #ffffff;

    padding:10px;

    text-align:center;

}

.infoblock {
    display:none;
}

#group_list {
    display:none;
}

.lb1 {font-size:128px}

.lb2 {font-size:48px}

.lb3 {font-size:72px}

.lb4 {font-size:32px}

}

.dark_input {
    background-color:#000000;
    color:#ffffff;
}