:root {
--orange: #ed9121;
--orange-dark: #c87a1c;
--lightorange: #ffc37a;
--lightorange-dark: #d6a466;
--darkorange: #cc770f;
--darkorange-dark: #a35f0c;
}



header {
    background: var(--orange);
    filter: drop-shadow(0px 3px 7px var(--orange-dark)) drop-shadow(0px 3px 7px var(--orange-dark));
    justify-content: center;
    padding-left: 35px;
}
section {
    background: var(--lightorange);
    filter: drop-shadow(0px 3px 3px var(--lightorange-dark)) drop-shadow(0px 3px 3px var(--lightorange-dark));
}
header h1 {
    padding-left: 26%;
    font-size: 65px;
    transition: translate 2s ease-in-out, scale !important;
    color: black !important;
}
header h1:hover {
    translate: 300% !important;
    scale: 1 !important;
}
nav {
    background: var(--lightorange);
    filter: drop-shadow(3px 0px 7px var(--lightorange-dark)) drop-shadow(3px 0px 7px var(--lightorange-dark));
}
footer {
    background: var(--orange);
    filter: drop-shadow(0px -3px 7px var(--orange-dark)) drop-shadow(0px -3px 7px var(--orange-dark));
}
.acrlogo {
     width: 85px !important;
     height: 85px !important;
     min-width: auto !important;
     transition: rotate 60s ease-in-out , scale 60s ease-in-out !important;
}

#profile-picture img {
    max-width: 100%;;
    max-height: 100%;
}
#profile-picture img.acrlogo {
   min-width: 250px !important;
   min-height: 250px !important;
}

.acrlogo:hover {
    rotate: -499680deg !important;
    scale: 1.35 !important;
}
.header {
    background: var(--orange);
    filter: drop-shadow(0px 3px 3px var(--orange-dark)) drop-shadow(0px 3px 3px var(--orange-dark));
}
#OS img {
    max-width: 850px;
}
#OS {
    max-width: 65%;
    max-height: fit-content;
}

@media (max-width: 1080px) {
    header h1 {
        font-size: 15px;
    }
    header .acrlogo {
        width: 45px !important;
        height: 45px !important;
    }
    #profile-picture img {
        width: 135px !important;
        height: 135px !important;
    }
    #OS img {
    max-width: 400px;
    }
    #OS {
    max-width: 85%;
    }
}

html:has(#darkmode:checked) {
    header {
        background: var(--darkorange);
        filter: drop-shadow(0px 3px 7px var(--darkorange-dark)) drop-shadow(0px 3px 7px var(--darkorange-dark));
    }
    header h1, footer {
        color: white !important;
    }

    section {
        background: var(--orange);
        filter: drop-shadow(0px 3px 3px var(--orange-dark)) drop-shadow(0px 3px 3px var(--orange-dark));
    }

    nav {
        background: var(--orange);
        filter: drop-shadow(3px 0px 7px var(--orange-dark)) drop-shadow(3px 0px 7px var(--orange-dark));
    }
    footer {
        background: var(--darkorange);
        filter: drop-shadow(0px -3px 7px var(--darkorange-dark)) drop-shadow(0px -3px 7px var(--darkorange-dark));
    }

    .header {
        background: var(--darkorange);
        filter: drop-shadow(0px 3px 3px var(--darkorange-dark)) drop-shadow(0px 3px 3px var(--darkorange-dark));
    }
}