html, body {
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding:0;
    background-image: url(assets/streetend.png);
    background-size: cover;
    background-attachment: fixed;
    font-family: Nosutaru;
}

@font-face {
    font-family: Nosutaru;
    src: url(fonts/Nosutaru-dotMPlusH-10-Regular.ttf);
}

.flexbox {
    display: flex;
    width: 70%;
    margin: auto;
    margin-top: 2%;
}

ul li::marker {
  content: "";
  font-size: 1.5rem;
  margin: 0;
}

ul {
    list-style: none;
    padding-left: 0;
}

ul a {
    font-size: 1.5rem;
    text-decoration: none;
    color: darkpurple;
}

ul a:before {
    content: "♪";
    font-size: 1.5rem;
}

nav {
    background-color: rgba(227, 242, 239, 0.738);
    height: 80vh;
    overflow-y: auto;
    width: 15%;
    max-height: 80vh;
    height: auto;
    padding: 4px;
    border: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #430fff 0%, #4855ff 25%, #3398fd 50%, #69cbec 75%, #53dee5 100%);
}



/* Styles applied when hovering over the image */
nav img {
    justify-content: center;
    filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(-1px 1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 -1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(1px -1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(-1px -1px 1.5px rgba(255, 255, 255, 0.737));           

}

/* holds the right container with the links. doesn't scroll automatically but you can uncomment overflow-y auto if you want it to scroll!*/

.right-nav {
    background-color: rgba(227, 242, 239, 0.738);
    width: 60%;
    margin-bottom: 1vh;
    padding: 2px;
    height: 29.5vh;
    /* overflow-y:auto; */
    border: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #430fff 0%, #4855ff 25%, #3398fd 50%, #69cbec 75%, #53dee5 100%);
}

/* this is the main content container. it's used for everything but the gallery (or is intended to be. you can reuse the gallery container later if you want to */

.main-container {
    width: 50%;
    min-height: 80vh;
    height: auto;
    margin-left: 1vw;
    margin-right: 1vw;
    height: 80vh;
    
}

/*right side div*/

.right-container {
    min-height: 80vh;
    width: 30%;
    height: auto;
}

/* this is the header and the class used to keep headers consistent across pages */

header {
    background-color: rgba(227, 242, 239, 0.738);
    margin-bottom: .5vw;
    border: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #430fff 0%, #4855ff 25%, #3398fd 50%, #69cbec 75%, #53dee5 100%);
    font-size: 1.5rem;
    padding-right:4px;
    padding-left:4px;
}

/* this is the subcontainer for the main-content container */


.main-content-container {
    background-color: rgba(227, 242, 239, 0.738);
    overflow-y: auto;
    padding: 6px;
    height: 74vh;
    max-height: 80vh;
    border: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #430fff 0%, #4855ff 25%, #3398fd 50%, #69cbec 75%, #53dee5 100%);
}


/* the image class for the ticket */

.ticket {
    width: 90%;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* this holds the gallery container, art content container, and the header container. it is important for the width of that container */

.art-container {
    width: 70%;
    min-height: 80vh;
    height: auto;
    margin-left: 1vw;
    margin-right: 1vw;
    height: 80vh;
    
}

/* this container is different from the art-container due to it only holding the gallery container itself */

.art-content-container {
    background-color: rgba(227, 242, 239, 0.738);
    overflow-y: auto;
    padding: 4px;
    padding: 2px;
    height: 74vh;
    max-height: 80vh;
    border: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #430fff 0%, #4855ff 25%, #3398fd 50%, #69cbec 75%, #53dee5 100%);
}

/* this is the style for every image
the shadow will also be applied to transparent pngs */

.gallery img {
    justify-content: center;
    height: 180px;
    margin: 10px;
    filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(-1px 1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(0 -1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(1px -1px 1.5px rgba(255, 255, 255, 0.737)) 
    drop-shadow(-1px -1px 1.5px rgba(255, 255, 255, 0.737));     
        
}

/* Styles applied when hovering over the image */
.gallery img:hover {
  transform: scale(1.1); /* Makes the image 20% bigger (1.2 times its size) */
    transition: transform 0.6s; /* Smooth transition for the scaling effect */
}

/* this is the container that holds the images this only holds the images*/
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin: auto;
}


/* media queries for smaller devices
mostly breaks the flexbox at certain points
and has some of the containers display full width
for easier mobile viewing */
@media (max-width: 768px) {
    .flexbox {
        flex-direction: column;
    }


    .right-container {
        width: 100%;
    }

    
    .main-container {
    width: 100%;
    }

    .right-container
    {
        display: flex;
    }

    .right-nav {
     max-width: 40%;
     margin-top: 8px;
     margin-left:9px;
    }

    .tickets {
        max-width: 70%;
        margin-top: 10px;
        margin-left: 1em;
    }

    .topdoll {
        float:right;
        width:70%;
    }

    nav {
        width: 100%;
        margin-bottom: 4px;
    }

    .art-container {
        width: 100%;
    }
}