/* 
    Created on : Jun 4, 2016, 11:41:54 AM
    Modfied on: February 11, 2025
    Author     : Leonard Garcia
*/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: black;
}  
::-webkit-scrollbar {
    width: 1.1em;
    height: 1em;
}

::-webkit-scrollbar-track {
  background-color: hsl(120 75% 50%/1);
  border-radius: 100vw;
  margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: hsl(120 100% 20% / 1);
  border: 0.25em solid hsl(120 100% 20% / 1);
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(120 100% 10% / 1);
}

h1{color:darkgreen;font-size:40pt;font-weight:bold;font-family:"Tahoma"}
p{color:silver;font-size:12pt;font-weight:normal;font-family:"Verdana", "serif"}

.top-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 98%;
    height: 65vh;
    padding: 6px;
    margin: 1rem;
}

header {
    border-color:black;
    border-radius: 25px;
    width: 550px;
    height: 330px;
    text-align: left;
    margin-bottom:6px;
    box-shadow: 0px 1px 40px 0px rgba(73,172,119,0.9); 
}

.theme {
    /* visibility: visible; */
    position: relative;
    border: 4px;
    border-style: solid;
    border-radius: 10%;
    left: 98px;
    margin-top: 2px;
    margin-left: -80px;     /*was -80 */
    width: 520px; height: 20rem;
}

#gworld {
    order: 2;
    position: relative;
    top: 4rem;
}

button {
    color:darkgreen;
    font-weight: 600;
    border: 5px;
    border-color: goldenrod;
    border-radius: 5px;
    border-style: groove;
    cursor: pointer;
    margin-bottom: 5px;
}

/*****************************************************************************/
/*************************NEW MENU STYLING****Desktop**************************/
/*****************************************************************************/
.part {
    width: 14rem;
    height: 2rem;
    margin-top: .3rem;
    margin-left: -.1rem;
}
#carousel-container {
  position: absolute;
  top: 20vh;
  left: 42vw;
  width: 100vw;
  height: 24.9rem;         
  overflow: hidden;
  margin-top: 15px;
}
#carousel {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}
.slide {
  width: 15%;
  height: 2.25rem;           
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: .5px;
  border-color: gold;
  border-style: solid;
  border-radius: 5%;
  background-image: url("../images/leaf.jpg"); 
  background-color: darkgreen;
  color:aqua;
  margin-left: 5px;
}

#prev, #next {
  /*position: absolute;
  top: 120vh; */
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 2.7rem;
  font-weight: 600;
  color: red;
  /*margin-top: -13px;
  margin-bottom: 5vh; */
}
#prev { left: 43%; }
#next { left: 53%; }

#prev:hover {
    color:yellow;
}
#next:hover {
    color:yellow;
}

a:link, a:visited {
    color: aqua;
    text-decoration: none;
    cursor: pointer;
}

a:link:active, a:visited:active {
    color: aqua;
}
a:hover {
    color: gold;
    font-weight: 600;
}
#home {
    position: absolute;
    top: 130vh;
    left: 47vw;
    font-size: 30px;
    background-color: darkgreen;
    color: aqua;
    border:4px;
    border-style: groove;
    border-radius: 5%;
    border-color: gold;
    padding: .4rem;
}
#home2 {
    position: absolute;
    top: 110vh;             
    left: 37%;
}


#footer {                       /*desktop */
    background-color:black;
    color: white;
    text-align:center;
    padding:5px;
    position: absolute;
    top: 143vh;
    margin-left: 2%
}

/******************************************************************************/
/****************************LAPTOP Wide***************************************/
/******************************************************************************/
@media only screen and (min-width: 1366px) and (min-height: 768px) {
    /* Your styles for laptops with 1366x768 resolution */
    .top-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 80%;
        height: 67vh;   /* was 65vh  */
        margin: .5rem;
    }
    
    header {
        width: 540px;
        height: 320px;
        text-align: left;
        margin-left: -80px;
        display: block;
    }
    #gworld {
        order: 2;
        margin-top:     -3rem;
        margin-left:    -5rem;
    }
       
    /*
    scroll{
        width: 100px;
        height: 100px;
        text-align: left;
        margin-bottom: 20px;
        margin-left: -450px;
        box-shadow: 0px 1px 40px 0px rgba(141,191,63,0.9);   
    }
    */
        
    .part {
        width: 9rem;
        height: 1.7rem;
        margin-top: .2rem;
        margin-left: -.1rem;
    }
    #carousel-container {
        position: absolute;
        top: 50vh;
        left: 32vw;
        width: 80vw;
        height: 25.1rem;         /* was 21.5rem */
        overflow: hidden;
        margin-top: 7px;
    }
    .slide {
        width: 15%;
        height: 2.25rem;           
        font-size: .9rem;
        margin-left: 5px;
    }
    #prev, #next {
        position: absolute;
        top: 105vh;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        color: aqua;
        margin-top: -23px;
        margin-bottom: 5px;
    }
    #prev { left: 32%; }
    #next { left: 42%; }
    
    #home {
        position: absolute;
        top: 117vh;
        left: 36.5vw;
        font-size: 18px;
        padding: .4rem;
    }
    #footer {                       /* laptop-wide */
        font-size: 13px;
        background-color:black;
        color: yellow;
        text-align:center;
        padding:5px;
        position: absolute;
        top: 125vh;
        margin-left: -40px;
    }
}    
/******************************************************************************/
/****************************LAPTOP Normal************************************/
/******************************************************************************/
@media screen and (max-width : 1215px) and (min-width: 768px) {
    header {
        clear: both;
        width: 380px;
        text-align: left;
    } 
    header2 {
        margin-bottom: 1rem;
    }
   
    #gworld {
        
    }
                    
    #carousel-container {
        position: absolute;
        top: 85vh;
        left: 42vw;
        width: 100vw;
        height: 24.9rem;         /* was 21.5rem */
        overflow: hidden;
        margin-top: 7px;
    }
    .slide {
        width: 15%;
        height: 2.25rem;           
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        border: .5px;
        border-color: gold;
        border-style: solid;
        border-radius: 5%;
        background-image: url("../images/leaf.jpg"); 
        background-color: darkgreen;
        color:aqua;
        margin-left: 5px;
    }
    
    #prev, #next {
        position: absolute;
        top: 158vh;
        left: 40vw;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: 600;
        color: aqua;
        margin-top: -23px;
        margin-bottom: 5px;
    }
    #prev { left: 43%; }
    #next { left: 53%; }
    
    #home {
        position: absolute;
        top: 162vh;
        left: 47vw;
        font-size: 16px;
        padding: .4rem;
    }
    
    #footer {                       /*laptop */
        position: absolute;
        top: 170vh;
        background-color:black;
        color: green;
        text-align:center;
        padding:5px;
        margin-left: -35px;
    }
}


/*********************************************************************************/
/*************************************iPad**Landscape****************************/
/********************************************************************************/
@media only screen 
and (min-device-width : 820px) 
and (max-device-width : 1180px) 
and (orientation : landscape) {
   
    .top-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 80%;
        height: 50%;
        margin: .5rem;
    }
    
    header {
        width: 380px;
        text-align: left;
    }
    header2 {
        margin-bottom: 1rem;
    }
    
    #gworld {
        
    }
       
    #carousel-container {
      width: 200vw;
    }

    .slide {
      width: 95%;
    }
    
    #footer {
        text-align:center;
        padding:5px;
    }
    
}    

/*********************************************************************************/
/*************************************iPad**Portrait****************************/
/********************************************************************************/
@media only screen 
and (min-device-width : 820px) 
and (max-device-width : 1180px) 
and (orientation : portrait) {

    .top-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 80%;
        height: 50%;
        margin: .5rem;
    }
    
    header {
        width: 380px;
        text-align: left;
    }
    
    #gworld {
        
    }
    
    #carousel-container {
        position: absolute;
        top: 50vh;
        left: 20vw;
        width: 180vw;
        margin-top:  4rem;
        margin-left: 1rem;
    }
    .slide {
        width: 25%;
    }
    #prev, #next {
        position: absolute;
        top: 110%;
    }
    #prev { left: 300px; }
    #next { left: 400px; }
    
    #footer {
        color: green;
        text-align: center;
        padding: 5px;
        position: relative;
        left: -5rem;
        top: 30rem;
    } 
    
}

/****************************************************************************/
/************************* For Smartphone ***********************************/
/****************************************************************************/


@media only screen and (max-width : 414px) and (min-width: 240px) {
    * {
        box-sizing: border-box;
    }
    
    body {
        width: 100%;
        margin: 0;
        overflow-x: hidden; 
    } 
    
    .top-container {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        width: 80%; 
        height: 100%; 
        margin-left: 1rem;
    }
    
    header {
        width: 300px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
    }
    
    .theme {
        width: 260px;
        height: 100%;
        margin-left: -60%;
    }
        
    #gworld {
        order: 2;
        margin-top: -12rem;
        margin-left: 2rem;
        padding: 5rem;
    }
    
    a {
        margin-bottom: 10px;
    }
    
    #carousel-container {
        position: absolute; /* Remove absolute */
        top: 20rem;
        left: 5rem;
        margin: 0 auto; /* Center horizontally */
        width: 100%;
        max-width: 510px; /* Or whatever max width works for you */
        height: 24.9rem;         ;
    }
    
    #carousel {
      display: flex;
      flex-direction: column;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }
    
    .slide {
        width: 49.5%;     /* was 47.5% */
    }
    
    #prev, #next {
        position: absolute;
        top: 105%;
        font-size: 20px;
    }
    #prev { left: 80px; }
    #next { left: 220px; }
    
    #home2 {
        position: absolute;
        top: 200vw;
        left: 40%;
    }
    
    #footer {
        color: greenyellow;
        text-align: center;
        padding: 5px;
        position: relative;
        left: -.5rem;
        top: 40rem;
        width: 200px;
    } 
    
    
    .edge-android .carousel-container {
        height: 59.8%;      
    }
    
    .edge-android .carousel {
        width: 510px;
        margin-left: 2rem;
    }
    
    .edge-android #prev {
        position: absolute;
        top: 115%;
    }
    .edge-android #next  {
        position: absolute;
        top: 115%;
    }    
    .edge-android #home2  {
        position: absolute;
        top: 195vw;
    }
    
    .edge-android #footer  {
        color: white;
        position: relative;
        left: -1rem;
        top: 40rem;
    }    

}