/* Global elements */

.highlighted-light {color: var(--f-a-e)}
.highlighted-dark {color: var(--f-a-b)}
.highlighted-important {color: var(--f-d-i);text-decoration: underline;}
.light-font {color: var(--f-d-b)}
.dark-font {color: var(--f-l-b)}
iframe {height: 256px}
.left-panel, iframe {grid-column: 1;}

/* Section 1 */

.section-1 {
    background-color: var(--b-l);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.section-1 div h1 {
    color: var(--f-a-b);
}
.section-1 div p {
    max-width: 1000px;
}
.prompt {
    color: var(--f-a-b);
    font-weight: 700;
    font-size: 16px;
}
/* Job description sections */
.section-2, .section-3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--description-columns), minmax(16px, max-content));
}
.section-2 {background-color: var(--b-d);}
.section-3 {background-color: var(--b-l);}

/* Application section */

.form-section {
    width: 100%;
    background-color: var(--b-d);
    display: flex;
}
form {
    display: grid;
    row-gap: 16px;
    grid-template-columns: repeat(var(--application-columns), minmax(8px, fit-content));
    grid-template-rows: repeat(auto-fit, minmax(16px, max-content));
}
form h4, form h5 {color: var(--f-d-b);}
form h3 {color: var(--f-a-e);}
form h4, form h3{
    margin: 8px 0px !important; 
    text-decoration: underline;
}
form label {color: var(--f-d-b);}
select, select option {color: var(--f-l-b); height: 30px; font-weight: 600;}
.checkbox-div input {max-width: max-content;}
.textarea {grid-column: 1 / span var(--application-columns); max-width: 100% !important;}
textarea {width: 100%;}
.submit-button {width: 100% !important; height: 40px !important; justify-self: center; align-self: center; grid-column: 1;}

/* Everything smaller, 480px and down*/
@media only screen and (max-width: 480px) {
    .section-1 {padding: 32px 16px;}
    .section-2, .section-3 {padding: 16px; column-gap: 0;}
    :root {--application-columns: 1;}
    .left-panel, iframe {width: 100%;}
    .form-section {padding: 16px; flex-direction: column;}
    form h3, form h4 {grid-column: 1;}
    div input, select, option {width: 100%;}
    form div {max-width: 100%;}
}

/* Smaller devices, 480px and up */
@media only screen and (min-width: 480px) {
    :root {
        --description-columns: 1;
        --application-columns: 2;
    }
    .section-1 {padding: 32px 16px;}
    .section-2, .section-3 {padding: 16px; column-gap: 0;}
    .right-panel {grid-column: 1; padding-top: 16px;}
    .left-panel, iframe {width: 100%;}
    .form-section {padding: 16px; flex-direction: column;}
    form {column-gap: 0; column-gap: 16px;}
    form h3, form h4 {grid-column: 1 / span 2;}
    div input, select, option {width: 100%;}
    form div {max-width: 100%;}
}

/* Large devices (laptops/desktops, 768px and up */
@media only screen and (min-width: 768px) {
    :root {
        --description-columns: 2;
        --application-columns: 2;
    }
    .section-1 {padding: 64px 32px;}
    .section-2, .section-3 {padding: 32px; column-gap: 16px;}
    .right-panel {grid-column: 2; grid-row: 1 / span 10;}
    .left-panel, iframe {width: 320px;}
    .form-section {padding: 32px; column-gap: 16px; flex-direction: row;}
    form {column-gap: 16px;}
    form h3, form h4 {grid-column: 1 / span 2;}
    div input, select, option {width: 100%;}
    form div {max-width: 100%;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    :root {
        --description-columns: 2;
        --application-columns: 2;
    }
    .section-1 {padding: 128px 0;}
    .section-2, .section-3 {column-gap: 16px;}
    .right-panel {grid-column: 2; grid-row: 1 / span 10;}
    .left-panel, iframe {width: 380px;}
    .form-section {padding: 32px; column-gap: 16px;}
    form {column-gap: 32px;}
    form h3, form h4 {grid-column: 1 / span 2;}
    div input, select, option {width: 268px;}
    form div {max-width: 268px;}
}