:root {
    --dark-bg: #0f1019;
    --dark-area: #202429;
    --dark-text-white: #fff;
    --dark-off-white: #f0ede9;

    --light-bg: #f5f3f2;
    --light-area: #f0ede9;
    --light-font-grey: #2f2f2f;
    --light-primary-red: #ea012c;
}

/*.divider-top-one {
    height: 70px;
    clip-path: rect(5px 5px 160px 145px round 20%);
}*/

/*.angled-top-one {
    background-color: var(--dark-area);
    width: 120%;
    height: 150px;
    transform: rotate(-5deg);
}*/

.angled-top-one {
    width: 100vw;
    height: 130px;
    position: relative;
    z-index: -10;
    background: var(--dark-area);
    /* Coordinates: Top-Right, Bottom-Right, Bottom-Left */
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.divider-top-section {
    margin-top: 100px;
    width: 100vw;
    height: 130px;
    background: var(--dark-area);
    /* Coordinates: Top-Right, Bottom-Right, Bottom-Left */
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    @media (width > 1500px) {
        margin-left: 20%;
    }
}
.section-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--dark-area);
    @media (width > 1500px) {
        margin-left: 20%;
    }
}
.section-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media (width > 1500px) {
        padding-right: 20%;
        padding-bottom: 160px;
    }
}

.divider-bot-section {
    width: 100vw;
    height: 130px;
    background: var(--dark-area);
    /* Coordinates: Top-Right, Bottom-Right, Bottom-Left */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);

    @media (width > 1500px) {
        margin-left: 20%;
    }
}

input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
}

.contact-form {
    padding: 24px;
}

.contact-form h1 {
    @media (width < 1000px) {
        font-size: 70px;
    }
    @media (width < 490px) {
        font-size: 40px;
    }
}

form {
    @media (width > 1200px) {
        width: 80%;
    }

    display: grid;
    gap: 20px;
    column-gap: 38px;

    @media (width > 720px) {
        grid-template-columns: 1fr 1fr;
    }
}
/*input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--dark-bg) inset;
    -webkit-text-fill-color: #fff !important;
}*/

nput:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    transition-delay: 9999s;
}

.form-group {
    display: grid;
    gap: 12px;
}

.form-long {
    grid-column: 1 / -1;
}

label {
    color: var(--dark-off-white);
}

input {
    background: var(--dark-area);
    color: var(--dark-text-white);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 8px;
    border: none;
    appearance: none;
    border-bottom: 1px solid var(--dark-off-white);

    outline: none;
}

textarea {
    background: var(--dark-area);
    color: var(--dark-text-white);
    width: 100%;
    height: 63px;
    border: none;
    appearance: none;
    border-bottom: 1px solid var(--dark-off-white);
    outline: none;
    overflow: auto;
    scrollbar-width: thin; /* Choices: auto, thin, none */
    scrollbar-color: #888888 var(--dark-area);
}

.btn {
    outline: none;
    border: none;
}

.btn {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    padding: 0 72px;
    border-radius: 100px;
    height: 52px;
    transition: 0.1s;
    overflow: hidden;
    border-top: 0px solid #fff;
    background: var(--dark-off-white);
}
.btn:active {
    transform: translateY(3px);
    border-top: 4px solid #fff;
    background: #d3ccc3;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
}