design.css

/* Colour/Font Definitions */
@import url(https://fonts.googleapis.com/css?family=Courier+Prime|Ubuntu|Montserrat:400,600,700|Open+Sans&display=swap);
@import url("css/bio.css");
@import url("css/video.css");
@import url("css/proj.css");
@import url("css/mobile.css");



.mobile-only {
    display: None;
}

body {
    width: 100%;
    height: 100vh;
    color: #000000;
}

.flexcontainer {
    display: flex
}


.main_container {
    padding: 0 20vw 30px 20vw;
    background: #000000;
    color: #8C9BA8;
}

.colflex {
    flex-direction: column
}

.rowflex {
    flex-direction: row
}

.button {
    background-color: #284B63;
    color: #FBFFFE;
    font-family: "Arial";
    width: 7em;
    padding: 0.8em;
    padding-bottom: 0.9em;
    border-radius: 2em;
    margin-top: 2em;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #bbe7ff;
    transition: all 0.2s ease;
}

/* Landing------------------------------------------------------------------ */
#landing-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#landing-container canvas, #landing-overlay {
    position: absolute
}

#landing-overlay {
    z-index: 9999 !important;
    color: #000000;
    left: 20%;
    top: 40%;
    width: 60%;
    height: 60%;
}


/* Header Text------------------------------------------------------------------ */
h1 {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 4vw;
    color: #ffffff
}

h2 {
    font-family: 'Arial';
    font-weight: 700;
    font-size: 4em;
    text-align: center;
    color: white
}

h3 {
    font-family: "Courier Prime";
    text-align: left;
    display: inline-block;
    margin: 0 1rem 0.3rem 0rem;
}

#canvas {
    display: block;
    background-color: #000000;
    width: 100%;
    height: 100%;
}

#prev-about {
    font-family: 'Courier Prime', monospace;
    font-size: 1.5vw;
    opacity: 0.7;
    padding-top: 3.5em;
    font-weight: normal;
    color: white;
}

#prev-about:hover {
    opacity: 1.0;
    transition: all 0.2s ease;
    color: #bbe7ff;
}

#prev-exp {
    font-family: 'Courier Prime', monospace;
    font-size: 1.5vw;
    opacity: 0.7;
    font-weight: normal;
    color: white;
}

#prev-exp:hover {
    opacity: 1.0;
    transition: all 0.2s ease;
    color: #bbe7ff;
}

#prev-projects {
    font-family: 'Courier Prime', monospace;
    font-size: 1.5vw;
    opacity: 0.7;
    font-weight: normal;
    color: white
}

#prev-projects:hover {
    opacity: 1.0;
    transition: all 0.2s ease;
    color: #bbe7ff;
}

#intro-text {
    flex-basis: 60%
}

.hover {
    color: #bbe7ff;
    text-decoration: none;
    padding: 20px 0px;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    position: relative;
    opacity: 0.6;
    z-index: 1;
}

.hover::after {
    transition: 300ms;
    height: 5px;
    content: "";
    position: absolute;
    background-color: #bbe7ff;
    opacity: 1.0;
    z-index: -1;
    width: 0%;
    left: 0px;
    bottom: 15px;
    padding: 0;
    margin: 0;
}

/* Rotating Words------------------------------------------------------------------ */

.col1 {
    color: #428bca
}

.col2 {
    color: #bbe7ff
}

.col3 {
    color: #C9E0F3
}

.col4 {
    color: #7a8995
}

.rotating-text {
    overflow: hidden;
}

.rotating-text h1 {
    display: inline-flex;
    margin: 0;
    vertical-align: top;
}
.rotating-text h1 .word {
    position: absolute;
    display: flex;
    opacity: 0;
    overflow: hidden;
    padding-bottom: 0.12em;
}
.rotating-text h1 .word .letter {
    transform-origin: center center 0.8em;
}
.rotating-text h1 .word .letter.out {
    transform: rotateX(90deg);
    transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text h1 .word .letter.in {
    transition: 0.32s ease;
}
.rotating-text h1 .word .letter.behind {
    transform: rotateX(-90deg);
}

/* Experience------------------------------------------------------------------ */

#experience_container:hover > h2 > .hover {
    opacity: 1.0;
}

#experience_container:hover > h2 > .hover::after {
    width: 100%;
}

/* Projects------------------------------------------------------------------ */

#projects_container {
    padding-bottom: 5em;
}

#projects_container:hover > h2 > .hover {
    opacity: 1.0;
}

#projects_container:hover > h2 > .hover::after {
    width: 100%;
}


.slider__caption {
    font-weight: 600;
    font-size: 2em;
    margin-bottom: 0.3rem;
    margin-top: 0.2rem;
    color: white;
}

.slider__txt {
    color: white;
    margin: 1rem 1rem 1rem 0;
    text-align: left;
}

.job_title {
    font-weight: 400;
    font-size: 1.3em;
    margin-bottom: 0.2rem;
    color: #b1b1b1;
}

.company-logo {
    width: 4em;
    height: 4em;
    border-radius: 3px;
    margin-right: 1em;
}

.job-info {
    padding: 0em 0 0em 0;
}

.lang_bar {
    position: relative;
}


/* Copyright------------------------------------------------------------------ */
#copyright {
    text-align: center;
    background-color: #000000;
    padding-bottom: 1em;
}

#copyright p {
    width: 100%;
    color: #b1b1b1;
    font-size: 0.5em;
    padding-bottom: 1em;
}

#copyright a {
    font-family: "Courier Prime", sans-serif;
    font-size: 1em;
    color: white;
    padding: 0 0.5em 0.5em 0.5em;
}