body {
    background-image: url('materials/background.jpg');
}
html {
    color: white;
}
.img {
    float: left;
    display: block;
    padding-right: 5px;
}
.center {
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.pdfiframe {
    display: block;
    font-size: 18;
}
.button {
    background-color: unset;
    border: none;
    font-size: 20;
}
.centertext {
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 25;
    border-style: dashed;
    border-color: white;
    border-width: 5px;
    padding: 5px;
}
#togglediv1 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv2 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv3 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv4 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv5 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv6 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv7 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv8 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv9 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
#togglediv10 {
    display: none;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
.topnav {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    height: 66px;
}
.topnav a {
    padding-right: 12.5px;
    padding-left: 12.5px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
}
.topnav span {
    padding-right: 12.5px;
    padding-left: 12.5px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
}
.minilogo {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 33.78px;
    height: 33.78px;
    float: left;
    border-radius: 10px;
    background-color: rgb(26, 26, 26);
}
.disablepage {
    color: white;
    border-radius: 20px;
    background: linear-gradient(to top, rgba(51, 0, 51, 1) 50%, rgba(51, 0, 51, 0) 50%);
    background-size: 100% 200%;
    background-position: top;
    transition: all .5s ease-out;
}
.disablepage:hover {
    background-position: bottom;
}
.activepage {
    color: white;
    border-radius: 20px;
    background-color: rgba(51, 0, 51, 1);
}
.disablelist {
    color: white;
}
#discordbutton {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    background-color: purple;
    color: white;
    border-radius: 20px;
    display: block;
}
.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    overflow: hidden;
    position: absolute;
    height: fit-content;
    border-radius: 10px;
    animation-name: dropdownmenu;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.dropdown-content:hover {
    background-position: left;
}
.dropdown:hover span {
    background-color: rgb(51, 0, 51);
}
.dropdown:hover .dropdown-content {
    display: block;
    border-right-color: white;
    border-left-color: white;
    border-bottom-color: white;
    border-width: 5px;
    scroll-behavior: unset;
    box-sizing: border-box;
}
.dropdown-content a {
    display: block;
    position: relative;
    color: white;
    padding: 20px, 40px;
    text-decoration: none;
    animation-name: dropdownmenua;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: linear-gradient(to right, rgba(51, 0, 51, 1) 52%, rgba(51, 0, 51, 0) 48%);
    background-size: 200% 100%;
    background-position: right;
    transition: all .5s ease-out;
}
.dropdown-content a:hover {
    background-position: left;
}
@keyframes rotate {
    0%   {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}
#arrow {
    display: block;
    width: fit-content;
    display: inline-block;
    background-color: unset;
}
.dropdown:hover #arrow {
    animation-name: rotate;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes dropdownmenua {
    0%  {
        color: rgba(255, 255, 255, 0);
    }
    100%  {
        color: rgba(255, 255, 255, 1);
    }
        
}
@keyframes dropdownmenu {
    0%  {
        top: 60px;
        background-color: rgba(0, 0, 0, 0);
    }
    100%  {
        top: 74px;
        background-color: rgba(0, 0, 0, 1);
    }
}