@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

@keyframes circulo {
    from {
        clip-path: circle(0% at 50% 50%);
    }

    to {
        clip-path: circle(50.0% at 50% 50%);
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(196, 17, 17);
    }
}

@keyframes percent1 {
    0% {
        width: 85%
    }

    100% {
        width: 85%
    }
}

@keyframes percent2 {
    0% {
        width: 82%
    }

    100% {
        width: 82%
    }
}

@keyframes percent3 {
    0% {
        width: 80%
    }

    100% {
        width: 80%
    }
}

@keyframes percent4 {
    0% {
        width: 90%
    }

    100% {
        width: 90%
    }
}

@keyframes percent5 {
    0% {
        width: 60%
    }

    100% {
        width: 60%
    }
}

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

html {
    scroll-behavior: smooth
}

body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Source Code Pro';
}

main {
    width: 100%;
    height: 100%;
}

.hero-container {
    margin-top: 3%;
    display: flex;
    width: 100%;
    height: 100%;
}

.hero-bg {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -4;
    position: fixed;
}

.hero-img {
    height: auto;
    width: 37%;
    margin-top: 5%;
    filter: drop-shadow(1px 1px 4px black);
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.sections {
    margin-left: 2%;
    display: grid;
    margin-top: 8%;
    width: 20%;
    user-select:none;
}

.s1,
.s4 {
    transition: width 0.5s;
    width: 20%;
}

.s2 {
    transition: width 0.5s;
    width: 25%;
}

.s3 {
    transition: width 0.5s;
    width: 18%;
}

.s1:hover,
.s4:hover {
    width: 20.5%;
    filter: drop-shadow(1px 1px 3px #000000);
}

.s2:hover {
    width: 25.5%;
    filter: drop-shadow(1px 1px 3px #000000);
}

.s3:hover {
    width: 18.5%;
    filter: drop-shadow(1px 1px 3px #000000);
}

.s1 {
    margin-left: 75%;
}

.s2 {
    margin-left: 50%;
}

.s3 {
    margin-left: 50%;
}

.s4 {
    margin-left: 75%;
}

.info {
    margin-left: 2%;
    margin-top: 8%;
}

.hello {
    font-size: 1.3vw;
}

.line {
    color: gray;
    font-size: 1.3vw;
}

.info h1 {
    font-size: 2vw;
    margin-top: 15%;
    overflow: hidden;
    border-right: .15em solid rgb(201, 14, 14);
    white-space: nowrap;
    letter-spacing: .15em;
    background-color: rgba(255, 0, 0, 0.144);
    animation:
        typing 2.5s steps(60, end),
        blink-caret .75s step-end infinite;
}

.presentation {
    font-size: 1vw;
    font-weight: 800;
    margin-top: 10%;
    color: #201e1e;
}

.presentation:after {
    margin: 2%;
    display: block;
    content: '';
    border-bottom: solid 3px #dd0e0ebd;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

.presentation:hover:after {
    transform: scaleX(1);
}

.presentation:after {
    transform-origin: 0% 50%;
}

.location {
    font-size: 1vw;
    margin-top: 20%;
}

.socials {
    position: absolute;
    display: flex;
    width: 10%;
    margin-top: 3%;
    margin-left: -1%;
}

.socials img {
    opacity: 0.7;
    width: 55%;
    height: auto;
    transition: opacity 1s;
}

.socials img:hover {
    opacity: 1;
    height: auto;
    filter: drop-shadow(1px 1px 3px #ff00008e);
}

.socials img:last-child {
    margin-left: 20%;
}

#skills {
    width: 100%;
    margin-top: 12%;
    padding-bottom: 10%;
}

#skills h1 {
    padding: 1%;
    text-align: center;
    font-size: 2vw;
    margin-top: 1%;
    margin-left: 43%;
    margin-right: 43%;
    display: block;
    content: '';
    border-bottom: solid 3px #df0000;
}

.bars {
    display: flex;
    width: 70%;
    margin-left: 16%;
    margin-top: 5%;
}

.firstblock {
    width: 30%;
}

.firstblock p {
    font-size: 1.2vw;
    margin-top: 15%;
}

.bar {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.342);
    filter: drop-shadow(0px 0px 3px black);
}

.firstbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent1 1s infinite alternate;
}

.secondbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent2 1s infinite alternate;
}

.thirdbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent3 1s infinite alternate;
}

.secondblock {
    width: 30%;
    margin-left: 38%;
}

.secondblock p {
    margin-top: 15%;
    font-size: 1.2vw;
}

.fourthbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent1 1s infinite alternate;
}

.fifthbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent4 1s infinite alternate;
}

.sixthbarinside {
    background-color: #c40000;
    height: 25px;
    width: 85%;
    animation: percent5 1s infinite alternate;
}

#formation {
    width: 100%;
    margin-top: 5%;
}

#formation h1 {
    padding: 1%;
    text-align: center;
    font-size: 2vw;
    margin-top: 1%;
    margin-left: 43%;
    margin-right: 43%;
    display: block;
    content: '';
    border-bottom: solid 3px #df0000;
}

.formation-container {
    margin-top: 7%;
    width: 80%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

.formation-block {
    color: white;
    width: 45%;
    display: flex;
    height: 15%;
    background-color: #ff000080;
    filter: drop-shadow(1px 1px 3px black);
    transition: 1s !important;

}

.formation-block img {
    transition: 1s !important;
    filter: grayscale(100%);
    width: 40%;
    height: 20%;
}

.formation-block:hover {
    transition: 2s !important;
    background-color: #b10000;
}

.formation-block:hover img {
    transition: 2s !important;
    filter: grayscale(0%);
}

.formation-2nd {
    margin-left: 10%;
}

.formation-3rd {
    margin-top: 6%;
    margin-left: 25%;
    width: 50%;
    transition: 2s;
}

.formation-3rd img {
    overflow: hidden;
    width: 35%;
    height: 20%;
}

.formation-block div {
    width: auto;
}

.formation-block p {
    margin: 8%;
    font-size: 1vw;
}

.formation-3rd p {
    margin: 7%;
}

.titulation {
    font-weight: 800;
    font-size: 1.15vw;
}

#experience {
    width: 100%;
    margin-top: 10%;
}

.experience-title {
    padding: 1%;
    text-align: center;
    font-size: 2vw;
    margin-top: 1%;
    margin-left: 43%;
    margin-right: 43%;
    display: block;
    content: '';
    border-bottom: solid 3px #df0000;
}

.job {
    margin-top: 6%;
    width: 100%;
    margin-left: 4%;
    font-size: 1vw;
    transition: 2s;
}

.job-title {
    font-weight: 800;
    font-size: 1.15vw;
    margin-top: 2%;
    padding-bottom: 5%;
    color: white;
}

.job-info {
    color: white;
}

.bucket {
    position: absolute;
    width: 7%;
    margin-left: 20%;
    margin-top: 14%;
}

.wave {
    margin-top: 5%;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
}

.clouds {
    margin-top: 20%;
    position: absolute;
    z-index: -2;
    width: 100%;
    height: auto;
}

.experience-block {
    display: flex;
    width: 100%;
    margin-top: 10%;
    padding-bottom: 2%;
}

.experience-block img {
    width: 45%;
    border-radius: 20px;
    filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.527)) grayscale(100%);
    margin-left: 15%;
    transition: 2s !important;
}

.experience-block img:hover {
    filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.527)) grayscale(0%);
    transition: 2s !important;
}

.experience-block2 {
    display: flex;
    width: 100%;
    margin-top: 20%;
}

#proxya-info {
    margin-top: 6%;
}

.experience-block2 img {
    width: 45%;
    border-radius: 20px;
    filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.527)) grayscale(100%);
    margin-left: 15%;
    transition: 2s !important;
}

.experience-block2 img:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.527)) grayscale(0%);
    transition: 2s !important;
}

.experience-block2 ul p {
    color: white;
}

.experience-block2 li {
    color: white;
}

.scientia-info {
    position: absolute;
    margin-left: 60%;
    margin-right: 10%;
    margin-top: 3%;
}

.scientia-info h1 {
    margin-left: 15%;
    font-size: 1.4vw;
    margin-top: 10%;
    line-height: 50px;
}

.scientia-info span {
    font-size: 1.75vw;
    color: rgb(221, 221, 221);
}

ul {
    margin-left: 12%;
    list-style: square;
    font-size: 0.8vw;
}

.button-arounder1 {
    margin-left: 15%;
    margin-top: 5%;
    height: 30px;
    width: 22%;
}

.button-arounder2 {
    margin-left: 15%;
    margin-top: 5%;
    height: 30px;
    width: 40%;
}

.celebrating {
    z-index: -3;
    position: absolute;
    margin-top: -12%;
    height: 100%;
    width: 100%;
}

#contact {
    margin-top: 10%;
    color: white;
}

#contact h1 {
    margin-left: 32%;
    margin-top: 15%;
    font-size: 2vw;
}

.contact-container {
    margin-top: 5%;
    width: 50%;
    margin-left: 34.5%;
    font-size: 1vw;
    display: flex;
    user-select:none;
}

.contact-container a {
    width: 8%;
    margin: 4%;
}

.contact-linkedin {
    width: 100%;
    transition: 0.5s;
}

.contact-linkedin:hover {
    filter: drop-shadow(1px 1px 3px #ff0000b7);
    transition: 0.5s;
}

.contact-email {
    width: 100%;
    transition: 0.5s;
}

.contact-email:hover {
    filter: drop-shadow(1px 1px 3px #ff0000b7);
    transition: 0.5s;
}

.contact-github {
    width: 100%;
    transition: 0.5s;
}

.contact-github:hover {
    filter: drop-shadow(1px 1px 5px #ff0000b7);
    transition: 0.5s;
}

.contact-cv {
    width: 100%;
    transition: 0.5s;
}

.contact-cv:hover {
    filter: drop-shadow(1px 1px 5px #ff0000b7);
    transition: 0.5s;
}

.cv {
    font-size: 1.5vw;
}

.responsive-space {
    display: none;
}

/* Experience buttons styles */
.button-arounder1 {

    background: hsl(0, 0%, 0%);
    color: hsl(190deg, 10%, 95%);

    box-shadow: 0 0px 0px hsla(190deg, 15%, 5%, .2);
    transform: translateY(0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    --dur: .15s;
    --delay: .15s;
    --radius: 16px;

    transition:
        border-top-left-radius var(--dur) var(--delay) ease-out,
        border-top-right-radius var(--dur) calc(var(--delay) * 2) ease-out,
        border-bottom-right-radius var(--dur) calc(var(--delay) * 3) ease-out,
        border-bottom-left-radius var(--dur) calc(var(--delay) * 4) ease-out,
        box-shadow calc(var(--dur) * 4) ease-out,
        transform calc(var(--dur) * 4) ease-out,
        background calc(var(--dur) * 4) steps(4, jump-end);
}

.button-arounder1:hover,
.button-arounder1:focus {
    box-shadow: 0 4px 8px hsla(190deg, 15%, 5%, .2);
    transform: translateY(-4px);
    background: hsl(0, 100%, 40%);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.button-arounder2 {

    background: hsl(0, 0%, 0%);
    color: hsl(190deg, 10%, 95%);

    box-shadow: 0 0px 0px hsla(190deg, 15%, 5%, .2);
    transform: translateY(0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    --dur: .15s;
    --delay: .15s;
    --radius: 16px;

    transition:
        border-top-left-radius var(--dur) var(--delay) ease-out,
        border-top-right-radius var(--dur) calc(var(--delay) * 2) ease-out,
        border-bottom-right-radius var(--dur) calc(var(--delay) * 3) ease-out,
        border-bottom-left-radius var(--dur) calc(var(--delay) * 4) ease-out,
        box-shadow calc(var(--dur) * 4) ease-out,
        transform calc(var(--dur) * 4) ease-out,
        background calc(var(--dur) * 4) steps(4, jump-end);
}

.button-arounder2:hover,
.button-arounder2:focus {
    box-shadow: 0 4px 8px hsla(190deg, 15%, 5%, .2);
    transform: translateY(-4px);
    background: hsl(0, 100%, 40%);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

@media (max-width: 800px) {
    .not-at-responsive {
        display: none;
    }

    .hero-container {
        margin-top: 13%;
    }

    .hero-bg {
        height: 100%;
        top: 0;
    }

    .sections {
        display: none;
    }

    .hero-img {
        margin-left: 3%;
        width: 47%;
    }

    .info {
        margin-top: 5%;
    }

    .info h1 {
        font-size: 2.8vw;
    }

    .line {
        font-size: 2.5vw;
    }

    .hello {
        font-size: 2.5vw;
    }

    .presentation {
        margin-top: 12%;
        font-size: 2vw;
    }

    .responsive-space {
        display: block;
    }

    .location {
        margin-top: 10%;
        font-size: 1.7vw;
    }

    .socials img {
        width: 70%;
    }

    .socials img:last-child {
        margin-left: 30%;
    }

    #skills {
        margin-top: 20%;
    }

    #skills h1 {
        font-size: 3vw;
        margin-left: 38%;
        margin-right: 38%;
    }

    .bars {
        margin-top: 15%;
    }

    .bars p {
        font-size: 2.4vw;
        margin-top: 19%;
    }

    .bar {
        height: 15px;
    }

    .firstbarinside {
        height: 15px;
    }

    .secondbarinside {
        height: 15px;
    }

    .thirdbarinside {
        height: 15px;
    }

    .fourthbarinside {
        height: 15px;
    }

    .fifthbarinside {
        height: 15px;
    }

    .sixthbarinside {
        height: 15px;
    }

    #formation {
        margin-top: 15%;
    }

    #formation h1 {
        font-size: 3vw;
        margin-left: 38%;
        margin-right: 38%;
    }

    .formation-container {
        width: 70%;
        margin-top: 15%;
        margin-left: 15%;
        display: block;
    }

    .formation-block {
        width: 100%;
    }

    .formation-block:last-child {
        margin-top: 10%;
    }

    .formation-2nd {
        margin-left: 0%;
    }

    .formation-3rd {
        width: 70%;
        margin-left: 15%;
    }

    .formation-3rd img {
        width: 74%;
    }

    .titulation {
        font-size: 1vw;
    }

    .formation-block p {
        font-size: 2vw;
    }

    #experience {
        margin-top: 15%;
    }

    #experience h1 {
        font-size: 3vw;
        margin-left: 38%;
        margin-right: 38%;
    }

    .job-title {
        font-size: 2.5vw;
    }

    .job-info p {
        font-size: 2vw;
    }

    .experience-block {
        margin-top: 30%
    }

    .experience-block2 {
        margin-top: 50%
    }

    .wave {
        margin-top: 28%;
    }

    .clouds {
        margin-top: 54%
    }

    .bucket {
        width: 13%;
        margin-top: 19%;
    }

    .experience-block img {
        margin-left: 10%;
        width: 50%;
    }

    .experience-block2 img {
        margin-left: 10%;
        width: 50%;
    }

    .scientia-info {
        margin-left: 50%;
        margin-top: 3%;
    }

    .scientia-info h1 {
        line-height: 120%;
        font-size: 1.8vw;
    }

    .scientia-info span {
        font-size: 3vw;
    }

    ul {
        display: none;
    }

    .button-arounder1 {
        margin-top: 0%;
        margin-left: 35%;
        font-size: 2vw;
        height: 25px;
        width: 50%;
    }
    .button-arounder2 {
        margin-top: 0%;
        margin-left: 35%;
        font-size: 2vw;
        height: 25px;
        width: 50%;
    }

    .celebrating {
        margin-top: -64%;
        height: 90%;
    }

    #contact {
        margin-top: 40%
    }

    #contact h1 {
        font-size: 3vw;
        margin-left: 22%;
    }

    .contact-container {
        width: 70%;
        margin-left: 27%;
    }

}