style.css

i { font-style:italic; }
b { font-weight: bold; }

/* big */
@media only screen and (min-width: 900px) {
    html { font-size: 62.5%; /*62.5% = 10px*/} 
}

/* med */
@media only screen and (max-width: 899px) and (min-width: 600px) {
    html { font-size: 1vw; /*62.5% = 10px*/} 
}

/* small */
@media only screen and (max-width: 599px) and (min-width: 50px) {
    html { font-size: 62.5%; /*62.5% = 10px*/} 
}

body {
    background-color:black;
    font-family: 'Roboto Slab', serif;
    font-size: 1.6rem;
}
h1 { 
    font-size: 4.8rem; 
}
h2 {
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 2rem;
}
p {
    line-height: 1.6;
    margin: auto;
}
p + p {
    margin-top: 1rem;
}

.hello-anim {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    animation: typewriter 6s steps(8) infinite normal both,
    blinkCursor 700ms steps(2) infinite normal;
    border-right: .4rem solid white;
}
@keyframes typewriter {
    0%, 80%, 100% {
        width: 0;
    }
    30%, 50% {
        width: 8ch;
    }
}
@keyframes blinkCursor {
    from {
        border-style: solid;
    }
    to {
        border-style: hidden;
    }
}

.view-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    display: flex;
    overflow: auto;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-container-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
}

video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

/* normal layout */
@media only screen and (min-width: 600px) {
    .main {
        width:90rem;
        position: relative;
        margin: auto;
    }
}
/* phone-layout */
@media only screen and (max-width: 599px) and (min-width: 50px) {
    .main {
        width:100vw;
        position: relative;
        margin: auto;
    }
}

/* force-wrap... ID-based stuff is really jank... don't ever do this (again) */
@media only screen and (max-width: 515px) and (min-width: 50px) {
    #fw1, #fw2{
        flex: 0 0 97vw;
    }
}

.clear { clear:both; }

.blob, .bloblink {
    flex: 1;
    position: relative;
    margin: .5rem;
    box-sizing: border-box;
    border: .2rem solid transparent;
    border-radius: 2rem;
    padding: 2.4rem;
    background: rgba(44, 47, 51, .8);
    color:#FFFFFF;
}

.bloblink:hover {
    border: .2rem solid crimson;
}

.img-link {
    border: .2rem transparent; 
}
.img-link:hover {
    box-shadow: 0 0 0 .2rem crimson;
}

a:link, a:visited {
    color: #99AAB5;
    text-decoration: none;
}
a:hover {
    color: crimson;
}

.space-container {
    display: flex;
    flex:1;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}