:root {
    /* --gradient: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
    /* --gradient: #232946; */
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);
    --main-color: #232946;
    --secondary-color: #fffffe;
    --tertiary-color: #d1cfcf;
    --highlight-color: #eebbc3;
    --stroke-color: #121629;
    --stroke-light-color: #292d43d3;
  }
  html {
    font-size: min(16px, 2vw); /* 16px is the minimum font size */
  }
  .projection_control_container{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient);
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.projection_control_header{ 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    /* background-color: burlywood; */
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: var(--main-color)

    /* background-color: var(--stroke-color); */
}

.projector_control_body{
    display:grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 50vh 50vh;
    border: solid green 1px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 45px;
    left: 0;
}
.post_slide_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    /* background-color: burlywood; */
    width: 100%;
    height: 40px;
    /* position: absolute; */
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: var(--gradient);
    background-color: var(--stroke-color);
    margin-top: 10px;
}
.projector_control_body > div{
    border: solid black 1px;
    
}
.post_slide_body{
    /* width: 100%; */
    /* height: 100%; */
    /* border: solid red 1px; */
    overflow-y: auto;
    background: white;
    max-height: calc(100% - 50px);
}
.post_slide_body > div{
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.post_slides{
    grid-column: 1/2;
    grid-row: 1/3;
}
.preview_display{
    grid-column: 2/3;
    grid-row: 1/2;
    /* display: flex; */
}
.media_center{
    grid-column: 2/3;
    grid-row: 2/3;
}

.room_modal{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100000000000000000000000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
    justify-content: center;
    align-items: center;
}
.room_modal_content{
    width: 500px;
    height: 300px;
    background: var(--gradient);
    margin: 10px;
    padding: 5px;
    border-radius: 8px;
}
.room_content_content{
    display: flex;
    /* border: black solid; */
    width: 100%;
    height: auto;
    flex-direction: column;
    margin: 5px;
    padding: 5px;
}
.searchContainer{
    width: 100%;
}
@media only screen and (max-width: 600px) {
    .projector_control_body{
        grid-template-columns: 100vw;
        grid-template-rows: 30vh 70vh;
       
    }
    .post_slides{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .preview_display{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .media_center{
        display: none;
    }
}