Main.css

body {
    transition: background 500ms ease-in, color 1000ms ease-out;
    color: var(--text);
    background: var(--bg);
}

.darklight {
    width: 2.5%;; /* you can use % */
    height: auto;
}

.compLogo {
    transition: 3s;
    filter: brightness(var(--logo));
    position: absolute 50%;
    width: 30%;; /* you can use % */
    height: auto;
}

.logodiv {
    display: flex;
    justify-content: center;
    }

.mainbuttons{
    display: flex;
    justify-content: center;
}

.menubutton {
    cursor: pointer;
    background: transparent;
    border: transparent;
    font-size: 150%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    transition: color 1000ms ease-out;
    color: var(--text);
}

.aboutus{
    display: flex;
    justify-content: left;
    padding-top: 5%;
    margin: auto;    
    width: 50%;
}

details[open] summary ~ *{
    animation: open 450ms ease-in-out;
}

details[close] summary ~ *{
    animation: close 450ms ease-in-out;
}

@keyframes open
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
details summary::-webkit-details-marker
{
    display: none;
}

details summary
{
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: white;
    cursor: pointer;
    font-size: 1.25em;
}

.pagebot
{
    transition: background 500ms ease-in;
    background: var(--bottompage);
    border: transparent;
    padding: 0%;
    position:absolute; left: 0; right: 0; bottom: 0; top: 115%; 
    margin: 0%;
    width: 100%;
    height: 25%;
}