:root {
    --black-500: hsla(0, 0%, 0%, 0.5);
    --black-900: #131B23;
    --light: #E9F1F7;
    --lighter: #F4FAFF;
    --primary: #5B8266;
    --secondary: #202A25;
    --box-shadow: .2vw .2vw .5vw var(--black-500);
}
* {
    font-family: "Cormorant SC", Arial, serif;
}

#container {
    display: flex;
    width: 100vw;
    height: 100vh;
}
#main-left {
    width: 35vw;
    position: relative;
    box-shadow: var(--box-shadow);
}
#main-left::before {
content: "";
position: absolute;
inset: 0;
background-image: url('img/main-vertical.jpg');
background-size: cover;
background-position: center;
filter: blur(3px);
z-index: -1;
}
#main-logo {
    position: relative;
    top: 25%;
    left: 0;
    width: 100%;
    height: 15vh;
    background-color: var(--black-500);
    overflow: hidden;
}
#main-logo::before {
    content: "";
    position: absolute;
    top: 1vw;
    bottom: 1vw;
    left: 1vw;
    right: 1vw;
    background-image: url(img/main-logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#attribution {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--lighter);
    font-size: .4rem;
}
#main-right {
    display: flex;
    flex-direction: column;
    width: 65vw;
    background-color: var(--light);
    overflow: hidden;
    color: var(--black-900);
}
#right-top {
    width: 80%;
    padding: 2vw 4vw;
}
h1 {
    font-family: "Cormorant SC", Arial, serif;
    font-size: clamp(2rem, 4vw, 8rem);
    font-weight: 900;
    color: var(--primary);
}
p, fieldset {
    font-size: clamp(.6rem, 1.2vw, 2.7rem);
}
strong {
    color: var(--secondary);
}
#right-mid {
    padding: 2vw 4vw;

    background-color: var(--lighter);
    box-shadow: var(--box-shadow);
}

fieldset {
    padding: 1vw 2vw;
    border: outset 2px var(--primary);
    border-radius: .2rem;
}
legend {
    color: var(--secondary);
    font-weight: 900;
    padding: 0 3vw 0 1vw;
    font-size: clamp(1rem, 2vw, 4rem);
}

#form-row {
    display: flex;
    width: 80%;
    gap: 8vw;
    padding: .5vw 2vw;
    text-transform: uppercase;
    font-weight: bold;
} 
.row-group {
    display: flex;
    flex-direction: column;
}
label {
    font-size: clamp(.4rem, 1vw, 2rem);
}
input {
    border: outset 1px var(--secondary);
    border-radius: .2rem;
    padding: .4vw;
    background-color: var(--light);
    box-shadow: var(--box-shadow);
}
#right-bot {
    width: 100%;
    padding: 2vw 4vw;
}
#submit-btn {
    background-color: var(--primary);
    padding: 1vw 3vw;
    border-radius: .2rem;
    color: var(--lighter);
    text-shadow: 1px 1px 2px var(--black-900);
    margin: 1vw 0;
    font-size: clamp(.5rem, 2vw, 4rem);
    box-shadow: var(--box-shadow);
}
#login-btn {
    color: var(--primary);
}
#login-btn:focus {
    outline: none;
}


@media (max-width: 900px) {
    #container {
        flex-direction: column;
    }
    #main-left {
        width: 100vw;
        height: 30vh;
    }
    #main-left::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('img/main-horizontal.jpg');
        background-size: cover;
        background-position: center;
        filter: blur(3px);
        z-index: -1;
    }
    #main-logo {
        height: 10vh;
    }
    #main-right {
        width: 100vw;
        height: 100%;
    }
    #right-top {
        width: 100%;

    }
}