/* prerequisites */
:root {

    --green-color: #596D48;
}

* {

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

body {

    display: flex;
    
    height: 100vh;

    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* prerequisites */

/* aside */
aside.left-part {

    position: relative;

    width: 38%;
    height: 100%;
    
    flex-shrink: 0;

    img.background-image {

        width: 100%;
        max-height: 100%;
        object-fit: cover;

        display: block;
    }

    div {

        position: absolute;
        top: 20%;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        width: 100%;
        height: 230px;
        
        background-color: black;
        background: rgb(0 0 0 / 60%);
    }

    img.logo {

        width: 120px;
        height: auto;
    }

    p.logo-text {

        font-family: "Uncial Antiqua", system-ui;
        color: white;
        font-size: 4.5rem;
    }

    p.credits {

        position: absolute;
        bottom: 20px;

        width: 100%;
        text-align: center;
        
        color: white;
        font-size: 1.4rem;
        font-family: "Onest", sans-serif;
    }
    
}
/* aside */

/* main */
main.right-part {

    font-family: "Onest", sans-serif;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    p.bold-paragraph {

        padding-left: 70px;
        padding-right: 70px;

        font-size: 25px;
        font-weight: 600;
    }

    div.forms-container {

        display: flex;
        flex-direction: column;
        gap: 35px;
        padding: 30px 60px;

        -webkit-box-shadow: 0px 6px 15px 6px #737373; 
        box-shadow: 0px 6px 15px 6px #737373;
    }

    form {

        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    div.form-part {

        display: flex;
        flex-wrap: wrap;
        gap: 30px 120px;
        
        text-transform: uppercase;
        font-size: 1rem;
        letter-spacing: 0.09rem;
    }

    div.form-part > div {

        display: flex;
        flex-direction: column;
    }

    input {

        width: 330px;
        height: 38px;

        border-radius: 6px;

        padding-left: 10px;
        font-size: 1.2rem;

        border: 1.8 solid black;
    }

    input:focus {

        outline: none;
        border-color: rgb(46, 46, 193);
    }

    div.input-and-icon {

        display: flex;
        align-items: center;
        gap: 5px;
    }

    #password-paragraph, #confirm-password-paragraph {

        color: red;
        font-size: 0.9rem;
        text-transform: none;
    }

    button {

        margin-top: 20px;
        align-self: flex-start;

        width: 280px;
        height: 60px;

        border-radius: 8px;
        border: none;
        font-size: 1.5rem;

        color: white;
        background-color: var(--green-color);

        font-weight: 700;

        -webkit-box-shadow: 0px 5px 15px -5px #000000; 
        box-shadow: 0px 5px 15px -5px #000000;
    }

    p {

        font-size: 1.2rem;
    }

    p a {

        text-decoration: none;
        color: var(--green-color);
        font-weight: 700;
    }
}
/* main */