* {
    font-family: 'Times New Roman'(cursive), sans-serif;
}

:root {
    --gradient: linear-gradient( 140deg, #ca3870, rgb(152, 185, 154), rgb(21, 66, 64), rgb(218, 202, 67));
    background-color: slategray;
}

h3 {
    color: grey;
    border: none;
}

textarea,
#birthday {
    width: 100px;
    height: 20px;
    background-color: rgba(31, 88, 41, 0.2);
    border-radius: 4px;
    border-color: #e3dce6;
    font-size: large;
}

button {
    height: 20px;
    width: 100px;
    border-radius: 10px;
    margin-top: 1vh;
}

main {
    background: rgba(247, 246, 250);
    color: darkslategray;
}

.content {
    width: 100%;
    background-image: var(--gradient);
    background-size: 500%;
    animation: bg-animation 10s infinite alternate;
    justify-content: space-evenly;
}

.title {
    color: white;
    padding-left: 2em;
}

a {
    color: rgb(38, 49, 18);
    font-size: 18px;
    opacity: 60%;
}

.fa-github {
    padding-left: 1em;
    font-size: 40px;
}

@keyframes bg-animation {
    0% {
        background-position: left
    }
    100% {
        background-position: center
    }
}


/* WAVES */

.waves {
    position: relative;
    width: 100%;
    height: 20vh;
    margin-bottom: -7px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

.parallaxDark>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallaxDark>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallaxDark>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallaxDark>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallaxDark>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@media (min-width: 400px) {
    .content {
        height: 100vh;
    }
    main {
        height: 60vh;
        padding: 5em;
    }
    .adeu {
        height: 20vh;
    }
    h1 {
        font-size: 40px;
    }
}


/* @media (max-width: 900px) {
  .waves {
    height: 17px;
    min-height: 60px;
  }
}

@media only screen and (max-width: 480px) {
  space {
    text-align: center;
  }
} */