:root {
  --link-color: black;
  --link-hover: grey;
}

body{
    margin: 0px;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}
/* .subnav li a{
    font-size: 1.5vw;
} */

.mininav{
    position: fixed;
    bottom: -50px; /* peek height */
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
    transition: bottom 0.3s ease;
    z-index: 1000;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.hover-strip:hover + .mininav{
    bottom:0;
}
.mininav:hover{
    bottom:0;
}
.mininav i {
  font-size: 2rem;
  cursor: pointer;
  margin-left: 1%;
  margin-right: 1%;
}
.hover-strip {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px; /* adjustable width */
    height: 100px;  /* vertical range for hover */
    z-index: 999;
}

.banner-image img:hover{
    bottom: 0;
}
    /* .offcolor{
        background-color: black !important;
        color: white;
    } */
     .offcolor{
        background-color: red !important;
        color: black;
    }

    .emphasis{
        background-color: white;
        color: black;
        border-radius: 10px;
    }

    /* .light {
        background-color: whitesmoke !important;
        color: black;
    } */

    .light .offcolor{
        background-color: red !important;
        color: black !important;
    }

    .light .emphasis{
        color: red;
        border-radius: 10px;
    }

    /* .light .nav-link a{
        color: black;
    } */
    .light .nav-selected{
        background-color: whitesmoke;
        color: black;
        font-weight: bold;
    }

    .dark {
        background-color: black !important;
        color: white;
        --link-color: white;
        --link-hover: grey;
    }

    .dark .offcolor{
        background-color: darkblue !important;
        color: white !important;
    }

    .dark .emphasis{
        color: blue;
        border-radius: 10px;
        background-color: black;
    }

    /* .dark .nav-link a{
        color: black;
    } */
    .dark .nav-selected{
        background-color: black;
        color: whitesmoke;
        font-weight: bold;
    }

    form {
        margin: 0% 5% 0% 5%;
    }

    h2 {
        margin-left: 5%;
        margin-right: 5%;
    }

    .flex-container {
      display: flex;
      flex-wrap: nowrap;
      margin: 30px;
    }

    .flex-container .box {
      background-color: #f1f1f1;
      width: 50%;
      margin: 20px;
      text-align: center;
      font-size: 30px;
      height: calc(100vh - 100px);
    }

    .flex-container .box .sub {
        height: 40%;
        width: 90%;
        margin: 5%;
        text-align: left;
        font-size:clamp(1rem,2vw,3rem);
        line-height: 200%;
    }
    .flex-container .box .sub-desc {
        height: 40%;
        width: 90%;
        margin: 5%;
        text-align: left;
        font-size:clamp(1rem,2vw,3rem);
        overflow-y: auto;
    }
    .banner {
        background-color: black;
        min-width: 100px;
        display: flex;
        align-items: center;
    }
    .banner-image{
        flex-basis: 5%;
        margin:1%;
    }
    .banner-text{
        flex-basis: 80%;
    }
    .banner-text h1{
        font-size:clamp(2rem,4vw,3rem);
        display:inline;
    }
    .banner-text h2{
        font-size:clamp(1rem,2vw,3rem);
        display:inline;
    }
    img {
        max-width: 100%;
        height: auto;
        /* height: 100%; */
        object-fit: contain;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /* background-color: black;
        color: white; */
    }
    li {
        float: left;
    }
    li.nav-link a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li img {
        margin: auto;
        padding: 10px 2px;
        height:100%;
        width: 7%
    }
    .nav-image{
        display: block;
        margin: auto;
    }
    /* li a:hover {
        background-color: gray;
    } */

    li a:hover {
        background-color: white;
        color: black;
    }

    .light li a:hover {
        background-color: whitesmoke;
        color: red;
    }

    .dark li a:hover {
        background-color: black;
        color: blue;
    }

    li button:hover {
        background-color: white;
        color: black;
    }
    .dark li button:hover {
        color: black;
    }
    .light li button:hover {
        color: black;
    }
    /* .dark .nav-selected a:hover {
        background-color: darkblue;
        color: darkslategray;
    } */
    /* p {
        border: solid black;
    } */
    .row {
        height: 100px;
    }

    .row .cell{
        text-align: center;
        max-height: 400px;
        max-width: 250px;
        width: 150px;
    }

    .row .celltext{
        text-align: center;
        max-height: 400px;
        max-width: 250px;
        width: 200px;
    }
    /* .row.dark{
        background-color: lightblue !important;
        border-radius: 5px;
    }*/
    .row .light{
        color: white;
        border-radius: 5px;
    }
    .row .dark{
        color: white;
        border-radius: 5px;
    }
    .container .light{
        color: white;
        border-radius: 5px;
    }
    .container .dark{
        color: white;
        border-radius: 5px;
    }
    .row .cell img{
        height:200px;
        width:200px;
    }
    .activity-item{
        margin:25px;
        background-color: gray;
    }
    .activity-content{
        border: solid black;
        text-align: left;
        margin:auto;
    }
    .activity-header{
        text-align: center;
    }
    .activity-list{
        margin:auto;
        width: 85%;
        background-color: lightgray;
    }
    .book-table{
        width: 85%;
    }
    table{
        width: 96%;
        margin: 2%;
    }
    .nav-link{
        font-size:clamp(1rem,2vw,3rem);
    }
    .nav-selected{
        background-color: lightgray;
        color: black;
        font-weight: bold;
    }
    @media screen and (min-width: 1200px) {
        .detail_content{
            margin-left: 10% !important;
            margin-right: 10% !important;
        }

        .detail_content span p{
            font-size:clamp(1rem,2vw,3rem) !important;
        }

        .detail_content span h1{
            font-size: clamp(2rem,4vw,3rem) !important;
        }
    }

    @media screen and (max-width: 600px) {
        .subnav li a{
            margin-left: 30px;
            margin-right: 30px
        }
        .detail_content span{
            width: 95% !important;
        }

        .detail_content span p{
            font-size: clamp(2rem,4vw,3rem) !important;
        }

        .detail_content span h1{
            font-size: clamp(3.5rem,4vw,5rem) !important;
        }

        .nav-link a{
            border-radius:10px;
        }
      .banner-text {
        display:none;
      }
      .banner-image {
          flex-basis:20%;
      }
      .nav-image{
        flex-basis: 4%;
        width:100%;
    }
      .banner{
            justify-content: center;
        }
      .nav-link{
          width:100%;
          font-size:clamp(2rem,6vw,4.5rem);
      }
      .flex-container .box {
          height: 80vh;
        }
      .flex-container .box {
        margin: 0px;
        }
      .flex-container .box .sub {
        font-size: clamp(1.5rem,3vw,3rem);
        line-height: 200%;
        height:35%;
        }
        .flex-container .box .sub-desc {
        font-size: clamp(1.5rem,3vw,3rem);
        height:55%;
        }
        img {
        height: 1;
        }
        .mininav {
            width: 100% !important;
            border-bottom-left-radius: 0% !important;
            border-bottom-right-radius: 0% !important;
            bottom: 0px; /* remove peek height */
        }
        .mininav a img{
            margin:2vw !important;
            height:7vw !important;
        }
    }
    @media screen and (max-width: 300px) {
        .nav-link a{
            border-radius:10px;
        }
      .banner-text {
        display:none;
      }
      .banner-image {
          flex-basis:30%;
          width:100%;
      }
      .nav-image{
        flex-basis: 10%;
        width:100%;
    }
      .banner{
            justify-content: center;
        }
      .nav-link{
          width:100%;
          font-size:clamp(2rem,6vw,4.5rem);
      }
      .flex-container .box {
          height: 60vh;
        }
      .flex-container .box {
        margin: 0px;
        }
      .flex-container .box .sub {
        font-size: clamp(2rem,5vw,4rem);
        line-height: 120%;
        height:30%;
        margin:2%;
        }
        .flex-container .box .sub-desc {
        font-size: clamp(2rem,4vw,3rem);
        height:66%;
        }
        .flex-container{
            margin:0px;
        }
        img {
        height: 1;
        }
        .mininav {
            width: 100% !important;
            border-bottom-left-radius: 0% !important;
            border-bottom-right-radius: 0% !important;
        }
        .mininav a img{
            margin:3vw !important;
            height:10vw !important;
        }
    }
    @keyframes glowing {
        from {color: red;}
        to {color: orange;}
    }

    @keyframes glowering {
        from {color: blue;}
        to {color: green;}
    }

    @keyframes spin {
        from {transform: rotate(0deg) scale(1.2);}
        to {transform: rotate(360deg) scale(1.2);}
    }

    @keyframes fadein {
        0% {opacity: 0%;}
        100% {opacity: 100px;}
    }

    @keyframes noanim {
    }

    /* The element to apply the animation to */
    /* .light a:hover {
        animation-name: glowing;
        animation-duration: 1.5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }

    .dark a:hover {
        animation-name: glowering;
        animation-duration: 1.5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    } */

    .banner-image img:hover {
        animation-name: spin;
        animation-delay: 2s;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    .detail_content span p{
        font-size: clamp(1.5rem,3vw,3rem);
    }

    .detail_content span h1{
        font-size: clamp(2rem,5vw,4rem);
    }

    /* .banner-text {
        animation-name: fadein;
        animation-delay: .25s;
        animation-duration: 1.5s;
        animation-fill-mode: both;
    } */

    .banner-image {
        animation-name: fadein;
        animation-delay: 0s;
        animation-duration: 1.5s;
        animation-fill-mode: both;
    }

    .offcolor li a {
        animation-name: fadein;
        animation-duration: 1.5s;
        animation-fill-mode: both;
    }

    .offcolor li:nth-child(1) a {animation-delay: .5s;}
    .offcolor li:nth-child(2) a {animation-delay: .7s;}
    .offcolor li:nth-child(3) a {animation-delay: .9s;}
    .offcolor li:nth-child(4) a {animation-delay: 1.1s;}
    .offcolor li:nth-child(5) a {animation-delay: 1.3s;}
    .offcolor li:nth-child(6) a {animation-delay: 1.4s;}
    .offcolor li:nth-child(7) a {animation-delay: 1.5s;}

    .subnav li a {
        animation-name: fadein;
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    .subnav .navlink a{
        margin-left: 25px;
        margin-right: 25px;
    }

    .subnav li:nth-child(1) a {animation-delay: .7s;}
    .subnav li:nth-child(2) a {animation-delay: .9s;}
    .subnav li:nth-child(3) a {animation-delay: 1.1s;}
    .subnav li:nth-child(4) a {animation-delay: 1.3s;}
    .subnav li:nth-child(5) a {animation-delay: 1.4s;}

    .offcolor .nav-selected {
        animation-name: noanim;
    }
    h1 {
        animation-name: fadein;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-delay: .25s;
    }
    h2{
        animation-name: fadein;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-delay: .3s;
    }
    h3{
        animation-name: fadein;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-delay: .30s;
    }
    p{
        animation-name: fadein;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-delay: 1.5s;
    }

    /* .myClass img:nth-child(1) { animation-delay: .5s }
    .myClass img:nth-child(2) { animation-delay: 1s }
    .myClass img:nth-child(3) { animation-delay: 1.5s }
    .myClass img:nth-child(4) { animation-delay: 2s } */


a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}