body {
    margin: 0;
    padding: 0;
    padding-top: 75px;
    padding-bottom: 150px;
        
    
    /* background-color: #DEDDDB; */
    background-color: white;
    

}

.bottomBar{
    display: flex;
    height: 75px;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: black;
    margin-bottom: 0;
    bottom: 0;
}
.navBar {

    display: flex;
    height: 75px;
    justify-content: space-between; /* logo left, links right */
    align-items: center;
    padding: 0 50px; 
    background-color: black; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-sizing: border-box; /* important for padding */
}

.navBar .logo {
    font-size: 32px;
    font-weight: 900;
    color: white;
    margin: 0;
    transition: color 1s;
}

/* .navBar .logo:hover{
    color: red;
} */

.navList {
    list-style: none;
    display: flex;
    gap: 20px; /* space between links */
    margin: 0;
    padding: 0;
    font-family: "Jura", sans-serif;
}

.navList li a {
    text-decoration: none;
    color: white;
    font-size: 25px;
    font-weight: 600;
    transition: color 1s;
}

.navList li a:hover {
    color: red;
}

/* Make it responsive */
@media screen and (max-width: 768px) {
    .navBar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .navList {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .navList li a {
        font-size: 20px;
    }
}


.heady{
    margin-top: 40px;
    align-items: center;
    text-align: center;
    /* margin-bottom: 0; */
    /* margin-top: 0; */
    height: 10vh;
}

.heady > h1 {
    font-size: 70px;
}

.container {
    width: 100%;
    height: 90vh;
    /* background: #f2e9ff; */
    display: flex;
    align-items: center;
    justify-content: center;


}

h1{
    padding-top: 0;
  font-family: "Jura", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 60px;
  margin-bottom: 0;
  margin-top: auto;
  /* padding-left: ; */
  letter-spacing: -2px;
}

.gallery {
    /* padding: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
}

h3{
    margin-bottom: 0px;
    margin-top: 0px;
    font-family: "Jura", sans-serif;
    /*font-optical-sizing: auto;*/
    /* font-weight: 700; */
    font-style: normal;
    margin-bottom: 0;
    margin-top: auto;
    padding-left: 5%;
    stroke:black;
    text-shadow: 0px 0px 20px black;
    font-size: 25px;
    opacity: 100%;

}

/* .img-box:hover h3{
    font-size: 75px;
    transition: font-size 0.5s;
} */

.img-box{
    text-align: left;
    /* font-size: 40px; */
    width: 25vw;
    height: 60vh;

    /* border-radius: 20px; */
    background-size: cover;
    background-position: 50% 35%;
    color: white;
    position: relative;
    transition: height 0.5s;
    transition: width 0.5s;

}

#event.img-box{
    background: url(jungle_strike/JungleStrikePosterFinal.png);
    background-size: cover;
    background-position: 50% 35%;
    /* border-top-left-radius: 20px;
    border-top-right-radius: 20px; */
}

#branding.img-box{
    background:url(PSH/CarWithBorder.png);
    background-position: 50% 50%;
    background-size: cover;
}

#threeD.img-box{
    background:url(blender/screenshot.png);
    background-position: 50% 50%;
    background-size: cover;
    /* border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; */
}

#webDev.img-box{
    background:url(dev/webdev.webp);
    background-position: 50% 20%;
    background-size: cover;
    height: 27vh;
    /* border-top-left-radius: 20px;
    border-top-right-radius: 20px; */
}

#webDev{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#cyber.img-box{
    background:url(dev/cyber.jpg);
    background-position: 50% 20%;
    background-size: cover;
    height: 27vh;
    /* border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; */
}

#cyber{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.img-box h3{
    top: 10px;
    /*left: 5 px;*/
    position: absolute;
    /*opacity: 100;*/
    
}

.img-box:hover{
    height: 60vh;
    width: 30vw;
    cursor: pointer;
}

#cyber.img-box:hover{
    height: 44vh;
}

#webDev.img-box:hover{
    height: 44vh;
}

.shad{
    background-color: black;
    height: 100%;
    width: 100%;
    opacity: 75%;
    transition: opacity 0.5s;
}

/* #webDev.shad{
    background-color: black;
    height: 100%;
    width: 100%;
    opacity: 75%;
    transition: opacity 0.5s;
} */



.shad:hover{
    opacity: 50%;
}

#event{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /* border-top-right-radius: 20px; */
}

#threeD{
    /* border-bottom-left-radius: 20px; */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* #event.img-box:active{
    height: 60vh;

} */









/* EVENT PAGE */

.eventsPage {
    /* padding-left: 50; */
    display:inline;
    /*align-items: center;*/
    width: 80%;
    height: 100vh;
    /* background-color: blue ; */
    /*justify-content: center;*/
}

.posterSection {
    display: flex;
    margin-right: 100px;
}

.jsp {
    padding-left: 20px;
}

.videoSection{
    display: flex;
    /*align-items: right;*/
    /*justify-content: right;*/
}


/* Carousel */

.carousel {
    width: 100%;
    overflow-x: auto;
    margin: 3em auto;
    display: flex;
    /* gap: 1em; */
    justify-content: center;
}


.card {
    flex: 0 0 20em;
    height: 600px;
    background-color: white;
    padding: .5em;
    /* border-radius: .5em; */
    text-align: left;
    align-content: center;
}

h4{
    margin-bottom: 0px;
    margin-top: 0px;
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    color: black;
    /* font-weight: 700; */
    font-style: normal;
    margin-bottom: 0;
    margin-top: auto;
    padding-left: 5%;
    stroke:black;
    /* text-shadow: 0px 0px 20px black; */
    font-size: 25px;
    opacity: 100%;

}



p{
    font-family: "Jura", sans-serif;
    font-size:x-large;
    /*text-align: left !important;*/
    
}




.pageContent {
    padding: 0 10rem;  /* gives gap left/right */
    /* padding-bottom: 0; */
    text-align: left;
    box-sizing: border-box;  
    display: block;
}

.pageContent > h5 {
    color: red;
    font-family: "Jura", sans-serif;
    font-size: large;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.pageContent > h1{
    /*text-align: center;*/
    /*padding-top: 50px;*/
    /* padding-bottom: 0px; */
}

.blackBack{
    background-color: black;
}

.posterCard:hover{
    color: red;
}