body{
    background-image: url("Background.1.png");
    background-attachment: fixed;
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    color: #14003B;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    margin: 0px 160px;
}

#homeGrid{
    margin: 10px 160px 0px 160px;
}

/* ----------- NAV BAR CSS ----------- */
nav{
    margin: 0px;
    padding: 0px;
}

nav ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: left;
    align-items: left;
}

nav a{
    color: #14003B;
    text-decoration: none;
    padding: 0px 0px 0px 60px;
}

nav a:hover {
    color: #FF0055;
}

nav li{
    margin: 15px;
    font-weight: medium;
    font-size: 16px;
    display: flex;
    align-items: center;
}



.gif{
    background-image: url("NewLogo_DarkPurple\ copy.gif");
    width: 45px;
    height: 45px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* ----------- BODY CONTENT ----------- */
.filterBar{
    font-size: 20px;
    display: flex;
    justify-content: center;
    margin-top: 39vw;
}
.filterBar ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
}
.filterBar a{
    color: #14003B;
    font-weight: bold;
    text-decoration: none;
}
.acti a {
    color: #FF0055;
    text-decoration: underline;
}
.filterBar a:hover{
    color: #FF0055;
    text-decoration: underline;
}
.filterBar li{
    padding: 2.5vw;
}

#sizzle{
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;

}

video {
    width: 100%;        /* Stretch the video to fill the full width */
    height: auto;       /* Automatically adjust height to maintain the aspect ratio */
    object-fit: cover;  /* This will ensure the video covers the screen, cropping if necessary */
    position:absolute;    /* Optional: fix the video position on the screen */
    top: 100;
    left: 0;
    z-index: -1;        /* Optional: place the video behind other content */
  }

h1{
    margin: 40px;
    grid-column: 1/13;
    text-align: center;
    font-family: "shuriken-std", sans-serif;
    font-size: 64px;
}

h2{
    padding: 0px;
    margin: 0px;
    font-size: 33px;;
}


.projimage{
    grid-column: 1/7;
    background-color: #14003B;
    border-radius: 5px;
    margin-top: 50px;
    min-height: 20vw;
    background-size: cover;  /* Ensures the image covers the entire div */
    background-position: center center;  /* Centers the image within the div */
    background-repeat: no-repeat;  /* Prevents repeating the image */
    width: 100%;  /* Makes the div take up full width of its parent container */
}

.projdetails{
    grid-column: 7/13;
    margin-top: 50px;
    font-weight: lighter;
}

.projdetails p{
    margin-bottom: 30px;
}


.info{
    grid-column: 1/7;
    display: flex;
    flex-wrap: wrap;  /* Allows the items to wrap onto a new line when space is tight */
    justify-content: flex-start;  /* Aligns items to the start of the container */
    gap: 10px;
    align-items: flex-start;
    font-weight: lighter;
}

.aboutimg{
    grid-column: 8/13;
    background-color: #14003B;
    border-radius: 10px;
    background-image: url('photo_me.png');
    background-size: cover;  /* Ensures the image covers the entire div */
    background-position: center center;  /* Centers the image within the div */
    background-repeat: no-repeat;  /* Prevents repeating the image */
    width: 100%;  /* Makes the div take up full width of its parent container */
    height: 25vw;
}

.bak{
    grid-column: 1/13;
    text-align: left;
}

.video-embed{
    border-radius: 5px;
    overflow: hidden;  /* clips the video to the rounded corners */
}

.mogaf-gallery{
    grid-column: 1/7;
    position: relative;
    height: auto; /* Ensure proper aspect ratio */
    transform: translate(1px, 1px);
    width: 100%;
    padding-bottom: 40px;
}

.descrip-gallery{
    grid-column: 7/13;
    font-weight: lighter;
}


/* {{{ BUTTON CODE :: */

.projdetails a, .info a, .bak a{
    text-decoration: none;
    color: #14003B;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 20px;
    background-color: #F54882;
}

.info a{
    display: block;
}

.projdetails a:hover, .info a:hover, .bak a:hover{
    background-color: #FF0055;
}

footer{
    margin-top: 100px;
    font-size: 12px;
    font-weight: lighter;
}

footer p{
    padding: 50px;
    text-align: center;
}

button{
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    text-decoration: none;
    color: #14003B;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 20px;
    background-color: #F54882;
    border-width: 0px;
    font-size: 16px;
}
.aboutact{
    grid-column: 1/2;
    width: fit-content;
}

.aboutact a{
    width: fit-content;
}




/*---------------- STYLING FOR PROJECT PAGES ---------------- */
.introL{
    grid-column: 1/7;
    font-weight: lighter;
    margin-top: 100px;
}

.introR{
    grid-column: 7/13;
    font-weight: lighter;
    margin-top: 100px;
}

.wipDiv-1{
    grid-column: 1/13;
    margin-top: 100px;
    font-weight: lighter;
}

.wipDiv2-L{
    grid-column: 1/7;
    font-weight: lighter;
    padding-top: 20px;
}

.wipDiv2-R{
    grid-column: 7/13;
    font-weight: lighter;
    padding-top: 20px;
}

.wipDiv3-L{
    grid-column: 1/5;
    font-weight: lighter;
}

#JOA, #tama{
    margin-top: 100px;
}

.wipDiv3-M{
    grid-column: 5/9;
}

.wipDiv3-R{
    grid-column: 9/13;
}

.wipDiv-1 img, .wipDiv2-L img, .wipDiv2-R img, .wipDiv3-L img, .wipDiv3-M img, .wipDiv3-R img, .introR img, .introL img{
    border-radius: 10px;
}


#JOA-Vid-1, #JOA-Vid-2{
    position: relative;
    height: auto; /* Ensure proper aspect ratio */
    max-height: 500px;
    transform: translate(10px, 10px);
    width: 100%;
}

#JOA-Vid-1 video, #JOA-Vid-2 video{
    transform: translate(10px, 100px);
    width: 100%;
}

#JOAfoot{
    margin-top: 45vw;
}


#typeVid{
    transform: translate(2px, 31vw);
}
#typeVid h2{
    margin-top: 42.2vw;
    padding-bottom: 20px
}
#ctrlChaos{
    transform: translate(2px, 2px);
}
#ctrlChaos h2{
    margin-top: 40vw;
}

.surlyPitch{
    position: relative;
    height: auto; /* Ensure proper aspect ratio */
    transform: translate(1px, 1px);
    width: 100%;
    padding-bottom: 18vw;
}
.surlyAni{
    position: relative;
    height: auto; /* Ensure proper aspect ratio */
    transform: translate(1px, 1px);
    width: 100%;
    padding-bottom: 38vw;
}

.mogaf{
    grid-column: 1/6;
    position: relative;
    height: auto; /* Ensure proper aspect ratio */
    transform: translate(1px, 1px);
    width: 100%;
    padding-bottom: 80px;
}
.descrip{
    grid-column: 6/13;
    font-weight: lighter;
}
.spacing{
    grid-column: 1/13;
    height: 20px;
}

.phoLeft, .phoMiddle, .phoRight{
    padding-top: 20px;
}
.phoLeft img, .phoMiddle img, .phoRight img{
    margin-bottom: 20px;
    border-radius: 10px;
}
.phoLeft{
    grid-column: 1/5;
}
.phoMiddle{
    grid-column: 5/9;
}
.phoRight{
    grid-column: 9/13;
}



/* ---------------- PARAMETERS FOR NARROWER SCREENS ---------------- */
@media only screen and (min-width: 1600px){
    .grid{
        margin: 0px 17vw;
    }
    #homeGrid{
        margin: 5px 17vw 0px 17vw;
    }

    #JOAfoot{
        margin-top: 15vw;
    }
}

@media only screen and (max-width: 1050px){
    .grid{
        margin: 0px 120px;
    }
    #homeGrid{
        margin: 5px 120px 0px 120px;
    }
    .filterBar{
        font-size: 16px;
    }
    #JOAfoot{
        margin-top: 30vw;
    }
}

@media only screen and (max-width: 950px){
    .grid{
        margin: 0px 80px;
    }
    #homeGrid{
        margin: 5px 80px 0px 80px;
    }

    h1{
        font-size: 56px;
    }
    h2{
        font-size: 28px;
    }
    .introL, .introR, .wipDiv-1, #JOA, #tama{
        margin-top: 75px;
    }

    .filterBar li{
        padding: 1.5vw;
    }
}

@media only screen and (max-width: 750px){
    .filterBar{
        font-size: 12px;
    }
    .info{
        grid-column: 1/13;
    }
    .info p{
        margin-bottom: 30px;
    }
    .aboutimg{
        grid-column: 1/13;
        margin-top: 50px;
        height: 60vw;
    }

    .introL, .wipDiv-1, #tama{
        grid-column: 1/13;
        margin-top: 60px;
    }
    .introR, #JOA{
        grid-column: 1/13;
        margin-top: 20px;
    }
    .wipDiv2-L, .wipDiv2-R, .wipDiv3-L, .wipDiv3-M, .wipDiv3-R{
        grid-column: 1/13;
    }

    #JOA-Vid-1{
        grid-column: 1/7;
    }
    #JOA-Vid-2{
        grid-column: 7/13;
    }
    #JOA-Vid-1 video, #JOA-Vid-2 video{
        transform: translate(5px, 10px);
    }
    #JOAfoot{
        margin-top: 97vw;
    }

    .surlyPitch{
        padding-bottom: 40vw;
    }
}

@media only screen and (max-width: 575px){
    .grid{
        margin: 0px 20px;
    }
    #homeGrid{
        margin: 5px 20px 0px 20px;
    }

    a, p, li{
        font-size: 13px;
    }
    nav a{
        padding: 0px 15px;
    }
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 24px;
    }

    .projimage{
        grid-column: 1/13;
        margin-top: 20px;
        min-height: 35vw;
    }

    .projdetails{
        grid-column: 1/13;
        margin-top: 20px;
        margin-bottom: 80px;
    }

    .mogaf{
        grid-column: 1/13;
        padding-bottom: 5px;
    }
    .descrip{
        grid-column: 1/13;
    }
    .spacing{
        height: 30px;
    }

    .phoLeft{
        grid-column: 1/7;
    }
    .phoMiddle{
        grid-column: 7/13;
    }
}




/* ----------------- ADDING PHOTOS TO DIVS ----------------- */

#one{
    background-image: url('Tamagotchi_Card.png');
}

#two{
    background-image: url('Engine.png');
}

#three{
    background-image: url('Bug_Card_Display.png');
}

#four{
    background-image: url('JoanOA_Card.png');
}

#five{
    background-image: url('Ballad\ Bresilienne_Card.png');
}

#six{
    background-image: url('Logo_Card.png');
}

#seven{
   background-image: url('DDL_Card.png');
}

#eight{
    background-image: url('Infographic_Card.png');
}

#nine{
    background-image: url('UniNews_Card.png');
}

#ten{
    background-image: url('WHMP_Card.png');
}

#eleven{
    background-image: url('*CoachKiosk/Kiosk_Digitals.png');
}

#uno{
    background-image: url('FabMag_Card.png');
}
#dos{
    background-image: url('Dashboard_Card.png');
}

#tres{
    background-image: url('BeFa_Card.png');
}