@font-face {
    font-family: lemonmilk-bold;
    src: url(./fonts/LEMONMILK-Bold.otf);
}
@font-face {
    font-family: lemonmilk-light;
    src: url(./fonts/LEMONMILK-Light.otf);
}

body {
    background: url('images/doitforyou.png');
    background-size: 5vw;

    color: white;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.5vh;
}
img {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    border: transparent .1vw solid;
    
    image-rendering: pixelated;
}
p, div {
    margin: 0;
    padding: 0;
}
div {
    background-color: rgba(0, 0, 0, 0.6);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0;
    image-rendering: pixelated;
    filter: saturate(2);
    animation: bganim 8s ease-in-out infinite;
}
@keyframes bganim {
    0% {filter: saturate(2);}
    50% {filter: saturate(8);}
    100% {filter: saturate(2);}
}


.grid-container {
    width: 90vw;
    margin: 5vh auto;
    display: grid;
    grid-template-columns: 35% 10% 45% 10%;
    grid-template-rows: 10vh 63vh 7vh;
    gap: 1vw;
}
.grid-item {
    border: #FF1D00 .1vw solid;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}
.grid-sub-item {
    border: #FF1D00 .025vw solid;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}

a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

.topbar {
    display: flex;
    justify-content: left;
    align-items: start;
    
    width: 100%;
    height: 5vh;

    background-color: #FF1D00;

    font-family: 'lemonmilk-light';
    font-size: 4.5vh;
    color: black;
}
.topbar p {
    padding: 0 0 0 5vw;
    margin: 0;
}
.favicon {
    animation: hueRot 4s linear infinite;
    background-image: url('images/favicon.ico');
    width: 3vw;
    height: 3vw;
}
@keyframes hueRot {
    0% {filter: contrast(10) hue-rotate(0deg);}
    100% {filter: contrast(10) hue-rotate(360deg);}
}

.banner {
    display: grid;
    grid-template-columns: 50% 45%;
    grid-template-rows: 100%;
    gap: 1vw;

    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}

.bio {
    display: grid;
    grid-template-columns: 90% 10%;
    grid-template-rows: 55% 10% 5% 30%;
    gap: 0;

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.resume {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 75% 20%;
    gap: 5%;

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.toolbelt {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

.projects {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 5vh 85%;

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

.creature {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50% 25% 25%;

    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

.container {
    width: 95%;
    margin: 1vw auto;
    display: flexbox;
    columns: 3;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.tab-list input {
    box-sizing: border-box;
    border: #FF1D00 1px solid;
    border-radius: 0;

    background: none;
    height: 2.5vh;
    flex: 1 0 auto;
    
    color: silver;
    font-size: 1.5vh;

    cursor: pointer;
}
.tab-list input:hover {
    color: white;
}
.tab-list input.active {
    color: red;
}
.tab-link {
    height: 50%;
}
.tab {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;

    font-size: 1.5vh;
}
.tab .thumb {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}
.tab .summ {
    width: 100%;
    height: 100%;
}
.tab .contr-1 {
    width: 100%;
    height: 100%;

    padding-top: .5vh;

    border-top:#FF1D00 dotted .15vw;
}
.tab .contr-2 {
    width: 100%;
    height: 100%;

    padding-top: .5vh;

    border-top:#FF1D00 dotted .15vw;
}
.tab h1 {
    padding: 0;
    margin: 0;

    font-family: 'lemonmilk-bold';
    font-size: 2.4vh;
}
.tab h2 {
    padding: 0;
    margin: 0;

    font-family: 'lemonmilk-light';
    font-size: 1.5vh;
    color: silver;
}
.tab h3 {
    padding: 0;
    margin: 0;

    font-family: 'lemonmilk-light';
    font-style: italic;
    color: rgb(100, 100, 100);
}
.tab p {
    margin: .1vw 1vw;
    padding-left: .5vw;
}
.tab ul {
    padding-left: 2vw;
}