.normal {
    font-style: normal;
}

body {
    background-color: white;
}

section {
    position: relative;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 4vh;
}

p {
    color: black;
}

a, a:hover {
    color: black;
    text-decoration: none;
}

html.sr .load-hidden {
    visibility: hidden;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.hyperlink {
    color: blue;
    text-decoration: underline;
}

.t-pad-5 {
    padding-top: 5em;
}

.intro-bg {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
}

.bg-white {
    background-color: white;
}

.white {
    color: white;
}

.black {
    color: black;
}

.center {
    text-align: center;
}

.line-1 {
    border-right: 2px solid white;
    white-space: nowrap;
    overflow: hidden;
    width: 6.4em;
}

.line-2 {
    border-right: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    width: 12em;
}

/* Animation */
.anim-typewriter {
    animation: typewriter 2s steps(30) 1s 1 normal both,
    blinkTextCursor 500ms steps(30) infinite normal;
}

/* Slow Animation */
.anim-typewriter-slow {
    animation: typewriter-slow 2s steps(30) 5s 1 normal both,
    blinkTextCursor 750ms steps(30) 4s infinite normal;
}

@keyframes typewriter {
    0% {
        width: 0;
    }
}

@keyframes typewriter-slow {
    0% {
        width: 0;
    }
}

@keyframes blinkTextCursor {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: white;
    }
}

/** Cover section **/
#cover-content {
    margin-left: 15%;
}

#arrow-down-home {
    position: absolute;
    left: 49%;
    bottom: 10%;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0% {
        bottom: 10%;
    }
    50% {
        bottom: 11%;
    }
}

/*** Cover Image section ***/
#cover {
    z-index: 10;
}

#cover-image img {
    width: 100%;
    position: relative;
}

#cover-image #silhouette-back,
#cover-image #silhouette-contact {
    display: none;
}

#cover-image:hover #silhouette-back,
#cover-image:hover #silhouette-contact {
    display: block;
}

#cover-image:hover #silhouette-front,
#cover-image:hover #silhouette-content {
    display: none;
}

#cover-image #silhouette-content,
#cover-image:hover #silhouette-contact {
    position: absolute;
    top: 10%;
    left: 20%;
}

#cover-image #silhouette-content {
    color: black;
}

#cover-image:hover #silhouette-content {
    color: white;
}

#cover-image em {
    display: block;
}

#cover-image .parent,
#cover-image .closing-square-braces {
    margin-left: 1em;
}

#cover-image .parent {
    color: green;
    font-weight: bold;
}

#cover-image .closing-square-braces,
#cover-image .open-brace,
#cover-image .closing-braces {
    font-weight: bold;
}

#cover-image .children {
    color: #6082B6;
    font-weight: bold;
}

#cover-image .children {
    margin-left: 2em;
}

#silhouette-contact,
#silhouette-content {
    width: 55%;
}

#silhouette-contact .parent,
#silhouette-contact a {
    color: #34d399;
}

#silhouette-contact .children {
    color: cyan;
}

#silhouette-contact a {
    text-decoration: underline;
}

#cover-image div em {
    font-size: 1.55em;
}

.open-brace {
    margin-left: 15px;
}

#silhouette-content #tap-details {
    display: none;
}

#silhouette-content #hover-details {
    display: block;
}

/*** My Work ***/
#work {
    background-color: white;
}

#work img {
    z-index: 11;
}

#icons img {
    display: block;
    margin: 0 auto;
    width: 18%;
    cursor: pointer;
}

#icons img:hover {
    opacity: 0.5;
}


#icons img, h3 {
    margin-top: 1.5em;
}

#icons h3 {
  font-size: 1.35rem
}

#icons .col {
  margin-top: 3em;
}

#icons p {
    margin-bottom: 1em;
}

#work #icons .row {
    display: block;
}

#work #icons img {
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

#laptop-image {
    position: relative;
}

.laptop {
    width: 100%;
    height: 100%;
}

.inside-laptop img {
    position: absolute;
    top: 4.5%;
    right: 19.1%;
    width: 61.6%;
    height: 62%;
}

#work-content-container {
    display: none;
    overflow: auto;
    text-align: center;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.09) 0 3px 12px;
    width: 100%;
    margin: 0 auto 2em auto;
    z-index: 11;
}

#work-content {
    width: 90%;
    margin: 0 auto;
}

#close-button {
    position: relative;
    text-align: right;
    display: block;
    right: 2%;
    cursor: pointer;
}

#icons {
    padding-bottom: 3em;
}

#arrow-down-work {
    position: absolute;
    left: 46%;
    animation: bounce-work 1s infinite;
    filter: invert(100%);
    transform: rotate(180deg);
    bottom: 3%;
}

@keyframes bounce-work {
    0% {
        bottom: 3%;
    }
    50% {
        bottom: 4%;
    }
}

/*** Media Queries ***/
@media only screen and (max-width: 2050px) {
    #cover-image div em {
        font-size: 1.3em;
    }

    #icons .col {
      margin-top: 0;
    }
}

@media only screen and (min-width: 2000px) {
    .laptop {
        width: 100%;
    }

    #work-content-container {
        width: 90%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1500px) {
    #cover .col {
        margin: 0 auto;
        display: block;
        width: 50%;
    }

    #cover {
        display: block;
    }

    #cover-content {
        padding: 2em 0 2em 0;
    }

    #cover-image div em {
        font-size: 0.95em;
    }

    #cover-image:hover + #arrow-down-home img {
        filter: none;
    }

    #arrow-down-home img {
        filter: invert(100%);
        width: 85%;
    }
}

@media only screen and (min-device-width: 1300px) and (max-device-width: 1649px) {
  #cover-image div em {
      font-size: 1.15em;
  }
}

@media only screen and (max-width: 1649px) {
    h1 {
        font-size: 4em;
        margin: 0 auto;
    }

    h2 {
        font-size: 3vh;
        margin: 0 auto;
    }

    .inside-laptop img {
        position: absolute;
        top: 4.5%;
        right: 19%;
        width: 61.8%;
        height: 60%;
    }
}

@media screen and (min-width: 1050px) {
    #icons {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    #work #icons .row {
        display: flex;
    }

    #icons img {
        display: block;
        margin: 0 auto;
        width: 50%;
    }

    #icons h3 {
        margin: 1em 0;
    }

    .laptop {
        width: 80%;
    }

    #arrow-down-work {
        left: 49%;
    }

    #work-content-container {
        width: 80%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1000px) {

    #silhouette-content #tap-details {
        display: block;
    }

    #silhouette-content #hover-details {
        display: none;
    }

    #cover .col {
        width: 75%;
    }

    #cover .col h1, h2 {
        margin: 0 auto;
    }

    #cover-image div em {
        font-size: 1.2em;
    }

    #cover h1 {
        font-size: 3em;
    }

    #cover h2 {
        font-size: 2em;
    }

    .inside-laptop img {
        top: 4.5%;
        right: 11%;
        width: 77.8%;
        height: 59%;
    }
}


@media only screen and (max-width: 860px) {
    .inside-laptop img {
        top: 4.4%;
        right: 10.5%;
        width: 78.6%;
        height: 54.5%;
    }

    #cover-image div em {
        font-size: 0.9em;
    }
}


@media only screen and (max-width: 700px) {
    .inside-laptop img {
        top: 4.4%;
        right: 10.5%;
        width: 78.6%;
        height: 54.5%;
    }

    #cover-image div em {
        font-size: 0.75em;
    }
}

@media only screen and (max-width: 600px) {
    @keyframes typewriter {
        from {
            width: 0;
        }
        to {
            width: 6.4em;
        }
    }

    @keyframes typewriter-slow {
        from {
            width: 0;
        }
        to {
            width: 12em;
        }
    }

    #cover .col {
        width: 100%;
    }

    #cover h1 {
        font-size: 3em;
    }

    #cover h2 {
        font-size: 2em;
    }
}

@media only screen and (max-width: 470px) {

    #cover {
        padding-bottom: 45%;
    }

    #arrow-down-home img {
        filter: none;
    }

    #laptop-image {
        display: none;
    }

    #work h2 {
        margin-bottom: 1.5em;
    }

    #cover h1 {
        font-size: 3em;
    }

    #cover h2 {
        font-size: 1.2em;
    }

    section {
        min-height: 0;
    }

    #cover-image div em {
        font-size: 0.7em;
    }

    @keyframes typewriter {
        from {
            width: 0;
        }
        to {
            width: 6.5em;
        }
    }

    @keyframes typewriter-slow {
        from {
            width: 0;
        }
        to {
            width: 12em;
        }
    }
}

@media only screen and (max-width: 400px) {
    #cover-image div em {
        font-size: 0.55em;
    }
}

@media only screen and (max-width: 310px) {

    #cover h1 {
        font-size: 2em;
    }

    #cover h2 {
        font-size: 1em;
    }

    #cover-image div em {
        font-size: 0.4em;
    }
}