/*
History of Cloud Service Providers
ITC Project

Date:   11/18/2025

Filename: contact.css
*/

main {
    display: block;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding: 20px;
    width: 100%;
}


form#contactForm {
    display: flex;
    flex-flow: row wrap;
}

form#contactForm span.required {
    color: red;
    font-weight: bold;
}

form#contactForm > fieldset {
    flex: 1 1 300px;
    border-radius: 20px;
    background-color: #0002;
}

div.formRow {
    display: flex;
    flex-flow: row wrap;
    margin: 7px 0;
}

div.formRow > * {
    flex: 1 1 200px;
}

div#buttons {
    text-align: center;
    width: 100%;
}

fieldset.optGroup {
    border-radius: 5px;
    background-color: #0002;
}

input[type='submit'],
input[type='reset'] {
    font-size: 1.2em;
    padding: 5px;
    margin: 15px;

    border-radius: 20px;
}


textarea {
    margin-top: 10px;
    height: 100px;
    width: 95%;
}

form#contactForm.fall-off {
    transform-origin: top left;
    animation: form-fall-off 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes form-fall-off {
    0% {
        transform: translateY(0);
        display: flex;
    }
    10% {
        transform: translateY(10px) rotate(45deg);
    }
    50% {
        transform: translateY(13px) rotate(49deg);
    }
    80% {
        transform: translateY(15px) rotate(45deg);
        opacity: 1;
    }
    99% {
        transform: translateY(200vh) rotate(75deg);
    }
    100% {
        display: none;
        opacity: 0;
    }
}

/* Silly Stuff */ 

#unavailable {
    display: none;
    color: red;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    text-indent: 0;

    grid-column: span 2;
}
#unavailable b {
    color: rgb(168, 19, 19);
    font-size: 1.2em;
}


.text-wave {
    display: inline-block;
    font-weight: bold;
    color: rgb(168, 19, 19);
    font-size: 1.2em;
}

/* Animates each letter of NEVER text */
.text-wave:nth-child(1) {
    position: relative;
    animation: pulse 1s ease-in-out infinite;
}

.text-wave:nth-child(2) {
    position: relative;
    animation: pulse 1s ease-in-out 0.2s infinite;
}

.text-wave:nth-child(3) {
    position: relative;
    animation: pulse 1s ease-in-out 0.4s infinite;
}

.text-wave:nth-child(4) {
    position: relative;
    animation: pulse 1s ease-in-out 0.6s infinite;
}

.text-wave:nth-child(5) {
    position: relative;
    animation: pulse 1s ease-in-out 0.8s infinite;
}

@keyframes pulse {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Media Queries */
/* Mobile Devices */
@media screen and (max-width: 480px) {
}

/* Tablet */
@media screen and (min-width: 481px) {
    main {
        min-width: 400px;
        width: 70%;
        margin: 0 auto;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
}