html {
    scroll-behavior: smooth;
    font-family: Candara;
    font-size: 1.2rem;
    font-weight: 100;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

body {
    background-color: black;
    color: white;
    visibility: hidden;
}

.white-mode {
    background-color: white;
    color: black;

    .button, button, .project-text, .sparkle_left, .sparkle_right, #dao-6 {
        filter: invert(1);
    }
    
    .project-text p, footer {
        opacity: 100%;
    }
    
    .project-text p {
        color: white;
    }
}

.top {
    display: flex;
    align-items: center;
    align-content: center;
    margin-top: 2%;
}

.navbar {
    right: 0;
    position: fixed;
    margin-right: 2%;
    z-index: 40;
}

#top-left {
    margin-left: 2%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.active {
    text-decoration: wavy underline !important;
}

#lang-chooser {
    display: flex;
    flex-direction: row;
}

.lang-en {
    margin-left: 10px;
}

.lang-en, .lang-pt {
    padding: 8% 18%;
    margin-right: 5px;
    border-radius: 20px;
    border: 1px solid #FFF;
    text-align: center;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    display: inline-block;
    transition: all 0.3s ease;
}

#moon {
    fill: white;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
}

#color-change {
    border: none;
    background-color: transparent;
    border-radius: 20px;
    border: 1px solid #FFF;
    padding: 20% 28%;
    transition: all 0.3s ease;
    background-color: black;
}

#moon-button {
    width: 9%;
}

.navbutton {
    padding: 5px 25px;
    /* box-shadow: 7px 5px 16px 0px black; */
    margin-right: 5px;
    border-radius: 20px;
    border: 1px solid #FFF;
    text-align: center;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    display: inline-block;
    transition: all 0.3s ease;
}

#contact {
    padding: 5px 25px;
    border-radius: 20px;
    border: 1px solid #FFF;
    /* box-shadow: 7px 5px 16px 0px white; */
    text-align: center;
    text-decoration: none;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    background: white;
    color: black;
    display: inline-block;
    transition: all 0.3s ease;
}

#contact:hover {
    box-shadow: 0px 0px 20px 2px white;
}

.hello {
    text-align: center;
}

h1 {
    margin: 0;
    padding-top: 9%;
    line-height: 11vw;
    font-size: 12vw;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: lighter;
    height: 20vw;
}

/* Animation title */

span {
    border-right: .05em solid;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

/* --- */

.first-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.first-images-wrapper {
    padding: 4% 2%;
    width: 15%;
}

/* .me-image {
    width: 100%;
    height: 100%;
} */

#about {
    font-size: 3vw;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: lighter;
    /* text-align: center; */
    margin-left: 20%;
}

.about {
    transition: all 0.5s ease-in-out;
    opacity: 1
}

.about-texts {
    margin-left: 50%;
    margin-top: -3%;
    max-width: 25%;
}

.text-about {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-in-out;
    font-size: 1.1vw;
}

.text-project {
    font-size: 1.1vw;
    max-width: 40%;
    margin-top: 10%;
}

.text-project-high {
    font-size: 1.1vw;
    max-width: 40%;
}

.project-inside {
    display: flex;
    flex-direction: row;
    padding: 10% 10% 0% 10%;
    /* margin-bottom: -10%; */
}

.project-info {
    margin-right: 10%;
    margin-top: 7%;
    font-size: 0.95vw;
}

.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    cursor: grab;
}

#portfolio,
#about {
    scroll-margin-top: 2em;
}

.portfolio {
    display: inherit;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    transition: all 0.25s ease-in-out;
}

.portfolio-wrap {
    display: flex;
    flex-direction: column;
}

.port-big-title {
    display: flex;
    flex-direction: row;
    padding: 10% 0 3% 0;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none;
}

.visually-hidden {
    opacity: 0;
}

.sparkle_right {
    height: auto;
    width: 2%;
    transform: translate(3%, -25%);
}

.sparkle_left {
    height: auto;
    width: 2%;
    transform: translate(5%, 45%);
}


h2 {
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: lighter;
    font-size: 2.5vw;
}

.project {
    display: inherit;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3%;
    max-width: 30%;
}

.project-image {
    height: auto;
    width: 95%;
    border-radius: 8px;
}

.left {
    margin-right: 1%;
    text-align: center;
}

.left p {
    text-align: left;
}

.right {
    margin-left: 1%;
    text-align: center;
}

.right p {
    text-align: left;
}

.over {
    transform: translate(120px, -200px);
    max-width: 35vh;
}

.project-text {
    flex-direction: row;
    align-items: center;
    align-self: center;
    display: inherit;
    max-width: 90%;
    margin-top: 3%;
}

.project-text h3 {
    /* margin-bottom: 1%; */
    padding: 5px 25px;
    border-radius: 20px;
    width: fit-content;
    border: 1px solid #FFF;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: 100;
    transition: all 0.3s ease;
    flex: 0;
    white-space: nowrap;
    font-size: 1.2vw;
}

.project-text h2 {
    /* margin-bottom: 1%; */
    padding: 5px 25px;
    border-radius: 50px;
    width: fit-content;
    border: 1px solid #FFF;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: 100;
    transition: all 0.3s ease;
    flex: 0;
    white-space: nowrap;
}

.project-text p {
    opacity: 60%;
    margin-left: 5%;
    font-size: 0.8rem;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    font-size: 0.8vw;
}

.more {
    padding: 5px 25px;
    border-radius: 20px;
    width: fit-content;
    border: 1px solid #FFF;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-size: 1.2vw;
    font-weight: 100;
    margin: 1% auto 0% auto;
    transition: all 0.3s ease;
    cursor: pointer;
}

#lets {
    font-size: 3vw;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    font-weight: lighter;
    text-align: center;
    margin-top: 15%;
}

.info {
    margin-top: -1%;
    justify-content: center;
    display: flex;
}

.info-button {
    padding: 5px 25px;
    margin-right: 10px;
    border-radius: 20px;
    border: 1px solid #FFF;
    text-align: center;
    text-decoration: none;
    background: #000;
    color: white;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght"100;
    transition: all 0.3s ease;
    font-size: 1vw;
}

.button:hover {
    transition: all 0.3s ease;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: white;
    color: black;
}

.active:hover {
    transition: none;
    transform: none;
    -webkit-transform: none;
    background-color: black;
    color: white;
    cursor: default;
}

#color-change:hover svg path, #color-change:hover{
    transition: all 0.3s ease;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: white;
    fill: black;
    cursor: pointer;
}

.push-up {
    opacity: 0;
    transform: translateY(50px);
}

.fade-in {
    opacity: 0;
}

/* .container {
    position: absolute;
}

.draggable-container {
    cursor: move;
} */

.transition-delay {
    transition-delay: 0.3s;
}

/* .wavy {
    animation-name: wavy;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    position: relative;
    top: 0;
    left: 0;
}

@keyframes wavy {
    0% {
        top: 0px;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0px;
    }
}
 */

/* .pswp-caption-content {
    opacity: 0.5;
} */

.project-images {
    display: flex;
    flex-direction: column;
    margin-top: -5%;
}

.pswp__dynamic-caption {
    margin-top: 0px !important;
    color: #9C9C9C !important;
    font-size: 1vw !important;
}

#project-image-1 {
    margin: -5% 0 0 20%;
    width: 50%;
}

#project-image-2 {
    margin: -20% 0 0 60%;
    max-width: 37%;
    height: auto;
}

#project-image-3 {
    margin: -42% 0 0 -8%;
    max-width: 50%;
    height: auto;
}

#project-image-4 {
    margin: -30% 0 0 35%;
    max-width: 30%;
    height: auto;
}

#project-image-5 {
    margin: 7% 0 0 65%;
    max-width: 30%;
    height: auto;
}

#project-image-6 {
    margin: 10% 0 0 5%;
    max-width: 35%;
    height: auto;
}

#project-image-7 {
    margin: -32% 0 0 35%;
    max-width: 35%;
    height: auto;
}

#project-image-8 {
    margin: -15% 0 0 60%;
    max-width: 35%;
    height: auto;
}

#project-image-9 {
    margin: -10% 0 0 30%;
    max-width: 25%;
    height: auto;
}

#project-image-10 {
    margin: -35% 0 0 50%;
    max-width: 25%;
    height: auto;
}

#project-image-11 {
    margin: -18% 0 0 15%;
    width: 45%;
    height: auto;
}

/* OERU */

#oeru-title {
    margin: 0 0 0 55%;
    width: 40%;
    height: auto;
}

#oeru-website {
    margin: -6% 0 0 22%;
    width: 50%;
}

#oeru-teaser {
    margin: 0% 0 0 10%;
    width: 40vh;
    height: auto;
}

#oeru-ovum {
    margin: -10% 0 0 15%;
    width: 40%;
    height: auto;
}

#oeru-poster {
    margin: -30% 0 0 65%;
    max-width: 35%;
    height: auto;
}

#oeru-ex {
    margin: -20% 0 0 60%;
    max-width: 27%;
    height: auto;
}

#oeru-notas {
    margin: -15% 0 0 0%;
    max-width: 20%;
    height: auto;
}

#oeru-notas-web-1 {
    margin: -2% 0 0 12%;
    max-width: 10%;
    height: auto;
}

#oeru-notas-web-2 {
    margin: 0% 0 0 0%;
    max-width: 10%;
    height: auto;
}

/* BE BETTER KPOP */

#bbk-poster {
    margin: 0% 0% 0% 60%; 
    max-width: 40%;
    height: auto;
}

#bbk-website {
    margin: -22% 0 0 8%;
    width: 70%;
}

/* COMMUNI */

#communi-logo {
    margin: -25% 0 0 60%;
    max-width: 37%;
    height: auto;
    z-index: 10;
}

#communi-poster {
    margin: -50% 0 0 10%;
    max-width: 30%;
    height: auto;
}

#communi-ani {
    margin: -7% 0 0 30%;
    width: 45%;
    height: auto;
}

/* DAO */

#dao-1 {
    margin: -100% 0 10% 5%;
    width: 17vw;
    height: auto;
}

#dao-2 {
    margin: 5% 0 0 40%;
    width: 28vw;
    height: auto;
}

#dao-3 {
    margin: -15% 0 0 60%;
    width: 28vw;
    height: auto;
}

#dao-4 {
    margin: -55% 0 0 20%;
    width: 28vw;
    height: auto;
}

#dao-5 {
    margin: -80% 0% 0 -20%;
    width: 20vw;
    height: auto;
}

#dao-6 {
    margin: -10% 0% -10% 120%;
    width: 15vw;
    height: auto;
}

#dao-7 {
    margin: -20% 0% -10% 120%;
    width: 17vw;
    height: auto;
}

/* LOVECRAFT */

#lovecraft-1 {
    margin: -10% 0 0 -25%;
    width: 50%;
}

#lovecraft-2 {
    margin: -17% 0 0 0%;
    width: 50%;
}

#lovecraft-3 {
    margin: -35% 0 0 45%;
    width: 50%;
}

#lovecraft-4 {
    margin: -5% 0 0 10%;
    width: 50%;
}

#lovecraft-5 {
    margin: -50% 0 0 60%;
    width: 25%;
}

#lovecraft-6 {
    margin: -40% 0 0 70%;
    width: 20%;
}

#lovecraft-7 {
    margin: -40% 0 0 70%;
    width: 40%;
}

#lovecraft-8 {
    margin: -3% 0 0 5%;
    width: 40%;
}

#lovecraft-9 {
    margin: -10% 0 0 -20%;
    width: 60%;
}

/*  */

#last {
    margin-bottom: 8%;
} 

/*  */

footer {
    text-align: center;
    font-size: 0.8vw;
    opacity: 50%;
    margin: 12% 0 4% 0;
}

/* MEDIA QUERY */

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

    .hello {
        padding-top: 50px;
    }

    #about {
        font-size: 4vw;
        margin-left: 15%;
    }

    .me-image {
        height: 40vw;
    }

    .about-texts {
        max-width: 40%;
        margin: 3% 0 0 50%;
    }

    .text-about {
        font-size: 2vw;
    }
    
    .port-big-title {
        padding: 15% 0 5% 0;
    }

    #portfolio {
        font-size: 4vw;
    }

    .sparkle_left, .sparkle_right {
        width: 3%;
    }

    .project {
        max-width: 40%;
        display: block;
    }

    .project-text {
        flex-direction: column;
        align-items: start;
        margin-left: 3%;
    }
 
    .project-text h3 {
        font-size: 2vw;
    }

    .project-text p {
        font-size: 1.5vw;
        margin-top: -5px;
    }

    .more {
        font-size: 2vw;
        margin-top: 30px;
        margin-bottom: 50px;
    }
  
    #lets {
        font-size: 4vw;
    }

    .info-button {
        font-size: 2vw;
        margin-bottom: 10px;
    }

    footer {
        /* margin: 100px 0 50px 0; */
        font-size: 1.5vw;
    }

    /* projects */

    .text-project {
        max-width: 50%;
    }

    .project-text {
        margin-left: 0;
    }

    .project-text h2 {
        font-size: 3vw;
    }

    .project-info {
        font-size: 1.5vw;
    }

    .pswp__dynamic-caption {
        font-size: 1.5vw !important;
    }
}

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

    #top-left {
        font-size: 3vw;
    }

    .hello {
        margin-top: 140px;
    }

    .hello h1 {
        font-size: 20vw;
        line-height: 18vw;
        margin-bottom: 30px;
    }

    .first-images-wrapper {
        padding: 15% 1%;
        width: 23%;
    }

    .me-image {
        height: 50vw;
    }

    .portfolio {
        flex-direction: column;
        align-items: center;
    }

    #about {
        font-size: 5vw;
        margin-left: 8%;
    }

    .about-texts {
        max-width: 60%;
        margin: 6% 0 0 25%;
    }

    .text-about {
        font-size: 3vw;
    }
    
    .port-big-title {
        padding: 20% 0 5% 0;
    }

    #portfolio {
        font-size: 6vw;
    }

    .sparkle_left, .sparkle_right {
        width: 5%;
    }

    .project {
        max-width: 85%;
        margin-right: 0;
        display: block;
    }

    .project-text {
        flex-direction: column;
        align-items: start;
        margin-left: 3%;
        max-width: 95%;
    }

    .project-text h3 {
        font-size: 4vw;
        margin-top: 10%;
    }

    .project-text p {
        font-size: 2.5vw;
        margin: 0 0 15% 10%;
    }

    .more {
        font-size: 5vw;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #lets {
        font-size: 8vw;
    }

    .info {
        flex-wrap: wrap;
    }

    .info-button {
        font-size: 4vw;
        margin-bottom: 10px;
    }

    footer {
        margin: 100px 0 50px 0;
        font-size: 3vw;
    }

    /* projects */

    .project-inside {
        flex-direction: column-reverse;
        padding: 20% 5% 0 5%; 
    }

    .text-project, .text-project-high {
        max-width: 95%;
    }

    .project-text {
        margin-left: 0;
    }

    .project-text h2 {
        font-size: 6vw;
    }

    .project-info {
        font-size: 4vw;
        margin-top: 30px;
    }

    .pswp__dynamic-caption {
        font-size: 4vw !important;
    }

    #lovecraft-1 {
        margin: 10% 0 0 5%;
    }

    #dao-3 {
        margin: -15% 0 0 43%;
    }
}

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

    .navbar {        
        font-size: 4vw;
        float: none;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }   

    #top-left {
        font-size: 3vw;
        margin-top: 10px;
    }

    .hello {
        margin-top: 140px;
    }

    .hello h1 {
        font-size: 20vw;
        line-height: 18vw;
        margin-bottom: 30px;
    }

    .first-images-wrapper {
        padding: 15% 1%;
        width: 23%;
    }

    .portfolio {
        flex-direction: column;
        align-items: center;
    }

    #about {
        font-size: 5vw;
        margin-left: 8%;
    }

    .about-texts {
        max-width: 60%;
        margin: 6% 0 0 25%;
    }

    .text-about {
        font-size: 3vw;
    }
    
    .port-big-title {
        padding: 20% 0 5% 0;
    }

    #portfolio {
        font-size: 6vw;
    }

    .sparkle_left, .sparkle_right {
        width: 5%;
    }

    .project {
        max-width: 85%;
        margin-right: 0;
        display: block;
    }

    .project-text {
        flex-direction: column;
        align-items: start;
        margin-left: 3%;
        max-width: 95%;
    }

    .project-text h3 {
        font-size: 4vw;
        margin-top: 10%;
    }

    .project-text p {
        font-size: 2.5vw;
        margin: 0 0 15% 10%;
    }

    .more {
        font-size: 5vw;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #lets {
        font-size: 8vw;
    }

    .info {
        flex-wrap: wrap;
    }

    .info-button {
        font-size: 4vw;
        margin-bottom: 10px;
    }

    footer {
        margin: 100px 0 50px 0;
        font-size: 3vw;
    }

    /* projects */

    .project-inside {
        flex-direction: column-reverse;
        padding: 20% 5% 0 5%; 
    }

    .text-project, .text-project-high {
        max-width: 95%;
    }

    .project-text {
        margin-left: 0;
    }

    .project-text h2 {
        font-size: 6vw;
    }

    .project-info {
        font-size: 4vw;
        margin-top: 30px;
    }

    .pswp__dynamic-caption {
        font-size: 4vw !important;
    }

    #lovecraft-1 {
        margin: 10% 0 0 5%;
    }

    #dao-3 {
        margin: -15% 0 0 43%;
    }
}

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

    .navbar {        
        font-size: 4vw;
        float: none;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }   

    #top-left {
        font-size: 3vw;
        margin-top: 10px;
    }

    .hello {
        margin-top: 140px;
    }

    .hello h1 {
        font-size: 20vw;
        line-height: 18vw;
        margin-bottom: 30px;
    }

    .first-images-wrapper {
        padding: 15% 1%;
        width: 23%;
    }

    .portfolio {
        flex-direction: column;
        align-items: center;
    }

    #about {
        font-size: 6vw;
        margin-left: 8%;
    }

    .about-texts {
        max-width: 60%;
        margin: 6% 0 0 25%;
    }

    .text-about {
        font-size: 4vw;
    }
    
    .port-big-title {
        padding: 20% 0 5% 0;
    }

    #portfolio {
        font-size: 8vw;
    }

    .sparkle_left, .sparkle_right {
        width: 5%;
    }

    .project {
        max-width: 85%;
        margin-right: 0;
        display: block;
    }

    .project-text {
        flex-direction: column;
        align-items: start;
        margin-left: 3%;
        max-width: 95%;
    }

    .project-text h3 {
        font-size: 5vw;
        margin-top: 10%;
    }

    .project-text p {
        font-size: 3vw;
        margin: 0 0 15% 10%;
    }

    .more {
        font-size: 5vw;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #lets {
        font-size: 8vw;
    }

    .info {
        flex-wrap: wrap;
    }

    .info-button {
        font-size: 4vw;
        margin-bottom: 10px;
    }

    footer {
        margin: 100px 0 50px 0;
        font-size: 3vw;
    }

    /* projects */

    .project-inside {
        flex-direction: column-reverse;
        padding: 20% 5% 0 5%; 
    }

    .text-project, .text-project-high {
        max-width: 95%;
    }

    .project-text {
        margin-left: 0;
    }

    .project-text h2 {
        font-size: 6vw;
    }

    .project-info {
        font-size: 4vw;
        margin-top: 30px;
    }

    .pswp__dynamic-caption {
        font-size: 4vw !important;
    }

    #lovecraft-1 {
        margin: 10% 0 0 5%;
    }

    #dao-3 {
        margin: -15% 0 0 43%;
    }
}