/* 
===============
=== GENERAL === 
===============
*/
html {
scroll-snap-type: none;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
display: none;
}

p, h1, h2, h3, span, a, img, li, ul{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

/* 
=======================
=== CONTACT ME PAGE === 
=======================
*/
.starting-page {
background: var(--quaternary-color);
height: 95vh;
z-index: 10;
}

.ct-header {
position: relative;
display: flex;
flex-direction: column;
gap: 3rem;
align-items: center;
height: 90%;
justify-content: center;
padding: 1rem 0;
z-index: 10;
overflow-x: hidden;
}

/* Contact Form */
.contact-container {
display: flex;
align-items: center;
height: 77vh;
margin-top: 75px;
}

.contact-form {
display: flex;
flex-direction: column;
align-items: start;
gap: 20px;
}

.contact-form h2 {
font-weight: 500;
color: var(--dark-color);
font-size: 3rem;
margin-bottom: 5px;
}

.contact-form hr {
border: none;
width: 120px;
height: 4px;
background-color: var(--dark-color);
border-radius: 10px;
margin-bottom: 15px;
transition: background-color 0.5s ease-in-out;
}

.contact-inputs {
width: 400px;
height: 50px;
border: none;
outline: none;
padding-left: 25px;
font-weight: 500;
font-size: .9rem;
color: var(--subfont-color);
background: transparent;
border: 2px solid var(--dark-color);
/* rgba(255, 255, 255, 0.8) */
border-radius: 10px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
transition: border 0.25s ease-in-out,
            background-color 0.25s ease-in-out,
            transform 0.25s ease-out,
            box-shadow 0.25s ease-out;
backdrop-filter: blur(8px);
}

.contact-inputs.dark {
    border: 2px solid var(--dark-color);
}

input, select, textarea{
color: var(--dark-color);
}

textarea:focus, input:focus {
color: #000;
}

.contact-inputs:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.01);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
}

.contact-container textarea {
height: 140px;
min-height: 150px;
padding-top: 15px;
resize: none;
}

.contact-inputs::placeholder {
color: var(--dark-color);
opacity: 0.5;
transition: color 0.25s ease-in-out;
}

.contact-button{
position: relative;
top: 20px;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 40px;
line-height: 1;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
background-color: transparent;
border: 2px solid var(--dark-color);
color: var(--accent-color);
border-radius: 40px;
cursor: pointer;
overflow: hidden;
backdrop-filter: blur(8px);
transition: all .25s ease-in-out;
}

.contact-button:hover{
background: rgba(229, 115, 97, 0.7);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
transition: all .25s ease-in-out;
}

.contact-button span{
color: var(--dark-color);
opacity: 1;
visibility: visible;
transition: all .25s ease-in-out;
}

.success{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
background: transparent;
border-radius: 50%;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all .25s ease-in-out;
}

.success svg{
width: 20px;
height: 20px;
fill: yellowgreen;
transform-origin: center;
transform: translateY(-50%) rotate(0deg) scale(0);
transition: all .25s ease-in-out;
}

.contact-button.is_active{
width: 40px;
left: 180px;
height: 40px;
}

.contact-button.is_active .success{
opacity: 1;
visibility: visible;
}

.contact-button.is_active .success svg{
margin-top: 50%;
transform: translateY(-50%) rotate(720deg) scale(1);
}

.contact-button.is_active span{
opacity: 0;
visibility: hidden;
}

/* 
==========================
=== ANIMATED BACKGROND ===
==========================
*/

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: var(--tertiary-color);
    opacity: 0.25;
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 2s;
    animation-duration: 16s;
}

.circles li:nth-child(11){
    left: 12%;
    width: 120px;
    height: 120px;
    animation-delay: 6s;
    animation-duration: 20s;
}

.circles li:nth-child(12){
    left: 92%;
    width: 30px;
    height: 30px;
    animation-delay: 8s;
    animation-duration: 18s;
}

.circles li:nth-child(13){
    left: 46%;
    width: 70px;
    height: 70px;
    animation-delay: 10s;
    animation-duration: 30s;
}

.circles li:nth-child(14){
    left: 63%;
    width: 28px;
    height: 28px;
    animation-delay: 12s;
    animation-duration: 15s;
}

.circles li:nth-child(15){
    left: 88%;
    width: 50px;
    height: 50px;
    animation-delay: 12s;
    animation-duration: 19s;
}

.circles li:nth-child(16){
    left: 10%;
    width: 64px;
    height: 64px;
    animation-delay: 16s;
    animation-duration: 22s;
}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: .75;
        border-radius: 0;
    }

    100%{
        transform: translateY(calc(-1 * (100px + var(--total-height)))) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



/* 
==================
=== COPYRIGHTS ===
==================
*/
footer {
    height: 5vh;
    padding-top: 2.5vh;
    background-color: var(--quaternary-color);
    }