/* Fonts */
@font-face {
    font-family: "cond-big";
    src: url(../fonts/cond_sharp_bold.ttf);
}

@font-face {
    font-family: "cond-small";
    src: url(../fonts/cond4.ttf);
}

/* HTML Elements */
body {
    background-color: black;
    width: 99.1015625vw; /* 2537px */
    height: 100%;
    margin: 0;
    padding: 0;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: white;
    font-family: "cond-big";
}

a:hover {
    color: rgb(98, 98, 255)
}

h1 {
    font-size: 1.5625vw; /* 40px */
    font-family: 'cond-small';
    color: white;
}
h2 {
   font-size: 1.2625vw; 
}
h3 {
    font-size: 0.390625vw; /* 10px */
    font-family: 'cond-small';
    color: white;
}

p {
    font-size: 0.78125vw; /* 20px */
    font-family: 'cond-small';
    color: white;
    text-align: left;
    opacity: 0; /* Default position for sliding */
    transition: opacity 0.1s ease, transform 0.1s ease;
}
/* Paragraph animations */
.p-left {
    animation: none;
    transform: translateX(3.90625vw); /* 100px */
  }
  
  .p-right {
    animation: none;
    transform: translateX(3.90625vw); /* 100px */
  }
  
  .p-mid {
    animation: none;
    transform: translateX(3.90625vw); /* 100px */
  }
  
  /* Animations for entering */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-3.90625vw); /* 100px */
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(3.90625vw); /* 100px */
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInMiddle {
    from {
      opacity: 0;
      transform: translateX(0);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Animations for exiting */
  @keyframes slideOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-3.90625vw); /* 100px */
    }
  }
  
  @keyframes slideOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(3.90625vw); /* 100px */
    }
  }
  
  @keyframes slideOutMiddle {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(0);
    }
  }

/* Heading anim */
.h1-anim {
    opacity: 0;
    transform: translateY(-0.78125vw); /* 20px */
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }
  
  /* Visible state */
  .h1-anim.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Hidden state when out of view */
  .h1-anim.hidden {
    opacity: 0;
    transform: translateY(-1.953125vw); /* 50px */
  }

/* Website */
#wrapper {
    position: relative;
    overflow: hidden;
    max-width: 100%;

}
/* BACKGROUND */
#background {
    z-index: 0;
    background-size: 50%;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 150%;
}
.bg-block-type-1 {
    position: absolute;
    border: 0.1953125vw white solid; /* 5px */
    animation: bg-block-type-1 4s ease-in-out infinite;
    bottom: 0;
}
@keyframes bg-block-type-1 {
    0% {opacity: 0}
    30% {opacity: 1}
    70% {opacity: 1}
    100% {opacity: 0}
}

/* Circles */
  .bubble {
    position: absolute;
    width: 0.78125vw; /* 20px */
    height: 0.78125vw; /* 20px */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: 0.0390625vw solid white; /* 1px */
    opacity: 0.3;
    /*animation: float 5s ease-in infinite; old bubble anim*/
    animation:bubbleMoveUp 15s linear forwards, bubbleFader 1s forwards;
    z-index: 100;
  }


  @keyframes bubbleMoveUp {
    from {
      bottom: 0;
    }
    to {
      bottom: 15.625vw; /* Move the bubble 23.4375vw up */ /* 400px */ /* 600px */
    }
  }

  @keyframes bubbleFader {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0.2;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
    }
  }

/* NAVIGATION */
#nav-bar {
    z-index: 100;
    position: fixed;
    top: 1.5625vw; /* 40px */
    left: 0;
    width: 100%;
    color: white;
    padding: 0.390625vw 0; /* 10px */
    transition: top 0.3s;
}
#nav-bar ul {
    padding-left: 0;
    width: 21.484375vw; /* 550px */
    height: 1.5625vw; /* 40px */
    list-style-type: none;
    margin: 0 auto;
    margin-left: 40.234375vw; /* 1030px */
    text-align: center;
    transition: 0.3s;

}

.nav-scrolled > ul {
    border-radius: 0.390625vw; /* Adjust as needed */ /* 10px */
  box-shadow: 0.0vw 0.1953125vw 10.0vw rgba(0, 0, 0, 0.3); /* 0px */ /* 5px */ /* 10px */
    position: relative;
    width: 12.5vw; /* 320px */
    height: 1.5625vw; /* 40px */
    opacity: 0.9;
    background: linear-gradient(to top left, #33333317, #99999921);
    list-style-type: none;
    margin: 0 auto;
    margin-left: 70.3125vw !important; /* 1800px */
    padding-top: 0.78125vw !important; /* 20px */
    padding-left: 0;
    text-align: center;
    transform: rotateX(0deg) rotateY(24deg) rotateZ(3deg);
}
#nav-bar ul li {
    position: relative;
    display: inline;
    margin-right: 0.78125vw; /* 20px */
}

#nav-bar ul li:last-child {
    margin-right: 0;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-size: 0.6250vw;
}

.nav-anchor {
    height: 100vh;
    /* Adjust as needed */
    margin-top: 1.953125vw; /* 50px */
    /* Height of the fixed navigation bar */
}
.active {
    position: relative;
}
.active > a {
    color: green !important;
    border-bottom: 0.1171875vw solid green; /* 3px */
}


#active-header {
    top: 3.90625vw; /* 100px */
    left: -7.8125vw; /* 200px */
    opacity: 0.2;
    position: fixed;
    transform: rotate(-45deg);
    width: 46.875vw; /* 1200px */
}

#active-header-curtain {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.752));
}

#active-header>h1 {
    text-align: center;
    font-size: 7.8125vw; /* 200px */
}

/* Landing */
#landing {
    text-align: center;
    padding: 16.796875vw; /* 430px */
    height: 100%;
}

#landing-header {
    height: 1.953125vw; /* 50px */
}

.landing-header-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#landing-subheader {
    margin-top: 0.0vw; /* 0px */
    font-size: 2.734375vw; /* 70px */
    font-family: 'cond-big';
    color: white;
}

.landing-subheader-twitch {
    animation: twitch 3.1s ease-in-out;
    /* MATCH SECONDS WITH setInterval(changeWelcomeText, 3000) */
}

@keyframes twitch {
    0% {
        letter-spacing: 1.5625vw; /* 40px */
    }

    10% {

        letter-spacing: 0;
    }

    90% {
        letter-spacing: 0;
    }

    100% {
        letter-spacing: 1.5625vw /* 40px */
    }
}

/* About */
#about {
    position: relative;
    text-align: center;
    padding: 8.984375vw 3.90625vw; /* 230px */ /* 100px */
    height: 100%;  
}
#about-container {
    height: 58.59375vw; /* 1500px */
    position: relative;
}
.about-container-card {
    width: 23.4375vw; /* 600px */
    height: 15.625vw; /* 400px */
    position: absolute;
}
.about-container-card:nth-child(1) {
    top: 3.90625vw; /* 100px */
    left: 15.625vw; /* 400px */
    animation: float 24s linear infinite;
}
.about-container-card:nth-child(2) {
    top: 7.8125vw; /* 200px */
    right: 13.671875vw; /* 350px */
    animation: float 22s linear infinite reverse;
}
.about-container-card:nth-child(2)>p {
    text-align: right;
}
.about-container-card:nth-child(3) {
    top: 23.4375vw; /* 600px */
    left: 13.671875vw; /* 350px */
    animation: float 21s linear infinite reverse;
}
.about-container-card:nth-child(4) {
    top: 31.25vw; /* 800px */
    right: 15.625vw; /* 400px */
    animation: float 23s linear infinite;
}
.about-container-card:nth-child(4)>p {
    text-align: right;
}

@keyframes float {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(0.5859375vw, -0.5859375vw); /* Move slightly to the right and up */ /* 0.5859375vw */ /* 15px */
    }
    50% {
      transform: translate(0, -1.171875vw); /* Move upwards */ /* 30px */
    }
    75% {
      transform: translate(-0.5859375vw, -0.5859375vw); /* Move slightly to the left and up */ /* 0.5859375vw */ /* 15px */
    }
    100% {
      transform: translate(0, 0); /* Return to the starting position */
    }
  }
  

/* Work */
#work {
    position: relative;
    text-align: center;
    padding: 8.984375vw 3.90625vw; /* 230px */ /* 100px */
    height: 100%;
}




#work-container {
    text-align: center;
    width: 54.6875vw; /* 1400px */
    margin: 7.8125vw auto; /* 200px */
}

.work-container-card {
    overflow: hidden;
    margin: 0.390625vw; /* 10px */
    display: inline-block;
    position: relative;
    padding: 0.78125vw 0.390625vw; /* 20px */ /* 10px */
    width: 15.625vw; /* 400px */
    height: 5.859375vw; /* 150px */
    border: 0.0390625vw solid rgba(255, 255, 255, 0.8); /* 1px */
    border-radius: 0.78125vw; /* 20px */
    background: linear-gradient(to top left, #33333381, #99999975);
    cursor: pointer;
    transition: 0.3s ease-in-out;
    transform: rotateY(90deg); /* Initial state, offscreen */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth flip transition */
    opacity: 0;
}
.work-container-card.in-view {
    transform: rotateY(0deg); /* When in view, flip to normal */
    opacity: 1;
  }
  
  .work-container {
    display: flex;
    overflow-x: auto; /* Allows horizontal scrolling */
  }
.work-container-card:hover {
    transform: scale(1.02);
}

.work-container-card-blob {
    position: absolute;
    width: 14.453125vw; /* 370px */
    height: 14.453125vw; /* 370px */
    opacity: 0;
    left: -9.765625vw; /* 250px */
    background: radial-gradient(circle, white 20%, transparent 70%);
    transition: 0.5s;
}

.work-container-card:hover>.work-container-card-blob {
    opacity: 0.1;
}

.work-container-card-img {
    vertical-align: top;
    display: inline-block;
    margin-top: 0.78125vw; /* 20px */
    opacity: 0.8;
    width: 3.90625vw; /* 100px */
    height: 3.90625vw; /* 100px */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.work-container-card-txt {
    vertical-align: top;
    width: 10.546875vw; /* 270px */
    display: inline-block;
}

.work-container-card-txt>h1 {
    padding-top: 0.78125vw; /* 20px */
    font-size: 0.546875vw; /* 14px */
}

.work-container-card-txt>h2 {
    margin-top: -0.2734375vw; /* 7px */
    font-family: 'cond-small';
    font-size: 0.546875vw; /* 14px */
    color: black;
}
.work-container-card > .work-container-card-txt > p {
    opacity: 0;
    transition: 0.1s;
}
.work-container-card-expanded {
    padding: 0.78125vw; /* 20px */
    width: 27.34375vw; /* 700px */
    height: 17.578125vw; /* 450px */
    text-align: left;
}
.work-container-card-expanded > .work-container-card-txt {
    margin-left: 1.171875vw; /* 30px */
    width: 19.53125vw; /* 500px */
}
.work-container-card-expanded > .work-container-card-txt > p {
    opacity: 1;
    transition: 0.3s;
    transition-delay: 0.6s;
    font-family: 'cond-small';
    font-size: 0.546875vw; /* 14px */
    font-weight: 200;
    line-height: 1.2890625vw; /* 33px */
    color: rgb(255, 255, 255);
}
/* CV */
.cv {
    border: 0.15625vw solid gray; /* 4px */
    width: 11.71875vw; /* 300px */
    height: 11.71875vw; /* 300px */
    border-radius: 50%;
    margin: 15.625vw auto; /* 400px */
    background-image: url('../img/ico/cv.svg');
    background-size: contain;
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0.8;

    transition: 0.3s ease-in-out;
}
.cv:hover > .cv-background {
    opacity: 1;
    transform: translateY(0.0vw) /* 0px */
}
.cv-background {
    opacity: 0;
    background-image: url('../img/ico/arrow.svg');
    background-size: contain;
    background-position: center;
    background-color: black;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transform: translateY(-0.78125vw); /* 20px */
    transition: 0.3s ease-in-out;
}
.cv:hover {
    border-color: white;
    opacity: 1;
    cursor: pointer;
}
@keyframes cv-blink {
    0%,50% {opacity: 0; transform: translateY(-0.78125vw)} /* 20px */
    60%,90% {opacity: 1; transform: translateY(0.0vw)} /* 0px */
    100% {opacity: 0; transform: translateY(0.0vw)} /* 0px */
}


/* Awards */
#awards {
    position: relative;
    text-align: center;
    height: 100%;
    background-size: 101.5625vw; /* 2600px */
    background-repeat: no-repeat;
    background-position-x: 54.6875vw; /* 1400px */
}

#awards-overlay {
    z-index: 1;
    width: 50%;
    right: 0;
    height: 100%;
    position: absolute;
    transition: 1.5s ease;
    background: radial-gradient(circle at center right, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 1) 40%);
}

#certifications {
    padding-top: 3.90625vw; /* 100px */
    position: relative;
    z-index: 2;
}

#certifications-txt {
    vertical-align: top;
    margin: 1.953125vw 3.90625vw; /* 50px */ /* 100px */
    display: inline-block;
    width: 15.625vw; /* 400px */
}

#certifications-txt>p {
    text-align: justify;
}

#certifications-container {
    width: 62.5vw; /* 1600px */
    display: inline-block;
}
.certifications-container-holder {
    position: relative;
    width: 17.96875vw; /* 460px */
    height: 7.03125vw; /* 180px */
    display: inline-block;
    vertical-align: top;
    opacity: 0;
    transform: translateX(-3.90625vw); /* Start off-screen to the left */ /* 100px */
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.certifications-container-holder.show {
    opacity: 1 !important;
    transform: translateX(0) !important; /* Slide in */
  }

.certifications-container-card {
    vertical-align: top;
    overflow: hidden;
    margin: 0.78125vw; /* 20px */
    padding: 0.78125vw; /* 20px */
    text-align: left;
    border-width: 0.0390625vw; /* 1px */
    border-style: solid;
    border-color: transparent transparent white white;
    border-radius: 0.390625vw; /* 10px */
    width: 14.0625vw; /* 360px */
    height: 3.125vw; /* 80px */
    transition: 0.3s ease-in-out;
}

.cert-awards {
    background: radial-gradient(circle at left bottom, gold 0%, transparent 5%);
}

.cert-course {
    background: radial-gradient(circle at left bottom, green 0%, transparent 10%);
}

.certifications-container-card:hover {
    height: 5.46875vw; /* 140px */
}

.certifications-container-card-img {
    vertical-align: top;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: calc(8.203125vw * 0.4); /* 210px */
    width: calc(11.6015625vw * 0.4); /* 297px */
}

.certifications-container-card-txt {
    width: 7.8125vw; /* 200px */
    margin-left: 0.78125vw; /* 20px */
    vertical-align: top;
    display: inline-block;
}

.certifications-container-card-txt>h1 {
    font-size: 0.546875vw; /* 14px */
}

.certifications-container-card-txt>h2 {
    margin-top: -0.2734375vw; /* 7px */
    font-family: 'cond-small';
    font-size: 0.546875vw; /* 14px */
    color: gray;
}

.certifications-container-card>p {
    opacity: 0;
    transition: 0.3s;
    font-family: 'cond-small';
    font-size: 0.546875vw; /* 14px */
    font-weight: 700;
    color: rgb(255, 255, 255);
    margin-top: -0.390625vw; /* 10px */
}

.certifications-container-card>p>span {
    color: gray;
}

.certifications-container-card:hover>p {
    opacity: 1;
}

.certifications-container-card>p:first-of-type {
    margin-top: 0.390625vw; /* 10px */
}

/* Portfolio */
#portfolio {
    text-align: center;
    position: relative;
    text-align: center;
    padding: 8.984375vw 3.90625vw; /* 230px */ /* 100px */
    height: 100%;
}

.portfolio-web-card {
    margin: 0.78125vw; /* 20px */
    position: relative;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
    display: inline-block;
    width: 70.3125vw; /* 1800px */
    transition: 0.3s ease-in-out;
    height: 23.4375vw; /* 600px */
    overflow: hidden;
    animation: slide 60s linear infinite;
    background: linear-gradient(to top left, rgba(68, 68, 68, 0.185), #99999923);
    animation: portfolio-web-card 5s ease-in infinite;
}

.portfolio-web-card:nth-child(3),
.portfolio-web-card:nth-child(5) {
    clip-path: polygon(3% 0, 100% 0, 95% 100%, 0 100%);
    animation: portfolio-web-card-2nd 5s ease-in infinite;
}

@keyframes portfolio-web-card {
    0% {
        clip-path: polygon(0 2%, 95% 0, 97% 100%, 5% 100%);
    }

    50% {
        clip-path: polygon(0 0, 94% 2%, 100% 100%, 3% 97%)
    }

    100% {
        clip-path: polygon(0 2%, 95% 0, 97% 100%, 5% 100%)
    }
}

@keyframes portfolio-web-card-2nd {
    0% {
        clip-path: polygon(2% 0, 98% 0, 95% 100%, 0 100%);
    }

    50% {
        clip-path: polygon(0 0, 99% 0, 100% 100%, 2% 100%);
    }

    100% {
        clip-path: polygon(2% 0, 98% 0, 95% 100%, 0 100%);
    }
}

.circular-div {
    position: absolute;
    z-index: 5;
    width: 0.1953125vw; /* 5px */
    /* Diameter of the circular div */
    height: 0.1953125vw; /* 5px */
    /* Diameter of the circular div */
    border-radius: 50%;
    background-color: white;
    opacity: 1;
    animation: circular-div 3s ease-in-out;
}

@keyframes circular-div {
    0% {
        bottom: -3.90625vw; /* 100px */
        opacity: 1
    }

    100% {
        bottom: 31.25vw; /* 800px */
        opacity: 0
    }
}

.portfolio-web-card-txt {
    vertical-align: top;
    width: 42.96875vw; /* 1100px */
    display: inline-block;
    text-align: left;
}


.portfolio-web-card-txt>h3 {
    margin-top: 9.765625vw; /* 250px */
    margin-left: 1.953125vw; /* 50px */
}
.portfolio-web-card-txt>p {
    width: 39.0625vw; /* 1000px */
    height: 3.90625vw; /* 100px */
}

.portfolio-web-card-txt-img {
    background-image: url('../img/ico/rosic.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 3.90625vw; /* 100px */
    height: 1.953125vw; /* 50px */
    margin-top: -0.5859375vw; /* 15px */
    margin-left: 1.953125vw; /* 50px */
}

.portfolio-web-card-sites {
    position: relative;
    width: 23.4375vw; /* 600px */
    display: inline-block;
}

.portfolio-web-card-sites-mobile {
    position: absolute;
    top: 6.640625vw; /* 170px */
    left: -3.90625vw; /* 100px */
    z-index: 4;
    background-image: url('../img/images/web-device.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 3.515625vw; /* 90px */
    width: 11.71875vw; /* 300px */
    height: 11.71875vw; /* 300px */
    pointer-events: none;
}
.web-ph-site {
    z-index: 3;
    top: 10.625vw; /* 272px */
    left: -1.3671875vw; /* 35px */
    position: absolute;
    width: 5.3125vw; /* 136px */
    height: 10.9375vw; /* 280px */
}
.portfolio-web-card-sites-monitor {
    position: relative;
    z-index: 2;
    background-image: url('../img/images/web-monitor.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 3.515625vw; /* 90px */
    width: 23.4375vw; /* 600px */
    height: 15.625vw; /* 400px */
    pointer-events: none;
}

.web-mon-site {
    z-index: 1;
    top: -3.90625vw; /* 100px */
    left: -10.7421875vw; /* 275px */
    position: absolute;
    width: 44.921875vw; /* 1150px */
    height: 27.34375vw; /* 700px */
    transform: scale(0.4);
}

/* Hobbies */
#hobbies {
    text-align: center;
    position: relative;
    text-align: center;
    padding: 8.984375vw 3.90625vw; /* 230px */ /* 100px */
    height: 100%;
}
#hobbies-container {
    margin-top: -5.859375vw; /* 150px */
}
.hobbies-container-card {
    vertical-align: top;
    display: inline-block;
    width: 31.25vw; /* 800px */
    margin: auto 1.953125vw; /* 50px */
    text-align: right;
}
.hobbies-container-card > iframe {
    margin-top: 1.953125vw; /* 50px */
}
.hobbies-container-card-divider {
    opacity: 0;
    margin: 1.171875vw auto; /* 30px */
    margin-bottom: 1.171875vw; /* 30px */
    width: 0%;
    height:0.1171875vw; /* 3px */
    transition: 0.3s ease-in-out 0.3s;
    background: #808080;
    background: radial-gradient(circle,rgba(128, 128, 128, 1) 33%, rgba(148, 187, 233, 0) 100%);
}
.hobbies-container-card-divider.expand {
    opacity: 1;
    width: 50%;
}
.hobbies-container-card > h2 {
    color: white;
    width: 17.578125vw; /* 450px */
    margin: 0.390625vw auto; /* 10px */
    opacity: 0.6;
    font-weight: 100;
    font-style: italic;
    font-size: 0.703125vw; /* 18px */
    text-align: center;
    font-family: 'cond-small';
    color: white;
    position: relative;
    animation: hobbies-float 10s ease-in-out infinite,
                hobbies-blink 3s ease-in-out  infinite;
}
@keyframes hobbies-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3125vw); /* 8px */
  }
  100% {
    transform: translateY(0);
  }
}

/* Blinking */
@keyframes hobbies-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
.hobbies-container-card > a {
    margin-top: 3.90625vw; /* 100px */
    font-size: 0.703125vw; /* 18px */
    padding: 0.390625vw; /* 10px */
    background: #833AB4;
    transition: 0.3s ease-in-out;
    border-bottom-left-radius: 0.9765625vw; /* 25px */
    border-bottom-right-radius: 0.9765625vw; /* 25px */

}
.hobbies-container-card > a:hover {
    padding-bottom: 0.5859375vw; /* 15px */
    color: white;
}
.hobbies-container-card-bottom {
    width: 100%;
    height:0.1953125vw; /* 5px */
    background: #808080;
    background: radial-gradient(circle,rgba(128, 128, 128, 1) 0%, rgba(148, 187, 233, 0) 100%);
}
/* Contact */

#contacts {
    text-align: center;
    position: relative;
    text-align: center;
    padding: 8.984375vw 3.90625vw; /* 230px */ /* 100px */
    height: 100%;
}
#contact-container-form {
    margin: auto;
    width: 58.59375vw; /* 1500px */
    position: relative;
}
.contact-container-form-card {
    position: relative;
    padding-top: 0.78125vw; /* 20px */
    display: inline-block;
    background-color: transparent;
    vertical-align: top;
    border-radius: 1.5625vw; /* 40px */
    margin: 0.5859375vw; /* 15px */
    height: 23.4375vw; /* 600px */
    transform: translateY(0); /* For animation */
    transition: opacity 0.5s ease-out, transform 2s ease-out, background-color 0.3s ease-in-out; /* For animation */
}
.contact-container-form-card.visible-form-card {
    background-color: #99999923;
}
.contact-container-form-card:first-child {
    width: 19.53125vw; /* 500px */
}
.contact-container-form-card:nth-child(2) {
    width: 31.25vw; /* 800px */
    text-align: left;
    padding-left: 2.34375vw;  /* 60px */
}
.contact-container-form-card > p {
    color: white;
    margin-bottom: 0.1953125vw; /* 5px */
    font-weight: 500;
    padding-left: 0.78125vw; /* 20px */
}
.contact-container-form-card:first-child > p {
    padding-left: 3.90625vw; /* 100px */
}
.contact-container-form-card > input {
    font-size: 0.9375vw; /* 24px */
    border-radius: 0.9375vw; /* 24px */
    padding: 0.390625vw 0.78125vw; /* 10px */ /* 20px */
    margin-bottom: 0.78125vw; /* 20px */
    outline: none;
    border: 0.1171875vw solid transparent; /* 3px */
    transition: 0.1s ease-in-out;
}
.contact-container-form-card > input::placeholder {
    transition: 0.3s ease-in-out;
}
.contact-container-form-card > input:hover::placeholder {
    padding-left: 11.71875vw; /* 300px */
    letter-spacing: 0.78125vw; /* 20px */
    opacity: 0;
}
.contact-container-form-card > input:focus {
    border: 0.1171875vw solid rgb(106, 106, 255); /* 3px */
    outline: none;
}
.contact-container-form-card > textarea {
    font-family: cond-small;
    font-size: 0.9375vw; /* 24px */
    border-radius: 0.9375vw; /* 24px */
    padding: 0.390625vw 0.78125vw; /* 10px */ /* 20px */
    resize: none;
    width: 27.34375vw; /* 700px */
    outline: none;
    border: 0.1171875vw solid transparent; /* 3px */
    transition: 0.1s ease-in-out;
}
.contact-container-form-card > textarea::placeholder {
    transition: 0.1s ease-in-out;
}
.contact-container-form-card > textarea:hover::placeholder {
    opacity: 0;
}
.contact-container-form-card > textarea:focus {
    border: 0.1171875vw solid rgb(106, 106, 255); /* 3px */
    outline: none;
}
#contact-container-form > button {
    font-family: cond-small;
    font-size: 0.9375vw; /* 24px */
    padding: 0.390625vw 0.78125vw; /* 10px */ /* 20px */
    border-radius: 0.9375vw; /* 24px */
    border: none;
    cursor: pointer;
    transition: 0.1s ease-in-out;
    position: absolute;
    right: 1.953125vw; /* 50px */
}
#contact-container-form > button:hover {
    background-color: rgb(106, 106, 255);
    transform: scale(1.1);
}

.contact-anim-fade-out {
    opacity: 0;
    transform: translateY(-1.953125vw); /* 50px */
}

.contact-anim-hidden {
    display: none;
}
.contact-anim-green-text {
    color: green;
}
.error {
    border: 0.078125vw solid red !important; /* 2px */
}