/*variables!*/
    *{
        --neongreen: #00FF00;
        --green: #00bb00;
        --darkgreen: #005500;
        --transition: all 0.5s;
        --full: span 12;
        --white: #FFFFFF;
        --black: #000000;
    }
/*html*/
    html{
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }
/*scrollbar*/
    ::-webkit-scrollbar {
        width: 18px;
        border: 1px solid var(--black);
    }
    /* Track */
    ::-webkit-scrollbar-track {
        background-color: var(--darkgreen);
        border-radius: 5px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background-color: var(--green); 
        border-radius: 5px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--white); 
    }

/*body*/
    body{
        background-image: url(Misc/gradient2.png), url(Misc/gradient.png);
        background-position: top, bottom;
        background-repeat: repeat-x, repeat-x;
        background-color: var(--black);
        margin: 0;
        padding: 0;
    }
    p{
        color: white;
        font-size: large;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    img{
        min-width: 100px;
        max-width: 960px;
        border-radius: 2px;
    }

/*wrapper id*/
    #wrapper{
        margin: 1em auto;
        min-width: 400px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    #ArtWrapper{
        margin: 1em auto;
        width: 960px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

/*google font Bruno Ace SC*/
    .bruno-ace-sc-regular {
        font-family: "Bruno Ace SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        }

/*header*/
    header{
        grid-column: var(--full);
    }
    h1{
        font-family: "Bruno Ace SC", sans-serif;
        margin: 300px auto 20px;
        font-size: 2.6em;
        text-shadow: -3px -3px 0 var(--darkgreen), 3px -3px 0 var(--darkgreen), -3px 3px 0 var(--darkgreen), 3px 3px 0 var(--darkgreen);
    }
    h1 a{
        color: var(--white);
        width: 100%;
        margin: 0 auto;
        text-decoration: none;
        transition: var(--transition);
    }
    h1 a:hover{
        text-shadow: -3px -3px 0 var(--green), 3px -3px 0 var(--green), -3px 3px 0 var(--green), 3px 3px 0 var(--green);
    }
    h2, h3, h4, h5, h6{
        color: var(--white);
        font-family: "Bruno Ace SC", sans-serif;
        text-align: center;
        width: 100%;
        grid-column: var(--full);
        margin: 0px 0 20px;
    }
    h2{
        border-radius: 10px;
        width: fit-content;
        margin-left: auto; margin-right: auto;
        padding: 10px 15px;
        font-size: 2em;
        background-color: var(--darkgreen);
    }
    h3{
        text-align: left;
        font-size: 1.5em;
    }
    h4{
        font-size: 1.2em;
    }

/*navigation*/
    nav {
        position: fixed;
        z-index: 9;
        top: 0; left: 0; right: 0;
        background-color: #00000080;
        border-radius: 0px 0px 20px 20px;
        font-family: "Bruno Ace SC", sans-serif;
        height: auto; 
    }
    nav ul {
        margin: 0;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        height: 80%;
        list-style-type: none;
    }
    nav li a {
        color: var(--white);
        font-size: x-large;
        text-decoration: none;
        display: block;
        padding: 15px;
        background-color: #003300;
        text-align: center;
        transition: var(--transition);
        border-radius: 5px;
        height: 80%;
    }
    nav li a.active, nav li a:hover:not(.active) {
        background-color: var(--green);
        font-size: 30px;
    }

.desktopNav{
    display: block;
}
.mobileNav{
    display: none;
}
@media screen and (min-width: 768px) {
  .desktop-nav { display: flex; }
  .mobile-nav { display: none; }
}

/*responsive*/  
@media (max-width: 600px) {
    nav ul {
        grid-template-columns: 1fr; /* Stack items in a single column */
    }
    .dropdown-content {
        position: relative; /* Push content down instead of overlapping */
        width: 100% !important;
    }
    iframe {width: 100%; min-width: 100%;} /* Fixed min-width to prevent overflow */
    p {font-size: 20px;}

        p {font-size: 20px;}
    }
    @media (min-width: 1024px) {
        nav {height: 70px;}
        nav ul {
            grid-template-columns: repeat(4, 1fr);
            padding: 0;
            height: 100%;
            gap: 0px;}
        nav li a {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;}
        h1{margin: 150px auto 50px auto; width: 60%; font-size: 5em;}
        .dropdown-content{width: 25% !important;}
        #wrapper{width: 960px; max-width: 960px;}
    }

/*dropdown menu*/
    .dropdown {
        transition: var(--transition);
    }
    .dropdown .dropbtn { 
        border: none;
        outline: none;
        color: white;
        background-color: #003300;
        font-family: inherit;
        transition: var(--transition);
    }
    .dropdown-content {
        display: none;
        font-size: 28px;
        position: absolute;
        margin: 0px 0px 0px 0px;
        z-index: 1;
        width: 48%;
    }
    .dropdown-content a{
        float: none;
        color: #ffffff;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .dropdown-content a:hover {
        font-size: 30px;
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }

/*heading classes*/
    .standard2{
        text-align: center;
        color: white;
        font-size: x-large;
        grid-column: var(--full);
        background-color: var(--darkgreen);
        border-radius: 20px;
        margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
        width: fit-content; padding: 10px;
        box-shadow: 0px 5px #00330073;
    }

/*aside*/
    aside{
        color: var(--white);
        word-spacing: 5px;
        grid-column: span 8;
        padding: 0px 0px;
        position: relative;
        z-index: 3;
        line-height: 1.5;
        margin-top: 0 !important;
    }
    aside h2{
        margin-top: 0px; margin-bottom: 25px;
        font-size: 38px;
    }
    aside h3{
        font-size: xx-large;
    }
    aside p, aside ul li{
        padding-right: 0px;
        font-size: x-large;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
/*image next to aside*/
    .HomepageMe{
        width: 500px;
        margin: 40px 0 0 20px;
        grid-column: span 4;
    }

/*section classes*/
    /*darwin*/
    .section1{
        grid-column: var(--full);
        display:flex;
        justify-content: center;
        margin-left: auto; margin-right: auto;
    }
    /*booth*/
    .section6{
        grid-column: var(--full); width: 80%;
        padding: 50px 20px;
        margin-top: 10px; margin-bottom: 10px;
        margin-left: auto; margin-right: auto; 
        color: var(--white);
        background-color: var(--green);
        border: var(--white) solid 3px;
        border-radius: 20px;
        padding-top: 15px; padding-bottom: 15px;
    }

/*main*/
    main{
        grid-column: var(--full);
        padding: 50px 20px;
        width: 80%;
        margin: 10px auto;
        color: var(--white);
        position: relative;
        z-index: 1;
        align-items: center;
    }
    .main2{
        padding: 30px 0px 30px 0px;
        background-color: var(--green);
    }
    .main3{
        padding-top: 15px; padding-bottom: 15px;
        margin: 10px auto 0 auto;
    }
    main a{
        color: var(--green);
        text-decoration: none;
        transition: var(--transition);
    }
    main a:hover{
        color: var(--neongreen);
    }

/*box class*/
    .box{
        width: 350px;
        font-size: x-large;
        color: var(--white);
        margin: 40px 0px 0px 430px;
        text-align: center;
        background-color: var(--darkgreen);
        border-radius: 20px;
        padding: 10px;
        box-shadow: 0px 5px #00330073;
    }
    .box a{
        color: var(--green); text-decoration:none;
        transition: var(--transition);
    }
    .box a:hover{
        color: var(--neongreen); 
    }
    .box2{
        width: 94%;
        margin-left: 15px; margin-top: 0px; margin-bottom: 10px; margin-right: 5px;
        padding: 10px;
    }
    .box2 p{
        padding: 0px; margin: 0px;
    }
    .box3{
        margin-left: 450px; margin-top: 10px;
    }
    .box4{
        margin-left: 540px; margin-top: 0px;
        width: 360px;
    }
    .box5{
        margin-left: auto; margin-right: auto; margin-bottom: 10px; margin-top: 5px;
        grid-column: var(--full);
        padding: 10px; font-weight: bold;
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box6{
        grid-column: var(--full);
        width: 70%;
        margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 10px;
        padding: 10px;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        background-color: var(--darkgreen);
        border-radius: 20px;
        font-size: x-large; color: var(--white);
    }
    .box6 p{
        margin: 0px; padding: 0px;
    }
    .box7{
        font-size: x-large; font-weight: bold;
        color: var(--white);
        text-align: center;
        background-color: var(--darkgreen);
        border-radius: 20px;
        padding: 10px;
        margin-left: auto; margin-right: auto; margin-bottom: 0; margin-top: 10px;
        grid-column: var(--full);
        width: fit-content;
        display: flex; justify-content: center; align-items: center;
    }

/*image in art*/
    .container{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .section{
        -ms-flex: 32%;
        flex: 32%;
        max-width: 32%;
        padding: 0 4px;
        margin: 0 auto;
        transition: var(--transition); 
    }
    .section img {
        margin-top: 10px;
        vertical-align: middle;
        width: 100%;
        border: 3px solid transparent;
        transform: scale(1);
        transition: var(--transition);
    }
    .section img:hover{
        transition: var(--transition);
        border: 3px solid var(--neongreen);
        transform: scale(1.2);
    }
    .bigBlock{
        display: block;
        margin: 0 auto;
        width: 80%; 
        transition: var(--transition);
        border: 3px solid transparent;
    }
    .bigBlock:hover{
        border: 3px solid var(--green);
    }
    #Concepts, #Sturgeon{
        margin-top: 100px;
    }

    .games{
        grid-column: var(--full);
        margin: 0px auto 0px;
        width: 90%;
        color: white;
    }
    .games p{
        font-size: 20px;
    }
    .gamesP{
        width: 40%;
        margin: 20px auto 20px;
        padding: 10px 5px;
        border-radius: 2px;
        text-align: center;
        background-color: white;
        color: var(--darkgreen);
        animation: glowAni 3s infinite;
    }
    @keyframes glowAni {
        0% {background-color: var(--white);}
        50% {background-color: var(--green);}
        100% {background-color: var(--white);}
    }
    .fadeWrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 50;
    }
/*games section on the game design page*/
    .games a{
        color: var(--green);
        text-decoration: none;
        transition: var(--transition);
    }
    .games a:hover{
        color: var(--neongreen);
    }
    .games iframe{
        margin: 20px 0 30px;
        display: block;
        min-width: 550px;
        border: none;
    }
    .gamesFrame{
        margin-bottom: 100px;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
    .gamesFrame iframe{
        margin: 20px 0px;
    }
    .gamesFrame img{
        min-width: 500px;
    }
    .gamesFrame p{
        margin: 40px 0 0 20px;
        min-width: 300px;
        width: 50%;
        font-size: 18px;
        font-style: italic;
        vertical-align: middle;
    }
/*games carousel at the bottom of the games page*/
    .GamesCarousel{
        max-width: 60%;
        margin: 20px auto 0;
    }
    
/*image*/
    /*carousel in homepage.html (old verion with the pumpkin guy)*/
    .floatimageleft{
        float: left;
        width: 320px;
        margin-left: 90px;
        border-radius: 20px;
        box-shadow: 0px 5px #00330073;
        }
    .image{
        grid-column: span 6;
        position: relative;
        margin: 20px 10px;
        padding: 0px;
        width: 400px;
        border-radius: 20px;
    }
    /*mystic mana mania*/
    .mysticMana{
        margin: 4px;
        width: 276px; height: 300px; object-fit: cover;
        border: #00000082 solid 3px;
        border-radius: 20px;
        box-shadow: 0px 5px #00330073;
        transition: var(--transition);
    }
    .mysticMana:hover{
        border: var(--neongreen) solid 3px;
    }
    /*darwin*/
    .darwin{
        width: 300px; height: 190px; object-fit: cover;
        margin-left: 5px; margin-right: 5px; margin-bottom: 10px;
        border: var(--darkgreen) solid 3px;
        border-radius: 20px;
        transition: var(--transition);
    }
    .darwin:hover{
        border: var(--neongreen) solid 3px;
        margin: 0px; width: 325px; height: 200px;
    }

/*grad1 class*/
    .grad1 {
        grid-column: var(--full);
        height: 10px; width: 100%;
        display: flex; justify-content: center;
        margin-left: auto; margin-right: auto; margin-top: 80px; margin-bottom: 80px;
        background-image: linear-gradient(to right,black, #00ff0050, #00ff0050,black);
    }

/*carousel*/
    #myCarousel {
        margin-bottom: 24px;
        grid-column: var(--full);
    }
    #myCarousel .f-carousel__slide {
        text-align: center;
        padding: 0px;
    }
    .f-carousel {--f-button-width: 38px;--f-button-height: 38px;--f-button-svg-width: 16px;--f-button-svg-height: 16px;--f-button-svg-stroke-width: 2.5;--f-button-color: var(--green);--f-button-border-radius: 50%;--f-button-shadow: 0px 5px #00330073;--f-button-bg: var(--white);--f-button-hover-color: var(--darkgreen);--f-button-hover-bg: var(--neongreen); --f-button-active-bg: var(--neongreen);--f-button-transition: var(--transition);}

/*footer*/
    footer{
        display: grid;
        grid-template-columns: 1fr 1fr;
        color: var(--white);
        width: 100%;
        overflow-x: hidden;
        margin: 50px auto 0;
        padding: 30px 0px 40px 0;
        height: 320px;
        background-color: #002704b3;
        border-radius: 20px 20px 0 0;
    }
    footer p{
        font-size: x-large; 
        margin: 0px 0px 0 auto;
    }
    footer a{
        color: var(--green);
        width: 50%;
        margin: 15px auto;
        text-decoration: none;
        font-size: x-large;
        transition: var(--transition);
    }
    footer a:hover{
        color: var(--white);
    }
    footer h3{
        text-align: center;
        margin-bottom: 0;
        font-size: xx-large;
    }
    .footerLeft{
        line-height: 2;
        grid-column: 1;
        display: block;
        margin: 0px 0px 0px auto;
        padding: 0 0 0 50px;
    }
    .footerRight{
        grid-column: 2;
        width: 100%;
        margin: 0px auto;
        padding: 130px 0 0 200px;
    }