:root {

    font-size: 20px;
    --orange: #ff8a00;
    --green: #189572;
    --
    /*HEADER*/
    --header-margin-bottom: 2rem;
    --header-font: 5rem;

    /*SEARCH MENU*/
    --menu-width: 80%;
    --menu-margin: calc((100% - var(--menu-width))/2);
    --search-row: 2rem;
    --search-font: 1.3rem;
    --search-border-width: 0.2rem;
    --search-gap: 0.5rem;
    --selection-buttons-height: 1.3rem;
    --selection-buttons-font: 1rem;
    --chosen-font: 1rem;
    --menu-top: calc(var(--search-row) + 0.1rem);
    --option-font: 1rem;
    --accept-clear-cancel-font: 1rem;

    /*JOB DESCRIPTION*/
    --job-description-font: 1rem;
    --job-description-height: 190px;

    /*MOSAIC*/
    --mosaic-margin-top: 7rem;
    --mosaic-margin-bottom: 1rem;
    --mosaic-width: 75%;
    --mosaic-column: 25vw;
    --mosaic-grid-gap: 0.1rem;

}

body {

    color: white;
    font-family: Arial;
    margin: 0;

}

nav {

    padding-bottom: 1px;
    background-color: linear-gradient(to left, black 50%, var(--orange) 50%);
    margin-bottom: var(--nav-margin-bottom);

}



#submit_button {

    padding: 0;
    display: inline-block;
    border: solid rgb(255, 138, 0) var(--search-border-width);
    font-size: var(--search-font);
    width: 50%;
    height: 100%;
    border-radius: 0.5rem;
    background-color: rgb(255, 138, 0);
    text-align: center;

}

#search_container {

    position: relative;
    display: grid;
    grid-gap: var(--search-gap);
    grid-auto-flow: dense;
    grid-template-columns: repeat(5, 20%);
    grid-auto-rows: var(--search-row);
    padding-bottom: 1rem;

}

.column_1 {

    grid-column: 1/2;

}

.column_2 {

    grid-column: 2 / 3;

}

.column_3 {

    grid-column: 3 / 4;

}

.column_4 {

    grid-column: 4 / 5;

}

#menu_container {

    display: grid;
    grid-template-columns: 20% 20% 20% 20%;

}

#industry_container {

    display: none;
}

.menu_instructions {

    grid-row: 1 / 2;
    grid-column: 1 / 5;
    font-weight: bold;
    margin-top: 0.5rem;
    font-size: 1.1rem;

}

#close_menu {

    display: none;
    color: greenyellow;
    font-weight: 600;
    border-bottom: 0.1rem aqua solid;
    font-size: 1.4rem;
    cursor: pointer;
    text-align: center;
    background-color: dimgray;
}

#chosen_industry {
    display: none;
}

.accept-clear-cancel {
    font-size: var(--accept-clear-cancel-font);

}


/*
#industry_1 {

    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: repeat(7, 3rem);
    grid-auto-flow: dense;
    grid-gap: 1.5rem;
}

#industry_2 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_3 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_4 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_5 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_6 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_7 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}

#industry_8 {
    display: none;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-flow: dense;
}*/

#location_container {
    display: none;
}

#time_container {

    display: none;
}

.invisible_input {
    display: none;
}

.industry_buttons {

    font-size: var(--option-font);
    box-shadow: 0.05rem 0.05rem rgb(200, 200, 200);
    cursor: pointer;
}

.search_buttons {

    font-weight: 600;
    font-size: var(--search-font);
    border: var(--search-border-width) black solid;
    border-radius: 0.5rem;
    cursor: pointer;

}

#menu_wrapper {
    position: relative;
    margin-right: var(--menu-margin);
    width: var(--menu-width);
    margin-top: var(--header-margin-bottom);
    font-size: var(--chosen-font);
    background-color: white;
    color: black;
}

.menu {
    z-index: 1000;
    background-color: white;
    width: 100%;
    font-size: 1rem;
    text-align: center;
    background-color: aliceblue;
    grid-row-gap: 0.03rem;
    grid-column-gap: 0.02rem;
    grid-template-columns: repeat(4, 24%);
    grid-template-rows: repeat(7, max-content);
    grid-auto-flow: dense;


}

.profession {
    display: none;
}

#menu {
    width: 82%;
    position: absolute;
    top: var(--menu-top);
    z-index: 3000;

}

h1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: var(--header-font);
    margin-top: 50px;

}

h1 > span {
    flex-basis: max-content;
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;
}

h1 > img {
    height: calc(20px + var(--header-font));
    position: relative;
    top: -10px;
}

.mark_sent {

    display: none;

}

#search_results_header {

    background-color: orangered;
    clip-path: polygon(0 0, 10% 100%, 90% 100%, 100% 0);
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;

}

#content {
    margin-top: 2rem;
    padding-right: 10%;
    padding-left: 10%;
    color: black;

}



.apply {

    display: inline-block;
    height: 1.2rem;
    text-align: center;
    margin-top: 0.75rem;
    background-color: var(--orange);
    border-radius: 0.5rem;
    padding: 0 1rem 0 1rem;
    grid-area: sign_in;
    color: black;
    text-decoration: none;


}

.apply:hover {

    color: white;
    transform: scale(1.05);
    box-shadow: 0.1rem 0.2rem rgb(200, 200, 200);
    cursor: pointer;
}

.application_sent {

    display: inline-block;
    height: 1.2rem;
    text-align: center;
    margin-top: 0.75rem;
    background-color: var(--green);
    border-radius: 0.5rem;
    padding: 0 1rem 0 1rem;
    grid-area: sign_in;
    color: white;
    text-decoration: none;


}

/*
.application_sent:hover {

    color: white;
    transform: scale(1.05);
    box-shadow: 0.1rem 0.2rem rgb(200, 200, 200);
    cursor: pointer;
}
*/


.apply_menu {

    display: none;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: darkslategrey;
    border-radius: 0.5rem white solid;
    z-index: 1000;
    color: white;
}


.job_description {

    position: relative;
    font-size: var(--job-description-font);
    padding: 0 0.75rem 1rem 1rem;
    background-color: aliceblue;
    white-space: pre-line;
    border-radius: 0.5rem;

}

.job_description h3 {

    margin: 0;

}

.job_description p {

    margin: 0;
    max-height: var(--job-description-height);
    overflow: hidden;
}

.expand {

    all: unset;
    cursor: pointer;
    border-radius: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    background-color: #43d0ef;
    position: absolute;
    left: 1rem;
}

.directions {

    margin-right: 0.5rem;

}



.marked {

    background-color: rgb(255, 138, 0);
    color: white;

}

#accept {

    grid-area: accept;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem 0 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgb(255, 138, 0);
    cursor: pointer;
}

#cancel {

    grid-area: cancel;
    text-align: center;
    padding: 0 1rem 0 1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;

}

#clear {

    grid-area: clear;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem 0 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgb(255, 138, 0);
    cursor: pointer;
}

#selection_buttons {

    display: none;
    grid-template-columns: 1ch max-content 1ch max-content 1fr max-content;
    grid-template-rows: var(--accept-clear-cancel-height);
    grid-template-areas:

        "... accept ... clear ... cancel"

    ;
    background-color: aliceblue;
    padding: 1rem 0 1rem 0;
    font-size: var(--accept-clear-cancel-font);
}

#mosaic {

    position: relative;
    top: 4rem;
    width: var(--mosaic-width);
    margin-right: 12.5%;
    margin-bottom: var(--mosaic-margin-bottom);
    margin-top: var(--mosaic-margin-top);
    display: grid;
    grid-template-rows: auto;
    grid-auto-columns: repeat(3, var(--mosaic-column));
    grid-template-areas:
        " search_work publish read_blog "
    ;
    color: black;
    text-align: center;
    grid-gap: 0.1rem;
    background-image: linear-gradient(to top, aliceblue 20%, 20%, var(--orange) 60%, 60%, aliceblue 80%);
}

#mosaic div {

    background-color: aliceblue;


}

#mosaic div:hover {

    /*    transform: scale(1.05);*/
}


#mosaic p {

    margin: 0 1rem 0 1rem;


}

#mosaic img {
    width: 2rem;
    height: 2rem;
    /*        position: absolute;*/
    bottom: 2rem;

}

#search-work-image {
    width: 1.4rem;
    height: 2.4rem;

}



#search_work {

    grid-area: search_work;

}

#publish {

    grid-area: publish;

}

#read_blog {

    grid-area: read_blog;

}

#loading {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 3rem;
    width: 3rem;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

}

@keyframes load {

    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg);
    }

}

@media(max-width:800px) {

    :root {

        font-size: 5vw;
        --orange: #ff8a00;
        --green: #189572;

        /*NAVIGATION BAR*/
        --nav-height: 3rem;
        --nav-menu-top: 2.2rem;
        --nav-margin-bottom: 0rem;

        /*HEADER*/
        --header-margin-bottom: 2rem;
        --header-font: 3rem;

        /*SEARCH MENU*/
        --menu-width: 95%;
        --menu-margin: calc((100% - var(--menu-width))/2);
        --search-row: 1.5rem;
        --search-font: 1.1rem;
        --search-border-width: 0.1rem;
        --search-gap: 0.1rem;
        --accept-clear-cancel-height: 0.8rem;
        --accept-clear-cancel-font: 0.75rem;
        --chosen-font: 0.6rem;
        --menu-top: calc(var(--search-row) + 0.1rem);
        --option-font: 1rem;

        /*JOB DESCRIPTION*/
        --job-description-font: 1rem;


        /*MOSAIC*/
        --mosaic-margin-top: 7rem;
        --mosaic-margin-bottom: 1rem;
        --mosaic-width: 75%;
        --mosaic-column: 25vw;
        --mosaic-grid-gap: 0.1rem;

    }


    h1 > img {
        position: static;
    }

    /*SEARCH MENU*/

    #menu_wrapper {

        font-weight: 600;
    }


    #submit_button {

        height: 100%;
        width: 100%;
        text-align: center;
    }


    #nav_menu {}

    #menu {

        width: 100%;
    }

    #search_container svg {
        display: none;

    }

    .industry_buttons {
        font-size: 0.65rem;
        box-shadow: 0.07rem 0.07rem rgb(150, 150, 150);
        font-weight: 600;

    }

    #content {
        width: 95%;
        margin-right: 2.5%;
        padding: 0;
    }

    .apply {
        height: auto;
        margin-bottom: 1rem;
    }

    /*MOSAIC*/
    #mosaic {
        width: 95vw;
        margin-right: 2vw;
        margin-left: 2vw;
        grid-template-columns: 95vw 95vw 95vw;
        grid-template-areas:
            " search_work "
            "publish "
            "read_blog "
        ;
        background-image: linear-gradient(to right, aliceblue 10%, 10%, var(--orange) 10%, 90%, aliceblue 90%);
        grid-row-gap: 0.1rem;
    }

    .menu {
        grid-template-columns: repeat(3, 32%);


    }

    .search_buttons {
        text-align: center;

    }
}