/* colors, accessed with var(--name); */
:root{
    --black: #0e0d1d;
    --blue: #4dc4e7;
    --dark_blue: #2c2f8a;
    --green: #81caa5;
    --light_pink: #f2c9df;
    --orange: #fa775c;
    --pink: #f06ca6;
    --purple: #918df0;
    --yellow: #f9f17f;
}

body{
    background-color: var(--dark_blue);
    font-family: "loos-condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}

.container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* subject to change */
    /* padding-bottom: 180px;  */
    z-index: 0;
    /* background-image: url('Images/BarredGradient.png'); */
    background-size: 70%;
    background-position: bottom;
    background-repeat: repeat-x;
}

h2{
    font-family: "loos-normal", sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 42px;
}

h3{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 36px;
}

/* used for "GO TO A115" */
h3.goTo{
    font-weight: 200;
    margin-top: -1.25rem;
}

/* used for Senior Showcases and Courses */
h3.regLinks, h3.notLink {
    font-weight: 400;
    text-transform: none;
    margin-bottom: 1.25rem;
}

h3.regLinks:hover{
    text-decoration: underline;
    cursor: pointer;
}

.pageHeader{
    grid-area: pageHeader;
    color: white;
    margin-bottom: 2rem;
    width: 70%;
}

/* used in nav bar */
h4{
    font-size: 22px;
    font-weight: 200;
    padding-right: 1.5rem;
    color: white;
    margin-top: .75rem;
    margin-bottom: .75rem;
}

h4:hover{
    text-decoration: underline;
    font-weight: 400;
    cursor: pointer;
}

/* CommWorks 2026 */
h4.home{
    font-weight: 400;
    text-transform: uppercase;
}

h4.home:hover{
    font-weight: 500;
}

p{
    font-size: 20px;
    line-height: 30px;
}

/* opacity of top and buttons are 80%*/
.top, .btn{
    background-color: #6c68d3cb;
}

.top{
    position: sticky;
    top: 0;
    padding-left: 60px;
    padding-right: 60px;
    align-items: center;
    z-index: 10;
}

.top > div{
    display: flex;
    flex-direction: row;
    height: fit-content;
    flex-wrap: wrap;
}

.top > div > a, #btns > div > a{
    text-decoration: none;
    color: white;
}

.inside > a{
    text-decoration: none;
    color: var(--dark_blue);
}

.pieces > h3{
    color: white;
    margin-bottom: 3rem;
}

.twoCol{
    margin: 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
    "commworks commworks"
    "welcome btns";
    grid-gap: 6%;
}

.threeCol{
    margin: 8%;
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
    "pageHeader pageHeader pageHeader"
    "window1 window2 window3";
    grid-gap: 4%;
}

.oneCol{
    margin: 8%;
    margin-top: 3rem;
}

.oneCol > .pageHeader{
    margin-top: 5rem;
}

.pieces{
    margin-top: 6rem;
}

.spacer{
    height: 3rem;
    width: 100%;
}

#commworks{
    grid-area: commworks;
    width: 100%;
    margin-bottom: 3%;
    margin-top: -1%;
}

#welcome{
    grid-area: welcome;
    display: grid;
    grid-template-rows: auto 1fr;
    color: var(--dark_blue);
    background-image: linear-gradient(to right, var(--pink), var(--purple), var(--green));
    padding: .9rem;
    padding-top: 0rem;
    height: fit-content;
}

#welcome > .inside{
    padding-bottom: 5rem;
}

.window1, .window2, .window3{
    display: grid;
    grid-template-rows: auto 1fr;
    color: var(--dark_blue);
    padding: .9rem;
    padding-top: 0rem;
    height: fit-content;
}

.window1{
    grid-area: window1;
    background-color: var(--pink);
}

.window2{
    grid-area: window2;
    background-color: var(--purple);
}

.window3{
    grid-area: window3;
    background-color: var(--green);
}

.window1 > .min_max_close{
    background-image: none;
    background-color: var(--pink);
}

.window2 > .min_max_close{
    background-image: none;
    background-color: var(--purple);
}

.window3 > .min_max_close{
    background-image: none;
    background-color: var(--green);
}

.min_max_close{
    display: flex;
    flex-direction: row-reverse;
    background-image: linear-gradient(to right, var(--pink), var(--purple), var(--green));
    height: auto;
    margin-top: .4rem;
    margin-bottom: .4rem;
    align-items: center;
}

.min_max_close > img {
    height: 18px;
    margin-left: 15px;
}

.inside{
    background-color: white;
    margin: 0;
    padding: 1.5rem;
    padding-bottom: 2rem;
    height: auto;
}

.inside > p{
    margin-top: -1rem;
    margin-bottom: .25rem;
}

.inside > h2, .inside > h3, .inside > a > h3{
    margin-top: -.25rem;
}

#btns{
    grid-area: btns;
    color: white;
    margin-top: 1.3rem;
    padding-bottom: 16%;
}

.btn{
    display: grid;
    grid-template-columns: 6rem 20rem;
    grid-gap: .5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem; 
}

.btn:hover{
    cursor: pointer;
    background-color: var(--purple);
}

.btn:hover > div > h3{
    font-weight: 500;
}

.btn > div > h3 {
    font-weight: 400;
}

.btn > div > img{
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 1rem 0rem 0rem 1rem;
}

div.label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

/* Responsive Design */
@media only screen and (max-width: 1150px){
    .threeCol{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "pageHeader pageHeader"
        "window1 window2"
        "window3 none";
        padding-bottom: 16rem;
    }

    .window3{
        margin-top: 1.15rem;
    }
}

@media only screen and (max-width: 920px){
    .twoCol{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "commworks"
        "welcome"
        "btns";
    }

    #btns{
        margin-top: 0rem;
    }

    .threeCol{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto; 
        grid-template-areas: 
        "pageHeader"
        "window1"
        "window2"
        "window3";

    }

    .window3{
        margin-top: 0rem;
    }
}

@media only screen and (max-width: 580px){
    .pageHeader{
        width: 100%;
    }
}



/* GalleryPopups */
.contentBox{
    margin: 0rem;
    padding: 0rem;
    height:fit-content;
}

/* gallery formatting */
.gallery_desktop{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
}
.gallery_tablet{
    display:none;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
}
.gallery_desktop > div, .gallery_tablet > div{
    height: auto;
}
.gallery_phone{
    display:none;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
}
.gallery_desktop > div > div > img, .gallery_tablet > div > div > img, .gallery_phone > div > div > img{
    padding: 0;
    margin-bottom: 2rem;
    width:100%;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
}
.gallery_desktop > div > div > img:hover, .gallery_tablet > div > div > img:hover, .gallery_phone > div > div > img:hover{
    cursor: pointer;
}

/* Popup formatting */
.content{
    padding: 18px;
    font-family: "loos-condensed", sans-serif;
    background-color: white;
    color: var(--black);
}
.content.popUpBox{
    width: 700px;
    height: auto;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.212);
    margin: auto;
    border-radius: 10px;
    z-index: 10;
    display: none;
    position: fixed;
    top: 15vh;
    left: 0;
    right: 0;
    padding: 36px;
    padding-right: 20px;
}
.afterTitle{
    height: auto;
    max-height: min(800px, 80vh - 200px);
    overflow-y: auto;
    padding-right: 10px;
}
.closeBtn{
    float: right;
    display: block;
    margin-right: 16px;
}
.closeBtn > img{
    width: 15px;
}
.closeBtn:hover{
    cursor: pointer;
}
.purple{
    color: var(--green);
}
h1.popUpBox{
    font-size: 45px;
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 115%;
    font-weight: 900;
}
h3.popUpBox{
    font-size: 20px;
    color: rgb(90, 90, 90);
    padding-bottom: 10px;
    font-weight: 900;
    line-height: 150%;
}
img.popUpBox{
    width: 100%;
    height: auto;
}
iframe.popUpBox{
    width: 100%;
}
iframe.popUpBox.video{
    aspect-ratio: 4/3;
}
iframe.popUpBox.pdf{
    aspect-ratio: 1/1;
}
iframe.popUpBox.audio{
    aspect-ratio: 8/1;
    border-radius: 10px;
}
p.popUpBox{
    font-size: 15px;
    color:rgb(118, 118, 118);
    line-height: 130%;
    font-weight: 200;
    margin-bottom: 0;
    display: block;
}
a{
    color: var(--dark_blue);
}
p.content.popUpBox > a:visited{
    color: #563371;
}

/* Responsive Design */
@media only screen and (max-width: 1000px){
    .content.popUpBox{width: 70%;}
    img.popUpBox{width: 100%;}
    iframe.popUpBox{width: 100%;}
}
@media only screen and (max-width:800px){
    .gallery_desktop, .gallery_phone{
        display:none;
    }
    .gallery_tablet{
        display: grid;
    }
    h1.popUpBox{font-size: 35px;}
    h3.popUpBox{padding-bottom: 5px;}
}
@media only screen and (max-width:550px){
    .contentBox{
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
    .content.popUpBox{
        padding: 18px;
        width: 85%;
    }
    .gallery_desktop, .gallery_tablet{
        display:none;
    }
    .gallery_phone{
        display:grid;
    }
    h1.popUpBox{
        font-size: 25px;
        margin-bottom: 14px;
    }
    h3.popUpBox{
        font-size: 16px;
    }
    p.content.popUpBox{font-size: 12px;}
}