z/* 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*/
p{text-wrap: pretty;}
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: mediumpurple; color: purple;}
h1{color: purple; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
aside, footer{display: block; position: fixed;  
background-color: #8b8b8b; color: violet;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
aside{text-align: right; width: 30%; right: 0;}
footer{width: 100%; bottom: 0; left: 0; 
text-align: center; height: fit-content; vertical-align: middle;}
td:nth-child(odd){border-left: 3px solid rebeccapurple;}
td:nth-child(even){border-right: 3px solid rebeccapurple}
table{border-collapse: collapse; width: 60%;}
td{text-align: center;}
tr:nth-child(even){background-color: violet; color: purple;}
tr:nth-child(odd){background-color: darkseagreen; color: darkgreen;}
#label{font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
th{text-align: center}
#label{background-color: darkseagreen;}
.ss, .sb{background-color: darkseagreen; color: darkgreen}
tr:nth-child(10){border-bottom: 3px solid rebeccapurple}
#label{border-top: 3px solid rebeccapurple; border-left: 3px solid rebeccapurple; border-right: 3px solid rebeccapurple;}
.ss{
    border-left: 3px solid rebeccapurple;
}
.sb{
    border-right: 3px solid rebeccapurple;
}
footer{
    display: block; 
    position: fixed;  
    background-color: darkseagreen; 
    color: violet;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
a{
    color: purple;
}
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;
}
button{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #9667b7 ;
    color: black; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button:hover{
    background-color: #373737;
    color: orchid;
}
button.two{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #6f4393;
    color: black; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button.two:hover{
    background-color: #373737;
    color: orchid;
}
button.three{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #652d8d;
    color: black; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button.three:hover{
    background-color: #373737;
    color: orchid;
}
button.four{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #561e7b;
    color: grey; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button.four:hover{
    background-color: #373737;
    color: orchid;
}
button.five{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #3e135d;
    color: grey; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button.five:hover{
    background-color: #373737;
    color: orchid;
}
button.six{
    text-align: center;
    display: inline-block;
    border: none;
    width: 100%;
    cursor: pointer; 
    background-color: #2e0752;
    color: grey; 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-
}
button.six:hover{
    background-color: #373737;
    color: orchid;
}
.ss, .sb{
    border-top: 3px solid rebeccapurple; 
    border-bottom: 3px solid rebeccapurple;
}
footer{
    color: darkgreen;
}