/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after{box-sizing: border-box;}
/* 2. Remove default margin */
* {margin: 0;}
body{
    /*3. Add accessible line-height*/
    line-height: 1.5;
    /*4. Improve text rendering*/
    -webkit-font-smoothing: antialiased;}
/*5. Improve media defaults*/
img, picture, video, canvas, svg {display: block; max-width: 100%;}
/*6. Inherit fonts for form controls*/
input, button, textarea, select{font: inherit;}
/*7. Avoid text overflows*/
p, h1, h2, h3, h4, h5, h6{overflow-wrap: break-word;}
/*8. Improve line wrapping*/
h1, h2, h3, h4, h5, h6{text-wrap: balance;}
/*9. Create a root stacking context*/
#root, #__next{isolation: isolate;}
/*CSS reset above this line*/

body{background-color: dodgerblue; color: cornsilk;}
h1{color: cornsilk; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
aside, footer{display: block; position: fixed;  
background-color: #a384ff; color: cornflowerblue;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
aside{text-align: right; width: 25%; right: 0;}
footer{width: 100%; bottom: 0; left: 0; 
text-align: center; height: fit-content; vertical-align: middle;}
button{text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #7a53f0 ;
    color: #c7cbff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
button:hover{background-color: blueviolet;
    color: #d0afdf;}
button.two{text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #5b29f0 ;
    color: #c7cbff; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
button.two:hover{background-color: blueviolet;
    color: #d0afdf;}
button.three{text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #3100c3 ;
    color: #c7cbff; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
button.three:hover{background-color: blueviolet;
    color: #d0afdf;}
td:nth-child(odd){border-left: 3px solid rgb(0, 70, 70);}
td:nth-child(odd){border-right: 3px solid rgb(0, 70, 70)}
td:nth-child(even){border-left: 3px solid rgb(0, 70, 70);}
td:nth-child(even){border-right: 3px solid rgb(0, 70, 70);}
table{border-collapse: collapse; width: 70%;}
td{text-align: center;}
tr:nth-child(even){background-color: cornsilk; color: teal;}
tr:nth-child(odd){background-color: teal; color: cornsilk;}
#label{font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
th{text-align: center}
#label{background-color:teal; color: cornsilk}
.ss, .sb, .sa{background-color: teal; color: cornsilk}
tr:nth-child(31){border-bottom: 3px solid rgb(0, 70, 70)}
#label{border-top: 3px solid rgb(0, 70, 70); border-left: 3px solid rgb(0, 70, 70); border-right: 3px solid rgb(0, 70, 70);}
.ss, .sa{border-left: 3px solid rgb(0, 70, 70);}
.sb{border-right: 3px solid rgb(0, 70, 70);}
.sa{border-right: 3px solid rgb(0, 70, 70);}
.ss, .sb, .sa{border-top: 3px solid rgb(0, 70, 70); border-bottom: 3px solid rgb(0, 70, 70);}
footer{display: block; position: fixed;  
background-color: cornsilk; color: dodgerblue;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
a{color: #d0afdf;}
article{text-align: left; padding-right: 3px; padding-left: 3px; margin-right: 40%; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
#double{background-color: #5b29f0; color: #d0afdf;}
.info{color: cornsilk;}
header{position: fixed; background-color: #7a53f0;}
footer, header{z-index: 1;}
.background{background-image: url("../Images/image.webp");}
aside{margin-left: 20%;}
header{padding: 5%;}
.info{padding-right: 30%; display: inline-block;}