@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    text-align: center;
    background-color: #0a0e14;
    font-family: "Roboto", sans-serif;
    color: #ffffff;
}

header {
    padding: 1em;
    background-color: #1f2430;
}

#page-heading, #name {
    margin: 0;
    text-align: center;
}

nav {
    padding: .6em;
    background-color: #293241;
    margin-bottom: 2em;
    line-height: 2em;
}

a:link, a:visited {
    color: white;
    text-decoration: none;
}

a:link:hover, a:visited:hover {
    color: #7896ce;
    transition: color 200ms;
}

.navigation-list {
    padding: .85em;
    display: inline;
    font-size: 1.1em;
    text-align: center;
}

.navigation-list:hover {
    background-color: white;
    color: #0a0e14;
    transition: background 350ms, color 350ms;
}

#content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.principle-box {
    margin: auto;
    text-align: center;
    border-radius: 15px;
    background-color: #1f2430;
    width: 20em;
    filter: drop-shadow(0px 2px 5px black);
    margin-bottom: 2em;
}

.principle-source {
    padding: .5em;
    background-color:#293241;
    text-decoration: underline;
}

.principle-img {
    width: 18em;
    border-radius: 15px;
    border: .15em solid #293241;
}

.principle-description {
    padding-right: 1em;
    padding-left: 1em;
}
    

#principle-1 {
    grid-column: 2;
}

footer {
    grid-column: 1/3;
    text-align: center;
    margin-top: 1em;
}

footer p {
    font-size: .85em;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

#documentation a {
    text-decoration: underline;
}

@media (max-width: 100em) {
    #content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    #principle-1 {
        grid-column: 1;
    }
}

@media (max-width: 65em) {
    #content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #principle-1 {
        grid-column: 1;
    }
}

@media (max-width: 40em) {
    #content {
        display: block;
    }
}