html { font-size: 87.5%; }

.center {
    margin: auto;
    width: 50%;
}

hr {
    margin: 0;
    margin-top: 1%;
    padding: 0;
    color: whitesmoke;
    border-style: dashed;
}

p {
    letter-spacing: -0.3px;
    font-size: 130%;
}

a {
    text-decoration: none;
    color: cyan;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    font-weight: 400;
    line-height: 1.3;
}

h1 {
    margin-top: 2%;
    padding-bottom: 2%;
    margin-left: 2%;
    margin-right: 2%;
    font-size: 3.209rem;
}

h2 { font-size: 3.157rem; }

h3 { font-size: 2.369rem; }

h4 { font-size: 1.777rem; }

h5 { font-size: 1.222rem; }

body {
    z-index: -2;
    font-family: 'Anonymous Pro', monospace;
    font-weight: 400;
    line-height: 1.75;
    color: whitesmoke;
    background-color: black;
    background-image: url("img/bg1.png");
    background-size: 20%;
    background-blend-mode: luminosity;
    box-shadow: inset 0px 0px 5vw 3vw #000000;
    margin: 0;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    animation: 3200s linear 0s infinite bgscroll;
}

@keyframes bgscroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 10000% 10000%;
    }
}

header {
    z-index: 1;
    position: relative;
    top: 1.3vh;
}

#headerbox {
    background-color: black;
    text-align: center;
    position: relative;
    border: 1.4rem solid transparent;
    border-image: url("img/border.svg") 5 repeat;
}


nav {
    display: grid;
    z-index: 10;
    width: 100%;
    column-gap: 1vw;
    grid-template-columns: 1fr repeat(3, 1fr) 1fr;
    position: absolute;
    top: 95%;
}

nav a {
    font-family: 'Press Start 2P', cursive;
    z-index: 10;
    text-align: center;
    display: block;
    background-color: black;
    position: relative;
    font-size: 1.333rem;
    text-decoration: none;
    color: whitesmoke;
    border: 0.6rem solid transparent;
    border-image: url("img/border.svg") 5 repeat;
}

nav a:hover {
    box-shadow: 0px 5px 15px rgba(245, 245, 245, 0.344);
    top: -5px;
}
.content {
    border: 1.6rem solid transparent;
    border-image: url("img/border.svg") 5 repeat;
    background-color: black;
    width: 80%;
    margin-left: auto;
    margin-bottom: 1%;
    overflow: visible;
    margin-right: auto;
    margin-top: 6%;
    overflow: hidden;
    padding: 1%;
    padding-bottom: 10%;
}

.about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2% 2%;
    grid-template-areas: "left right1 right1" "left right2 right2" "left right3 right3";
}

.right1 { grid-area: right1; }
.right2 { grid-area: right2; }
.right3 { grid-area: right3; }

.left, .right1, .right2, .right3 {
    border-radius: 0.4rem;
    padding: 1%;
    border: 0.6rem solid transparent;
    border-image: url("img/border_white.svg") 5 repeat;
}

.left {
    grid-area: left;
    padding-left: 3%;
    margin: 0;
    padding: 3%;
}

.left img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.right2 {
    clear: both;
}

.right2 h2 {
    text-align: right;
}

.right1 section{
    float: left;
    width: 30%;
    height: 50%;
    padding-right: 10%;
    margin-top: 1%;
    font-size: 1.333rem;
    padding-right: 3%;
}
.skills-list {
    padding: 0;
    font-size: 1.333rem;
    margin-top: 0;
    margin-right: 3%;
    list-style: none;
}



.skills-list li::before {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    content: ">";
    color: white;
    font-weight: bold;
    display: inline-block;
    width: 1rem;
}

.projects {
    display: grid;
    margin-top: 2%;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    gap: 2rem 2rem;
}

.projects article {
    border: 0.6rem solid transparent;
    border-image: url("img/border_white.svg") 5 repeat;
    border-image-outset: 0.5;
    text-align: center;
    background-color: black;
}

.projects article:hover {
    box-shadow: 0px 0px 15px whitesmoke;
}

.projects article img {
    max-width: 100%;
    max-height: 100%;
}

.project-page h3, .project-page hr {
    margin-bottom: 1.5rem;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#links {
    text-align: center;
}

#links img {
    width: 12rem;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}


@media screen and (max-width:864px) {
    html {
        font-size: 62.5%;
    }
    .content {
        margin-top: 10%;
    }
    .projects article img {
        max-width: 50%;
        max-height: 50%;
    }
}

@media screen and (max-width:650px) {
    html {
        font-size: 42.5%;
    }
    .projects {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media screen and (max-width:550px) {
    .content {
        margin-top: 20%;
    }

    html {
        font-size: 42.5%;
    }
    nav {
        grid-template-columns: 1fr;
        top: 120%;
    }
    .projects {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media screen and (max-width:420px) {
    html {
        font-size: 30.5%;
    }
}

@media screen and (max-width:300px) {
    html {
        font-size: 20.5%;
    }
}

@media screen and (max-width:206px) {
    html {
        font-size: 15.5%;
    }
    .content {
        margin-top: 24%;
    }
}