* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 2288px;
    background: #E5EEFF;
    opacity: 1;
}

.container {
    width: 82vw;
    height: 1724px;
    position: absolute;
    inset: 0;
    margin: 20em auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1.25em;

}

img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

section {
    grid-column: 3/5;
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25em;
    background: #020253;
    opacity: 1;
}

@font-face {
    font-family: "Assistant-Bold";
    src: url(fonts/Assistant/static/Assistant-Bold.ttf)
}

@font-face {
    font-family: "Assistant-Regular";
    src: url(fonts/Assistant/static/Assistant-Regular.ttf);
}

section>h1 {
    text-align: center;
    font: normal normal bold 61px/80px "Assistant-Bold";
    color: #0EE1DA;
    opacity: 1;
}


section>p {
    text-align: center;
    font: normal normal normal 20px/26px "Assistant-Regular";
    color: #F9F9F9;
    opacity: 1;
}



.formbox {
    grid-column: 1/3;
    grid-row: 4/7;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25em;
    background: #8E097C;
    opacity: 1;
}

.formbox>h1 {
    text-align: center;
    font: normal normal bold 35px/46px "Assistant-bold";
    color: #FFFFFF;
    opacity: 1;
}

.formbox>p {
    text-align: center;
    font: normal normal normal 20px/26px "Assistant-regular";
    color: #F9F9F9;
    opacity: 1;
}

form {
    width: 80%;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    direction: rtl;
}

@font-face {
    font-family: "Heebo-Bold";
    src: url(fonts/Heebo/static/Heebo-Bold.ttf);
}

label {
    display: flex;
    flex-direction: column;
    text-align: right;
    font: normal normal bold 16px/24px "Heebo-Bold";
    color: #0EE1DA;
    opacity: 1;

}

input {
    height: 60px;
    background: #E5EEFF 0% 0% no-repeat padding-box;
    opacity: 1;
    border-bottom: 4.5px solid #0EE1DA;
}

input[type="submit"] {
    background: #0EE1DA;
    opacity: 1;
    text-align: center;
    font: normal normal bold 24px/33px "Heebo-bold";
    letter-spacing: 0.36px;
    color: #011560;
    opacity: 1;
}

textarea {
    background: #E5EEFF 0% 0% no-repeat padding-box;
    opacity: 1;
}


h1,
p {
    width: 80%;
    font-size: 22px;
    text-align: center;
}

@media screen and (max-width:1000px) {
    body {
        width: 100vw;
        height: 100vh;
    }

    .container {
        width: 90vw;
        height: 90%;
        position: absolute;
        margin: 1em auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(12, 1fr);
        gap: 0.5em;
        background: #E5EEFF;
        opacity: 1;

    }


    section {
        height: 340px;
        grid-column: 1/3;
        grid-row: 1/3;
        grid-template-rows: 1fr 1fr 1fr;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1em;
        background: #020253;
        opacity: 1;
    }

    section>h1 {
        text-align: center;
        font: normal normal bold 36px/47px "Assistant-Bold";
        color: #0EE1DA;
        opacity: 1;
    }

    section>p {
        text-align: center;
        font: normal normal normal 20px/26px "Assistant-regular";
        color: #F9F9F9;
        opacity: 1;

    }

    .formbox {
        height: 718px;
        grid-column: 1/3;
        grid-row: 6/10;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        gap: 1.25em;
        background: #8E097C;
        opacity: 1;
    }

    .formbox>h1 {
        text-align: center;
        font: normal normal bold 25px/33px "Assistant-Bold";
        color: #FFFFFF;
        opacity: 1;

    }

    .formbox>p {
        text-align: center;
        font: normal normal normal 15px/19px "Assistant-Regular";
        color: #F9F9F9;
        opacity: 1;
    }

    label {
        text-align: right;
        font: normal normal bold 13px/20px "Heebo-Bold";
        color: #0EE1DA;
        opacity: 1;
    }

    input[type="submit"] {
        text-align: center;
        font: normal normal bold 15px/16px "Heebo-Bold";
        letter-spacing: 0.18px;
        color: #011560;
        opacity: 1;
    }

}