/* Gerneral setting */
* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    transition-duration: 1s;
    transition: 1s;
}

@font-face {
    font-family: x;
    src: url();
}

:root {
    --cdcwhite: white;
    --cdcazure: rgb(148, 155, 176);
    --cdcdarkgrey: rgb(21, 21, 25);
    --cdcdarktransparent: rgba(0, 0, 0, 0.286);
    --cdclighttransparent: rgba(248, 248, 248, 0.285);
    --cdcgradientmintyellow: -webkit-linear-gradient(31deg, rgba(34, 199, 155, 1) 0%, rgba(237, 180, 56, 1) 100%);
    --cdcgradientpinkviolet: -webkit-linear-gradient(225deg, rgba(191, 32, 150, 1) 0%, rgba(31, 36, 128, 1) 100%);
    --cdcgradientgreenblue: -webkit-linear-gradient(22deg, rgba(145, 175, 65, 1) 0%, rgba(10, 158, 99, 1) 30%, rgba(57, 40, 185, 1) 70%, rgba(32, 22, 85, 1) 100%);
    --cdcgradientblackwhite: -webkit-linear-gradient(14deg, rgba(0, 0, 0, 1) 0%, rgb(67, 67, 67) 100%);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--cdcgradientblackwhite) no-repeat;
    background-size: cover;
    color: var(--cdclighttransparent);

}

h1 {
    font-size: 9em;
    animation: rotation 15s infinite;
    background: var(--cdcgradientblackwhite);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

h2 {
    color: var(--cdclighttransparent);
    font-size: 5em;
    margin: 0;
    font-weight: 400;
}

h4 {
    color: var(--cdcdarktransparent);
    font-size: 2em;
    margin: 0;
}

h6 {
    font-size: 1.3em;
    color: var(--cdclighttransparent);
    font-weight: 100;
}


p {
    color: var(--cdclighttransparent);
    font-weight: 100;
}

a {
    text-decoration: none;
}
/* ******************************************* HEADER **************************************************** */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 100vh;
    animation: down 5s forwards;
}
header h2 {
    background: var(--cdcdarktransparent);
    padding: 0em;
    border-radius: 0 3em;
}

header p {
    font-size: 3em;
    margin: 0.2em;
    font-size: 1.5em;
    color: var(--cdcdarktransparent);
}
header div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header .left{
    background: var(--cdcgradientgreenblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.5em;
     border-radius: 0 28em;
     cursor: pointer;
}

header:hover .left{
    color: var(--cdclighttransparent);
}
header .right{
    background: var(--cdcgradientpinkviolet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.5em;
     border-radius: 0 28em;
     cursor: pointer;
}


@keyframes down {

    0% {
        margin-top: -50;
        transform: scale(0);
    }

    100% {
        margin-top: 0;
        transform: scale(1)
    }
}

@keyframes rotation {

    0% {
        opacity: 0;
        background: var(--cdcgradientgreenblue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }

    30% {
        opacity: 1;
        background: var(--cdcgradientgreenblue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }

    50% {
        opacity: 0;
        background: var(--cdcgradientgreenblue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }


    60% {
        opacity: 0;
        background: var(--cdcgradientpinkviolet);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }


    70% {
        opacity: 1;
        background: var(--cdcgradientpinkviolet);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }

    100% {
        opacity: 0;
        background: var(--cdcgradientpinkviolet);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 1s;
        transition: 1s;
    }
}

/* ******************************************* MAIN **************************************************** */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 100vh;
}

button {
    width: 25em;
    height: 25em;
    background: var(--cdcdarktransparent);
    color: var(--cdcazure);
    border-radius: 0 28em;
    margin: 1em;
    border: none;
    cursor: pointer;
}

button h3 {
    font-size: 15em;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;

}

.buttons .left:hover {
    animation: shaking 7s forwards;
    box-shadow: 5px 10px 30px var(--cdcdarkgrey);
}

.buttons .right:hover {
    animation: shaking 7s forwards;
    box-shadow: 5px 10px 30px var(--cdcdarkgrey);

}

.left:hover {
    background: var(--cdcgradientgreenblue);

}

.right:hover {
    background: var(--cdcgradientpinkviolet);
}

.buttons .left h3 {
    background: var(--cdcgradientgreenblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.buttons .right h3 {
    background: var(--cdcgradientpinkviolet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.buttons .left h3:Hover {
    background: var(--cdcgradientgreenblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--cdclighttransparent);


}

.buttons .right:hover h3 {
    background: var(--cdcgradientpinkviolet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--cdclighttransparent);

}

@keyframes shaking {
    0% {
        transform: translate3d(-5px, 20px, 15px) rotate(-10deg);
    }

    50% {
        transform: translate3d(42px, -62px, -135px) rotate(10deg);
    }

    100% {
        transform: translate3d(-5px, 20px, 15px) rotate(-10deg);
    }

}

form {
    width: 30em;
}

input {
    width: 100%;
    height: 3em;
    border: none;
    padding: 2em;
    border-radius: 0 1.5em;
    margin: 0.5em;
    background: var(--cdcdarktransparent);
    font-size: 1.3em;
    color: var(--cdclighttransparent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    height: 15em;
    border: none;
    padding: 0em;
    border-radius: 0 2.5em;
    margin: 1em;
    background: var(--cdcdarktransparent);
    font-size: 1.3em;
    color: var(--cdclighttransparent);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0.5em;
}

form button {
    width: 3em;
    height: 2em;
    font-size: 1.5em;
    color: var(--cdclighttransparent);
    background: var(--cdcdarktransparent);
    padding: 0.1em;
    font-size: 2em;
}

form button:hover {
    transform: scale(2);
    background: var(--cdcgradientblackwhite);
    box-shadow: 5px 10px 30px var(--cdcdarkgrey);
}

/* ******************************************* HFOOTER **************************************************** */
footer {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    bottom: 0;
    position: fixed;
    width: 100vw;
    color: var(--cdclighttransparent);
}