body{
    padding: 0%;
    margin: 0%; 
    font-size: 25px;
    word-wrap: break-word;
    font-family:Arial, Helvetica, sans-serif;
    color: black;
}   
.modeN{
    background-image: url("backp.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.modeL{
    background-image: url("lightM.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.modeG{
    background-image: url("greyM.avif");
    background-repeat: no-repeat;
    background-size: cover;
}
.modeD{
    background-image: url("darkM.jpg");
    background-repeat: no-repeat;
    background-size: cover;
} 
.map-container {
    width: 95%;
    max-width: 900px;
    height: 600px;
    margin: 15px auto;
    border-radius: 12px;
    overflow: hidden;
}
.map-container iframe {
    width: 95%;
    height: 750px;
    border: 0;
}
img { 
    border-radius: 15px;  
    width: 95%; 
    filter: drop-shadow(18px 18px 15px black);
} 
h1, h2{
    text-align: center;
}
.titles{ 
    padding: 0%; 
    margin-top: 15px;
    margin-left: 15px;  
    border-radius: 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 15px;
    z-index: 1000; 
}
.titles img{
    text-align: center;  
    width: 100%;
    height: 115px;
    filter: none;
}
.moreInfo img {  
    height:600px;
    width: 95%;
    max-width: 900px;
    padding-bottom: 15px;
}
.mySlideB {display: none}
.preNextCont{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.prevs, .nexts{
    background-color: gold;
}
.prevs:hover, .nexts:hover{
    background-color: goldenrod;
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
} 
.navBarT{
    background-color: rgba(255, 217, 0, 0.829);
}
span{
    padding-left: 5px;
    width: 90%;
}
.tryIt, .aboutUs, .moreInfo{
    display: grid;
    grid-template-columns: 1fr 1fr;
} 

.aboutUs video{
    width: 95%;
    padding-left: 15px;
    filter: drop-shadow(18px 18px 15px black);
    padding-bottom: 15px;
}
.modS, .langS{
    display: none;
}
.filterShow, .filterShowM{ 
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    margin-left: 15px;
    margin-right: 15px;
    padding: 15px;
    margin-top: 0px;
    text-align: center; 
    background-color: rgba(255, 217, 0, 0.829);
    border-radius: 15px;
} 
.filterShowM{ 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
} 
.modeS, .lanS{
    color: black;
    text-align: center;
} 
.hvL:hover, .hvM:hover{ 
    background-color: black; 
    border-radius: 15px;
    color: rgba(255, 217, 0, 0.829); 
}
.content{
    padding: 15px;
} 
.mdS, .tryIt{ 
    background-color: rgba(255, 217, 0, 0.829);
    padding: 15px; 
    margin-top: 0px;
    margin-bottom: 15px; 
}
.footer{ 
    display: grid;
    padding: 5px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: black;
    color: white;
    grid-template-columns: repeat(4, 1fr); 
} 
.reveal{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 1s all ease;
}
.reveal.active{
    transform: translateY(0);
    opacity: 1;
}
.ligthM {
    background-color: white;
    color: black;
}
.darkMode {
    background-color: black;
    color: white;
}
.greyMd {
    background-color: rgb(61,57,57);
    color: rgb(176,167,167);
}
.ligthMM{
    background-color: white;
    border-radius: 15px;
    color: black;
}
.darkModeM{
    background-color: black;
    border-radius: 15px;
    color: white;
}
.greyMdM{
    background-color: rgb(61, 57, 57);
    border-radius: 15px;
    color: rgb(176, 167, 167);
} 
.navBarT{
    margin-top: 145px; 
    margin-left: 15px;
    margin-right: 15px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    border-radius: 15px;
    text-align: center;  
}
/*Adjustments for any larger users*/
@media(min-width: 976px){
    .navBarT{
        margin-top: 145px;  
        padding: 25px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        border-radius: 15px;
        text-align: center;  
    }
    .tryIt h1, .aboutUs h2, .moreInfo h2{
        grid-column-start: 1;
        grid-column-end: 3;
        text-align: center; 
    } 
    .itT{
        grid-column-start: 1;
        grid-column-end: 5;
        text-align: center;
        font-size: larger;
    }
    .moreInfo h2, .moreInfo h3{
        grid-column-start: 1;
        grid-column-end: 3;
        text-align: center;
    }  
}
/*Adjustments for notepad users*/
@media(max-width: 976px){ 
    body{
        font-size: 25px;
    }
    .navBarT{ 
        padding: 25px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        border-radius: 15px;
        text-align: center;  
    }
    .filterShow{ 
        display: grid; 
        grid-template-columns: repeat(3, 1fr);
        padding: 25px;
        margin-top: 0px;
        text-align: center;  
        border-radius: 15px;
    } 
    .filterShowM{ 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
    } 
    .tryIt, .aboutUs, .moreInfo{ 
        display: grid;
        grid-template-columns: 1fr;
    } 
    h1{
        font-size: 45px;
    }
    h2{
        font-size: 30px;
    } 
    .footer{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .itT{
        grid-column-start: 1;
        grid-column-end: 3;
        text-align: center;
        font-size: larger;
    } 
    .aboutUs video{ 
        width: 95%;
    } 
} 
 
@media(max-width: 832px){
    body{
        font-size: 40px;
    }
    .navBarT{ 
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        border-radius: 15px;
        text-align: center;  
    }
    .filterShow{ 
        display: grid; 
        grid-template-columns: repeat(3, 1fr);
        padding: 15px;
        margin-top: 0px;
        text-align: center;  
        border-radius: 15px;
    } 
    .filterShowM{ 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
    } 
    .tryIt, .aboutUs, .moreInfo{ 
        display: grid;
        grid-template-columns: 1fr;
    }  
    h1{
        font-size: 50px;
    }
    h2{
        font-size: 35px;
    }
    .footer{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .itT{
        grid-column-start: 1;
        grid-column-end: 3;
        text-align: center;
        font-size: larger;
    }
    .aboutUs video{ 
        width: 85%;
    } 
}
/*menu adjustment for smartphones*/
@media(max-width: 755px){
    body{
        font-size: 30px;
    }
    .navBarT{
        margin-left: 15px;
        margin-right: 15px; 
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr; 
        border-radius: 15px; 
    }
    .filterShow{ 
        display: grid; 
        grid-template-columns: 1fr;
        margin-left: 15px;
        margin-right: 15px;
        padding: 15px;
        margin-top: 0px;
        text-align: center;  
        border-radius: 15px;
    }
    .filterShowM{ 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
    } 
    .bt2{
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .tryIt, .aboutUs, .moreInfo{ 
        display: grid;
        grid-template-columns: 1fr;
    }  
    h1{
        font-size: 50px;
    }
    h2{
        font-size: 35px;
    }
    .footer{
        display: grid;
        grid-template-columns: 1fr;
    }
    .itT{
        grid-column-start: 1;
        grid-column-end: 2;
        text-align: center;
        font-size: larger;
    } 
    .aboutUs video{ 
        width: 85%;
     }
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 476px) {
    body{
        font-size: 35px;
    }
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 35px;
    }
    h3{
        font-size: 30px;
    }
    .prev, .next,.text {font-size: 13px}
    .filterShow{ 
        display: grid; 
        grid-template-columns: 1fr; 
    }
    .filterShowM{ 
        display: grid; 
        grid-template-columns: 1fr; 
    } 
}