.hider {
    display: none;
}

.unhider {
    display: block;
}

/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: url('../../public/images/cursors/Sakura_Arrow.cur'), auto;
} */

/* body {
    font-family: 'Rock Salt', cursive;
    font-size: calc(100vh / 130);
    font-weight: bolder;
} */

/* section {
    position: relative;
}

a {
    text-decoration: none;
    color: inherit;
}

div.nav a:hover {
    text-decoration: underline;
    cursor: url('../../public/images/cursors/Sakura_Link.cur'), auto;
} */
/* a:hover, #name:hover {
    cursor: url('../../public/images/cursors/Sakura_Link.cur'),url('public/images/cursors/Sakura_Link.cur'), auto;
} */

/* background */
/* 
.background {
    overflow: hidden;
    background-image: url('../../public/images/beautiful-bloom-blooming-1023953.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -10;
    -webkit-filter: blur(3px) saturate(1);
    filter: blur(3px) saturate(1);
}

.background-transform {
    -webkit-filter: blur(15px) saturate(1.4);
    filter: blur(15px) saturate(1.4);
    -webkit-transition: filter 1.2s ease;
    transition: filter 1.2s ease;
    -webkit-transition-delay: 11.3s;
    transition-delay: 11.3s;
} */

/* HOME section*/

/* ID */
/* #home {
    color: #fd3c4c;
    opacity: .98;
    height: 100vh;
    overflow: hidden;
} */

/* #name {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    text-align: center;
    z-index: 5;
    font-size: calc(100vw / 20);
    line-height: 100%;
    font-weight: normal;
} */

/* #name span:nth-child(1) {
    color: #fd3c4c;
    opacity: .98;
    vertical-align: text-top;
    font-size: calc(100vw /10);
    font-weight: bolder;
}

#name span:nth-child(8) {
    color: #e7709a;
    opacity: .75;
    vertical-align: bottom;
    font-size: calc(100vw /9);
    font-weight: bolder;
} */

/* #resume {
    top: 45%;
    margin-left: 2%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
} */

/* #contact {
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#project {
    top: 45%;
    margin-right: 2%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#social {
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
} */

/* #instagram {
    position: absolute;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#facebook {
    position: absolute;
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

#github {
    width: 5em;
    text-align: center;
}

#youtube {
    width: 5em;
    position: absolute;
    text-align: center;
} */


/* Transformations */
/* .resume-preTransform {
    left: 50%;
    opacity: 0;
    -webkit-transition: left 1.2s, opacity .2s;
    transition: left 1.2s, opacity .2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}

.contact-preTransform {
    top: 50%;
    opacity: 0;
    -webkit-transition: top 1.2s, opacity .5s;
    transition: top 1.2s, opacity .5s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    -webkit-transition-delay: .6s;
    transition-delay: .6s;

}

.project-preTransform {
    right: 50%;
    opacity: 0;
    -webkit-transition: right 1.2s, opacity .2s;
    transition: right 1.2s, opacity .2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}

.social-preTransform {
    top: 50%;
    opacity: 0;
    -webkit-transition: top 1.2s, opacity .5s;
    transition: top 1.2s, opacity .5s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
} */


/* .resume-transform {
    opacity: 1;
    left: 0;
    -webkit-transition: left 1.2s, opacity 1.2s;
    transition: left 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
}

.contact-transform {
    top: calc(100vh / 9);
    opacity: 1;
    -webkit-transition: top 1.2s, opacity 1.2s;
    transition: top 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
}

.project-transform {
    right: 0;
    opacity: 1;
    -webkit-transition: right 1.2s, opacity 1.2s;
    transition: right 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
}

.social-transform {
    top: 75%;
    opacity: 1;
    -webkit-transition: top 1.2s, opacity 1.2s;
    transition: top 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.05);
} */



/* socials Transformations */
/* .instagram-preTransform {
    top: 300%;
    left: 0;
    opacity: 0;
    -webkit-transition: left 1.2s, opacity .5s;
    transition: left 1.2s, opacity .5s;
}

.facebook-preTransform {
    top: 300%;
    right: 0;
    opacity: 0;
    -webkit-transition: right 1.2s, opacity .5s;
    transition: right 1.2s, opacity .5s;
}

.youtube-preTransform {
    top: 0%;
    opacity: 0;
    -webkit-transition: top 1.2s, opacity .5s;
    transition: top 1.2s, opacity .5s;
}

.github-preTransform {
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
} */

/* .instagram-transform {
    top: 300%;
    left: -130%;
    opacity: 1;
    -webkit-transition: left 1.2s, opacity 1.2s;
    transition: left 1.2s, opacity 1.2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.facebook-transform {
    top: 300%;
    right: -130%;
    opacity: 1;
    -webkit-transition: right 1.2s, opacity 1.2s;
    transition: right 1.2s, opacity 1.2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.youtube-transform {
    top: 300%;
    opacity: 1;
    -webkit-transition: top 1.2s, opacity 1.2s;
    transition: top 1.2s, opacity 1.2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.github-transform {
    opacity: 1;
    -webkit-transition: opacity 1.2s;
    transition: opacity 1.2s;
} */


/* Fontawesome related */

/* .fa-github-square {
    position: absolute;
    opacity: 0;
    right: 50%;
    transform: translateX(50%);
    font-size: 4.2em;
}

.fa-instagram,
.fa-youtube,
.fa-facebook-square {
    position: absolute;
    opacity: 0;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    font-size: 4.2em;
}

div.socialContainer div:hover .fab,
div.socialContainer div:hover .fab::before {
    color: red;
    -webkit-transition: color .5s ease;
    transition: color 1s ease;
}

div.socialContainer div:hover i::after {
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(100% + 20px);
    z-index: -10;
    -ms-transform: translate(-10px, -10px);
    -webkit-transform: translate(-10px, -10px);
    transform: translate(-10px, -10px);
    border: 0px solid transparent;
    border-radius: 50%;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    color: #e69898;
}

div.socialContainer div:hover i.fa-instagram::after {
    content: "\f16d";
}

div.socialContainer div:hover i.fa-facebook-square::after {
    content: "\f082";
}

div.socialContainer div:hover i.fa-youtube::after {
    content: "\f167";
}

div.socialContainer div:hover i.fa-github-square::after {
    content: "\f092";
}

div.socialContainer div:hover .fab:hover,
div.socialContainer div:hover {
    color: rgb(255, 22, 22);
}

div.socialContainer div:hover {
    text-decoration-line: underline;
} */


/* Animations */

/* #name span.change {
    color: #ccadb8;
    animation: change-color 2s ease-out forwards;
    -webkit-animation: change-color 2s ease-out forwards;
}

@keyframes change-color {
    70% {
        color: rgb(24, 10, 10);
    }

    100% {
        color: #ff6262;
        opacity: .7;
    }
}

@-webkit-keyframes change-color {
    70% {
        color: rgb(77, 33, 33);
    }

    100% {
        color: #ff6262;
        opacity: .7;
    }
}


#name::after {
    content: '|';
    color: #7a3a51c4;
    position: relative;
    left: .1em;
    animation: blink-animation .7s steps(5, start) infinite;
    -webkit-animation: blink-animation .7s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

div#github:hover .fa-github-square {
    -webkit-animation: showinGit .25s linear 1 alternate forwards;
    animation: showinGit .25s linear 1 alternate forwards;
}

@keyframes showinGit {
    0% {
        opacity: 0;
        top: -200%;
    }

    25% {
        opacity: .15;
        top: -150%;
    }

    50% {
        opacity: .40;
        top: 0;
        right: 140%;
    }

    75% {
        opacity: .75;
        top: 90%;
    }

    100% {
        opacity: 1;
        top: 100%;
        right: 50%;
    }
}

@-webkit-keyframes showinGit {
    0% {
        opacity: 0;
        top: -200%;
    }

    25% {
        opacity: .15;
        top: -150%;
    }

    50% {
        opacity: .40;
        top: 0;
        right: 140%;
    }

    75% {
        opacity: .75;
        top: 90%;
    }

    100% {
        opacity: 1;
        top: 100%;
        right: 50%;
    }
}

div#facebook:hover .fa-facebook-square {
    -webkit-animation: showinfb .25s linear 1 alternate forwards;
    animation: showinfb .25s linear 1 alternate forwards;
}

@keyframes showinfb {
    0% {
        opacity: 0;
        bottom: -200%;
    }

    25% {
        opacity: .15;
        bottom: -150%;
    }

    50% {
        opacity: .40;
        bottom: 0;
        right: 140%;
    }

    75% {
        opacity: .75;
        bottom: 90%;
    }

    100% {
        opacity: 1;
        bottom: 100%;
        right: 50%;
    }
}

@-webkit-keyframes showinfb {
    0% {
        opacity: 0;
        bottom: -200%;
    }

    25% {
        opacity: .15;
        bottom: -150%;
    }

    50% {
        opacity: .40;
        bottom: 0;
        right: 140%;
    }

    75% {
        opacity: .75;
        bottom: 90%;
    }

    100% {
        opacity: 1;
        bottom: 100%;
        right: 50%;
    }
}


div#youtube:hover .fa-youtube,
div#instagram:hover .fa-instagram {
    -webkit-animation: showinIgYt .25s linear 1 alternate forwards;
    animation: showinIgYt .25s linear 1 alternate forwards;
}

@keyframes showinIgYt {
    0% {
        opacity: 0;
        bottom: -200%;
    }

    25% {
        opacity: .15;
        bottom: -150%;
    }

    50% {
        opacity: .40;
        bottom: 0;
        right: -40%;
    }

    75% {
        opacity: .75;
        bottom: 90%;
    }

    100% {
        opacity: 1;
        bottom: 100%;
        right: 50%;
    }
}

@-webkit-keyframes showinIgYt {
    0% {
        opacity: 0;
        bottom: -200%;
    }

    25% {
        opacity: .15;
        bottom: -150%;
    }

    50% {
        opacity: .40;
        bottom: 0;
        right: -40%;
    }

    75% {
        opacity: .75;
        bottom: 90%;
    }

    100% {
        opacity: 1;
        bottom: 100%;
        right: 50%;
    }
} */