@media (max-width: 900px) {
     main.home {
         background: url("../elements/background-logo-white.svg") no-repeat -65vw -50vh / 175% 275%, #D8D8F6;
    }
     main.home section.introduction {
         width: 75vw;
         margin: 8vh 5vw 10vh 20vw;
    }
    div.home-navigation a.button {
        flex: 0 1 calc(50% - 50px);
    }
}
 @media (max-width: 900px) and (prefers-color-scheme: dark) {
     main.home {
         background: url("../elements/background-logo-white.svg") no-repeat -65vw -60vh / 175% 275%, #503459;
    }
}
 @media (max-width: 750px) {
     nav a {
         width: 90vw;
         text-align: center;
         padding: 1vh 5vw;
    }
     main.home {
         background-position: -50vw top;
         background-size: 175% auto;
    }
     main.home section.introduction {
         width: 90vw;
         margin: 5vh 25px 5vh;
    }
     div.home-navigation a.button {
         flex: 0 0 90vw;
    }
     main.sub section.content div.sidebar {
         flex: 1 0 100%;
    }
}
 @media (max-width: 500px) {
     header img.logo {
         display: inline-block;
         height: 60px;
    }
     main.home {
         background-position: -125vw -5vh;
         background-size: 275% auto;
    }
     nav a {
         font-size: 1.75rem;
         width: 85vw;
         text-align: center;
         padding: 1vh 10vw;
    }
     main.home section.introduction {
         width: 80vw;
         margin: 5vh 10vw 10vh 5vw;
    }
     main.home section.introduction h1 {
         font-size: 2.5rem;
    }
     div.home-navigation a.button {
         flex: 0 0 100%;
    }
     main.sub section.content {
         margin: 75px auto;
         gap: 25px;
    }
     main.sub section.content ol {
         margin: 24px 0;
    }
     main.sub section.content ul {
         margin: 24px 0 0 20px;
    }
     main.sub section.content ul li {
         padding: 0 0 0 10px;
    }
}
 @media (max-width: 400px) {
     header img.logo {
         display: inline-block;
         height: 60px;
    }
     nav a {
         font-size: 1.6rem;
         width: 85vw;
         text-align: center;
         padding: 1vh 10vw;
    }
     main.home {
         background-position: -125vw -5vh;
         background-size: 250% auto;
    }
     main.home section.introduction {
         width: 80vw;
         margin: 5vh 10vw 10vh 5vw;
    }
     main.home section.introduction h1 {
         font-size: 2.5rem;
    }
     div.home-navigation {
         margin: 50px 0;
    }
     div.home-navigation a.button {
         flex: 0 0 100%;
    }
     main.sub section.content {
         margin: 75px auto;
         gap: 25px;
    }
     main.sub section.content h2 {
         font-size: 2rem;
    }
     main.sub section.content ol {
         margin: 24px 0;
    }
     main.sub section.content ul {
         margin: 24px 0 0 20px;
    }
     main.sub section.content ul li {
         padding: 0 0 0 10px;
    }
}