html {
    height: auto;
    min-height: 100%;
}
body {
    font-family: 'Cairo', sans-serif;
    font-size: 0.6rem;
    background-image: linear-gradient(#FFF, #F1F4F4);
    background-size: cover;
}
h1, h2, h3 {
    font-family: 'Germania One', cursive;
    color: #AEC6CF;
}
h1 {
    font-size: 2rem;
}
h3 {
    font-size: 1.1rem;
}
a {
    text-decoration: none;
    color: #B7B7AF;
}
ul {
    list-style: none;
    padding: 1vw;
}
li {
    padding: 0.3rem;
}
button {
    color: #AEC6CF;
    font-weight: bold;
    width: 200px;
    padding: 1vw;
    box-shadow: none;
    border-radius: 6px;
    border-width: 3px;
    border-style: solid;
    cursor: pointer;
    background: white;
    justify-self: center;
    display: none;
}

.wrapper {
    margin-top: 5vw;
}
.grid {
    display: grid;
    grid-auto-rows: minmax(30px, auto);
    grid-gap: 5vw;
}

.text {
    border-top: 2px solid #DFDED4;
    border-bottom: 2px solid #DFDED4;
    text-align: left;
    color: #9FA09B;
}

@media (min-width: 300px) {
    body {
        font-size: 0.8rem;
    }
    h3 {
        font-size: 1.3rem;
    }
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin: 0 10vw 0 10vw;
    }
    #content {
        margin-top: 5vh;
        margin-bottom: 10vh;
    }
    #name {
        grid-column: 1 / 4;
        text-align: right;
        margin-bottom: -10px;
    }
    #job {
        writing-mode: vertical-lr;
        grid-column: 3;
        grid-row: 2 / span 2;
        justify-self: end;
        margin-right: -10px;
    }
    #BBBB {
        grid-column: 2;
        grid-row: 3;
        text-align: justify;
        margin-bottom: -10px;
    }
    #DOTW {
        grid-column: 5;
        grid-row: 1 / span 2;
        text-align: center;
        margin-bottom: -10px;
        writing-mode: vertical-lr;
    }
    #nest {
        grid-column: 3;
        grid-row: 3;
        text-align: center;
        align-self: center;
    }
    #mfd {
        grid-column: 2;
        grid-row: 1;
        writing-mode: vertical-rl;
        text-align: center;
    }
    #dp {
        grid-row: 3;
        grid-column: 4 / span 2;
        align-self: end;
        justify-self: center;
    }

    #located {
        grid-column: 4 / span 2;
        grid-row: 3;
        align-self: end;
        justify-self: start;
    }
    #first {
        grid-column: 1 / span 2;
        grid-row: 2;
        align-self: end;
    }
    #second {
        grid-column: 2 / span 4;
        grid-row: 4;
    }
    #third {
        grid-column: 1 / span 4;
        grid-row: 1;
        align-self: start;
    }
    #fourth {
        grid-column: 2 / span 3;
        grid-row: 2;
    }
    #fifth {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
    #sixth {
        grid-column: 4 / span 2;
        grid-row: 3;
        align-self: end;
    }
    #seventh {
        grid-column: 3 / span 3;
        grid-row: 1;
        align-self: start;
    }
    #eighth {
        grid-column: 2 / span 4;
        grid-row: 2;
    }
    #ninth {
        grid-column: 1 / span 3;
        grid-row: 3;
    }
    #tenth {
        grid-column: 1 / span 5;
        grid-row: 4;
    }
    #links {
        grid-column: 5;
        grid-row: 1 / span 2;
        align-self: start;
    }
    #player{
        grid-column: 4;
        grid-row: 2;
    }
    button {
        grid-column: 3;
        grid-row: 5;
    }
}

@media (min-width: 800px) {
    .grid {
        transform: rotate(-25deg);
        margin: 0 25vw 0 25vw;
    }
    #middle {
        margin: 12vw 10vw 0 10vw;
    }
    #lower {
        margin: 13vw 25vw 0 25vw;
    }
}

@media (min-width: 1100px) {
    #content {
        margin-bottom: 30vh;
    }
    .grid {
        transform: rotate(-35deg);
    }
    #middle {
        margin: 12vw 45vw 10vw 10vw;
    }
    #lower {
        margin: 0 45vw 0 25vw;
    }
    h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1400px) {
    #content {
        margin-top: 20vh;
    }
    .grid {
        transform: rotate(-45deg);
    }
    #lower {
        margin: 0 30vw 10vw 30vw;
    }
    body {
        font-size: 1rem;
    }
    h1 {
        font-size: 2.2rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    button {
        display: inline-block;
    }
}