:root {
    --font-text: 'Averta Regular';
    --font-text-bold: 'Averta Bold';
    --font-code: 'SF Mono Regular';
    --white: #fafafa;
    --dark-grey: #232323;
    --grey: #656565;
    --light-grey: #989898;
    --dark-purple: #69369E;
    --light-purple: #7951A8;
    /*--shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
    --shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    --fluid-level: -40%;
    --bouncy: all 400ms cubic-bezier(.47,1.64,.41,.8);
    --border-radius: 2.0em;
}

body {
    /*background-image: url(data:image/png;base64,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);*/
    background-color: var(--white);
    scroll-behavior: smooth;
}

.animated-1 {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s;
}

.animated-2 {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s;
    transition-delay: 100ms;
}

.animated-3 {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s;
    transition-delay: 200ms;
}

.show {
    transform: translateY(0);
    opacity: 1;
}

.content-full {
    padding-top: calc(35vh);
}

.custom-modal {
    padding: 0;
    border: none;
    overflow: scroll;
}

.col {
    padding: 0;
}

.col-content {
    padding: 10px;
}

html {
    scroll-behavior: smooth;
}

h2 {
    margin: 0;
}

.greeting-text {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.projects {
    display: flex;
    width: 660px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px auto 150px;
}

.project {
    background: var(--light-grey);
    border-radius: var(--border-radius);
    height: 200px;
    width: 200px;
    margin: 5px;
    display: flex;
    flex-direction: column;
}

.my-button {
    border: 1px solid var(--dark-purple);
    border-radius: var(--border-radius);
    font-family: var(--font-code);
    color: var(--dark-purple);
    font-size: 1em;
    padding: 10px 20px;
    background: var(--white);
    transition: background-color 0.2s ease-in-out;
}

.button-close {
    position: absolute;
    right: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--dark-purple);
    font-size: 2em;
    padding: 5px 20px;
}

.button-close:hover {
    color: var(--white);
}

.restart-button {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

a {
    color: var(--dark-grey);
    text-decoration: none;
    /*letter-spacing: 0.15em;*/
    display: inline-block;
    position: relative;
}

a:hover {
    color: var(--dark-grey);
    cursor: pointer;
}

.text {
    font-family: var(--font-text);
    font-size: 1em;
}

.text-bold {
    font-family: var(--font-text-bold);
    font-size: 5em;
    width: 100%;
}

.text-sm {
    font-family: var(--font-text);
    font-size: 0.8em;
}

.project-type {
    margin-left: 10px;
}

.project-header {
    font-family: var(--font-code);
    font-size: 1.2em;
    font-weight: bold;
}

.code {
    font-family: var(--font-code);
    font-size: 0.9em;
}

.dark-grey {
    color: var(--dark-grey);
}

.grey {
    color: var(--grey);
}

.purple {
    color: var(--dark-purple);
}

.white {
    color: var(--white);
}

.background {
    width: 100%;
    height: auto;
    margin: auto;
    /*max-width: 1200px;*/
    /*padding: 40px 0 40px 0;*/
    position: relative;
    z-index: -1;
}

.zoom {
    width: 100%;
    height: calc(100vh);
    transition: background-size 0.7s ease-in-out, scale 0.7s ease-in-out, opacity 0.7s ease-in-out;
    position: absolute;
    opacity: 0;
    scale: 0;
}

.zoom-trackpad {
    width: 100%;
    height: calc(100vh);
    transition: scale 0.7s ease-in-out, opacity 0.7s ease-in-out;
    position: absolute;
    opacity: 0;
    scale: 0;}

.story-1 {
    background: url("img/story/story_1.png") no-repeat 50% 50%;
}

.story-2 {
    background: url("img/story/story_2.png") no-repeat 50% 50%;
}

.story-3 {
    background: url("img/story/story_3.png") no-repeat 50% 50%;
}

.story-4 {
    background: url("img/story/story_4.png") no-repeat 50% 50%;
}

.cat {
    background: url("img/story/endscreen.png") no-repeat 50% 50%;
}

/* switch */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--dark-purple);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--dark-purple);
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}

.slider.round:before {
    border-radius: 50%;
}

.svg-lg {
    height: 80px;
    margin: 40px auto 0;
}

.svg-container {
    margin: 50px auto 0;
}

.svg-m {
    height: 60px;
    margin: 20px -5px 0px -5px;
}

.skill-description {
    margin: 30px auto 0;
    color: var(--dark-grey);
}

.box {
    border-radius: var(--border-radius);
    margin: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--white);
    background-color: var(--white);
    box-sizing: border-box;
    height: 200px;
    width: 200px;
    outline: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: scale 400ms cubic-bezier(.47,1.64,.41,.8);
}

.box:hover {
    background: var(--light-purple);
    color: var(--white);
    scale: 1.1;
}

.box-lg {
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--white);
    box-sizing: border-box;
    height: 300px;
    width: 700px;
    outline: 0;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 30px;
    transition: var(--bouncy);
    cursor: pointer;
}

.box-lg:hover {
    cursor: pointer;
}

.project-img {
    position: absolute;
    z-index: -1;
    height: 250px;
    transition: var(--bouncy);
    bottom: 20px;
    box-shadow: var(--shadow);
}

.img-left {
    left: 10px;
}

.img-right {
    right: 10px;
}

.box-end {
    margin-top: auto;
    align-self: center;
}

.box:hover::before {
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.box:hover::after {
     content: "";
     position: absolute;
     bottom: -10%;
     left: -50%;
     height: 200%;
     width: 200%;
     box-sizing: border-box;
     background-color: var(--white);
    border-radius: 40%;
    animation: spin 2s forwards;
}

@keyframes spin {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(var(--fluid-level)) rotate(180deg);
    }
}

.box-content {
    z-index: 1;
    border-radius: var(--border-radius);
    height: 200px;
    width: 200px;
    margin: 5px;
    display: flex;
    flex-direction: column;
}

.project-content {
    padding-top: 100px;
}

.project-navbar {
    padding: 15px;
}
/* FONTS */
@font-face {
    font-family: 'SF Mono Regular';
    font-style: normal;
    font-weight: normal;
    src: local('SF Mono Regular'), url('fonts/SFMonoRegular.woff') format('woff');
}

@font-face {
    font-family: 'Averta Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Averta Bold'), url('fonts/Averta-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Averta Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Averta Regular'), url('fonts/Averta-Regular.woff') format('woff');
}

@media (min-width: 1000px) {

    /* Laptop / Desktop CSS */

    .content {
        width: 1100px;
        /*padding: 100px;*/
        margin: 0 auto;
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }

    .center {
        margin: 0 auto;
    }

    .navbar {
        opacity: 1;
        position: fixed;
        transition: opacity 0.5s ease-in-out;
        width: 100%;
    }

    .navbar-items {
        display: flex;
        margin-left: auto;
    }

    .nav-item:hover {
        color: var(--dark-grey);
        cursor: pointer;
    }

    .nav-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        display: block;
        background: none repeat scroll 0 0 transparent;
        height: 1px;
        width: 0;
        background: var(--light-purple);
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
    }

    .nav-item:hover::after {
        width: 100%;
        left: 0;
    }

    .nav-email {
        transform: rotateZ(-90deg);
        position: fixed;
        top: 50%;
        right: -80px;
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }

    .my-button:hover {
        background: var(--dark-purple);
        color: var(--white);
    }

    .nav-social {
        position: fixed;
        top: 45%;
        left: 30px;
        width: 10px;
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }

    .social-icon {
        height: 30px;
        transition: var(--bouncy);
        margin-bottom: 10px;
    }

    .social-icon:hover {
        cursor: pointer;
        transition: var(--bouncy);
        height: 50px;
    }
}

/* new modal */
.modal-background {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.25);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: none;
    overflow: scroll;
}

.modal-window {
    max-width: 1000px;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3em;
    background: white;
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in-out;
}

header {
    font-weight: bold;
}

.modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 70px;
    text-decoration: none;
}

.modal-close:hover {
    color: black;
}

.modal-img {
    width: 100%;
    border-radius: 0.5em;
}

@media (min-width: 320px) and (max-width: 999px) {

    /* Mobile and Tablet CSS */

    .navbar {
        padding: 50px;
    }

    .navbar-toggler {
        width: 100px;
        height: 80px;
        border-radius: 10px;
    }

    .center {
        margin: 0 auto;
    }

    .my-button {
        border: 1px solid var(--dark-purple);
        border-radius: var(--border-radius);
        font-family: var(--font-code);
        color: var(--dark-purple);
        font-size: 2em;
        padding: 20px 40px;
        background: var(--white);
        transition: background-color 0.2s ease-in-out;
    }

    .nav-email {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }

    .nav-social {
        display: flex;
        margin-bottom: 30px;
    }

    .social-icon {
        height: 150px;
        margin-right: 30px;
    }

    .code {
        font-family: var(--font-code);
        font-size: 2em;
    }

    .text {
        font-family: var(--font-text);
        font-size: 2em;
    }

    .text-sm {
        font-family: var(--font-text);
        font-size: 1.5em;
    }

    .content {
        width: 100%;
        margin: 0 auto;
        opacity: 1;
        padding: 40% 100px 100px;
    }

    .projects {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .skill-wrapper {
        /*width: 100%;*/
    }

    .box {
        border-radius: var(--border-radius);
        margin: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        background: var(--white);
        background-color: var(--white);
        box-sizing: border-box;
        height: 400px;
        width: 370px;
        /*width: 47%;*/
        outline: 0;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: scale 400ms cubic-bezier(.47,1.64,.41,.8);
    }

    .box:hover {
        background: var(--light-purple);
        color: var(--white);
        scale: 1.05;
    }

    .box-content {
        z-index: 1;
        border-radius: var(--border-radius);
        width: 100%;
        height: 100%;
        margin: 5px;
        display: flex;
        flex-direction: column;
        font-size: 1.3em;
        padding-top: 100px;
    }

    .svg-lg {
        height: 150px;
        margin: 0;
    }

    .box-lg {
        border-radius: var(--border-radius);
        display: flex;
        flex-direction: column;
        position: relative;
        background: var(--white);
        box-sizing: border-box;
        height: 650px;
        width: 100%;
        outline: 0;
        box-shadow: var(--shadow);
        margin-bottom: 20px;
        margin-top: 20px;
        padding: 10px 10px 10px 20px;
        overflow: auto;
    }

    .project-header {
        font-family: var(--font-code);
        font-size: 2.5em;
    }

    .modal-window {
        width: 95%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 3em;
        background: white;
        border-radius: var(--border-radius);
        transition: all 0.2s ease-in-out;
    }
}

.tag {
    color: white;
    background: #7951A8;
    border-radius: var(--border-radius);
    padding: 5px 15px;
    width: fit-content;
    position: absolute;
    top: 20px;
    right: 20px;
}