.section-1 {
    width: 100vw;
    min-height: calc(100vh - 5rem);
    padding-top: 5rem;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: end;
}

.section-1 > div {
    width: calc(100vw - 8.625rem - 8.625rem);
    min-height: calc(100vh - 5rem);
    padding-bottom: var(--regular);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.section-1 > div > div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}

.contact-form {
    width: 100%;
    display: -ms-grid;
    display: grid;
    gap: var(--medium);
}

.contact-form > div {
    display: -ms-grid;
    display: grid;
    gap: 1.618rem;
}

.contact-form > div > div {
    width: 100%;
    display: -ms-grid;
    display: grid;
    position: relative;
}

.contact-form > div > div > input {
    width: calc(100% - 2rem - 2px);
    background-color: transparent;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: var(--regular);
    padding: 2rem var(--regular) var(--regular) var(--regular);
    border: rgb(240, 239, 239, 1) solid 1px;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    -o-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    transition: cubic-bezier(.6,.3,.6,.9) .2s;
}

.contact-form > div > div > input:-webkit-autofill,
.contact-form > div > div > input:-webkit-autofill:hover, 
.contact-form > div > div > input:-webkit-autofill:focus, 
.contact-form > div > div > input:-webkit-autofill:active{
    -webkit-text-fill-color: var(--white);
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
} 

.contact-form > div > div > input ~ label {
    pointer-events: none;
}

.contact-form > div > div > input:focus {
    outline: none;
    border: rgb(240, 239, 239, 0.5) solid 1px;
}

.textarea-container {
    position: relative;
    width: inherit;
    height: 100%;
    overflow: hidden;
}

.textarea-container::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--black);
    -webkit-filter: url(#noise);
            filter: url(#noise); 
    opacity: 0.369;
    z-index: 1; 
    pointer-events: none;
}

.contact-form > div > div > textarea {
    width: calc(100% - 2rem - 2px);
    min-height: 25vh;
    background-color: var(--black);
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    padding: 2rem var(--regular) var(--regular) var(--regular);
    border: rgb(240, 239, 239, 1) solid 1px;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    -o-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    transition: cubic-bezier(.6,.3,.6,.9) .2s;
    resize: none;
}

.contact-form > div > div > textarea ~ label {
    min-height: 25vh;
    pointer-events: none;
    z-index: 2;
}

.contact-form > div > div > textarea ~ div {
    position: absolute;
    background-color: var(--black);
    width: calc(100% - 2rem - 2px);
    height: calc(var(--regular) + var(--regular));
    -ms-grid-column-align: center;
        justify-self: center;
    margin-top: 1px;
    z-index: 1;
}

.contact-form > div > div > textarea:focus {
    outline: none;
    border: rgb(240, 239, 239, 0.5) solid 1px;
}

.form-content-false {
    color: var(--white);
    opacity: 0.5;
    font-size: 1rem;
    position: absolute;
    margin-left: 1rem;
    margin-bottom: 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    -o-transition: cubic-bezier(.6,.3,.6,.9) .2s;
    transition: cubic-bezier(.6,.3,.6,.9) .2s;
}

.contact-form > div > div > input:focus ~ label {
    color: var(--white);
    opacity: 0.5;
    font-size: 0.85rem;
    position: absolute;
    margin-left: 1rem;
    margin-bottom: 2rem;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.contact-form > div > div > textarea:focus ~ label {
    color: var(--white);
    opacity: 0.5;
    font-size: 0.85rem;
    position: absolute;
    margin-left: 1rem;
    margin-bottom: 2rem;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.form-content-true {
    color: var(--white);
    opacity: 0.5;
    font-size: 0.85rem;
    position: absolute;
    margin-left: 1rem;
    margin-bottom: 2rem;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

@media (max-width: 320px) {
    .contact-form {
        width: 100%;
    }

    .section-1 > div {
        width: calc(100vw - 1rem - 1rem);
        overflow: visible;
        scrollbar-gutter: stable;
    }
}

@media (min-width: 320px) {
    .contact-form {
        width: 100%;
    }

    .section-1 > div {
        width: calc(100vw - 1rem - 1rem);
        overflow: visible;
        scrollbar-gutter: stable;
    }
}

@media (min-width: 600px) {
    .contact-form {
        width: 100%;
    }

    .section-1 > div {
        width: calc(100vw - 2rem - 2rem);
    }
}

@media (min-width: 800px) {
    .contact-form {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .contact-form {
        width: 100%;
    }
}

@media (min-width: 1280px) {
    .contact-form {
        width: 45vw;
    }
    
    .section-1 > div {
        width: calc(100vw - 8.625rem - 8.625rem);
    }
    
    .section-1 > div {
        overflow: hidden;
        scrollbar-gutter: stable;
    }
}


/* button */
.section-1 button {
    width: var(--xx-large);
    height: 3rem;
    padding: 0 1rem 0 1rem;
    cursor: pointer;
    border: 0;
    font-weight: 600;
    -ms-grid-column-align: left;
        justify-self: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    display: -ms-grid;
    display: grid;
    overflow: hidden;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    position: relative;
}

.button-unclicked {
    background-color: var(--orange);
}

.button-clicked {
    background-color: var(--green);
}

.button-failed {
    -webkit-animation: error-flash 300ms;
            animation: error-flash 300ms;
}

.button-unsent {
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.button-send {
    height: var(--medium);
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) .3s;
    -o-transition: cubic-bezier(.6,.3,.6,.9) .3s;
    transition: cubic-bezier(.6,.3,.6,.9) .3s;
    position: relative;
}

.button-send > div {
    height: 1rem;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -webkit-transition-delay: 161.8ms;
         -o-transition-delay: 161.8ms;
            transition-delay: 161.8ms;
    display: -ms-grid;
    display: grid;
    overflow: hidden;
}

.section-1 button:hover > .button-send > div {
    width: 2.5rem;
    -webkit-transition-delay: 0ms;
         -o-transition-delay: 0ms;
            transition-delay: 0ms;
}

.section-1 button > .button-send > div > p {
    line-height: 1.0;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
}

.button-text-unclicked {
    width: 100%;
}

.button-text-clicked {
    width: var(--large);
    -webkit-transition-delay: 0ms;
         -o-transition-delay: 0ms;
            transition-delay: 0ms;
}

.button-text-sent-clicked, .button-text-send-clicked {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}


.button-send-svg {
    height: 1rem;
    position: absolute;
    -ms-grid-column-align: end;
        justify-self: end;
    z-index: 0;
    right: 0;
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
}

.button-send-svg > g > polyline {
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    stroke-width: 1rem;
    fill: none;
    stroke: var(--black);
    stroke-linecap: round;
}

.section-1 button:hover > .button-send > .button-send-svg > g > polyline {
    -webkit-transition-delay: 161.8ms;
         -o-transition-delay: 161.8ms;
            transition-delay: 161.8ms;
}

.button-send > .button-send-svg > g > polyline:nth-child(1) {
    stroke-dasharray: 838.1199951171875;
    stroke-dashoffset: 838.1199951171875;
}

.button-send > .button-send-svg > g > polyline:nth-child(2) {
    stroke-dasharray: 341.74176025390625;
    stroke-dashoffset: 341.74176025390625;
}

.section-1 button:hover > .button-send > .button-send-svg > g > polyline:nth-child(1) {
    stroke-dashoffset: 0;
}

.section-1 button:hover > .button-send > .button-send-svg > g > polyline:nth-child(2) {
    stroke-dashoffset: 0;
}

/* .section-1 button:hover > .button-send > .button-send-svg {
    -webkit-animation: shake 369ms infinite ease-in-out;
            animation: shake 369ms infinite ease-in-out;
    -webkit-animation-delay: 350ms;
            animation-delay: 350ms;
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
    }

    33.33% {
        -webkit-transform: rotate(3deg);
                transform: rotate(3deg);
    }

    100% {
        -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
    }
}

@keyframes shake {
    0% {
        -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
    }

    33.33% {
        -webkit-transform: rotate(3deg);
                transform: rotate(3deg);
    }

    100% {
        -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
    }
} */

.button-sent {
    -webkit-transform: rotate(-180deg) scale(0.618);
        -ms-transform: rotate(-180deg) scale(0.618);
            transform: rotate(-180deg) scale(0.618);
    opacity: 0;
}

.button-sent-svg {
    height: var(--medium);
    position: absolute;
    right: 0;
    -ms-grid-column-align: end;
        justify-self: end;
    align-self: center;
    fill: none;
    stroke: var(--black);
    stroke-width: 1rem;
    stroke-linecap: round;
    overflow: visible;
}

#button-sent-svg-circle, #button-sent-svg-polyline {
    -webkit-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -o-transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    transition: cubic-bezier(.6,.3,.6,.9) 300ms;
    -webkit-transition-delay: 300ms;
         -o-transition-delay: 300ms;
            transition-delay: 300ms;
    opacity: 0;
}

.button-sent-svg-circle {
    stroke-dasharray: 826.1561279296875;
    stroke-dashoffset: 826.1561279296875;
}

.button-sent-svg-polyline {
    stroke-dasharray: 186.01858520507812;
    stroke-dashoffset: 186.01858520507812;
}

.button-svg-clicked {
    stroke-dashoffset: 0;
    opacity: 1 !important;
}
/* button */