/*
Author:  Leonard Garcia
All Rights Reserved
Created on May 11, 2025
*/

@media only screen and (min-width: 768px) {
    .scroller-wrapper {
        width: max-content;
        height: 100vh;
    }

    .container {
        width: max-content;
    }
    
    .container section img {
        width: 25vw;      /* or 30vw if you want them bigger */
        max-width: 400px; /* safety cap */
        height: auto;
        display: block;
        margin-bottom: 1rem;
    }
    
    section {
        font-size: 1.4rem;   /* adjust to taste */
        line-height: 1.5;
    }

}

body {
    background-color:  black;   
    color: darkgrey;
    margin: 0;
} 

::-webkit-scrollbar {
    width: 1.5em;
    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);
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */       
}
.freckle-face-regular {
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-style: normal;
}

#header{
    color: darkgreen;
    font-family: Harry p, Helvetica;
    font-size: 3.6rem;
    font-weight: 600;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    margin-top: 3rem;
    margin-left: 35%;
}
#Q_Theme{
    border: 2px;
    border-color: silver;
    border-style: solid;
    border-radius: 5px;
    width: 320px; height: 220px;
    margin-top: 2rem;
    margin-left: 30%;
}
#power{
    margin-left: 32rem;
}

.norm {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 20px;
    font-style: normal;
    width: 35%;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 25px;
    left: 20px;
    margin-bottom: 20px;
    margin-top:    20px;
}

.scroller-wrapper {
    width: 100%;
    overflow-x: hidden;   /* GSAP uses this on desktop */
    overflow-y: visible;  /* <-- THIS is the fix */
    position: relative;
}

.finalParagraph {
    background-color:  black;
    color:#3399ff;
    font-size: 35px;
    font-style: normal;
    width: 55%;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 10px;
    position: static;
    margin: 20px auto;
}
.finalParagraph {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
}

.video {
     width: 400px;
     aspect-ratio: 16/ 9;
     margin-top: 2rem;
     margin-left: 60px;
     border: 8px;
     border-style: solid;
     border-color:#3399ff;
     border-radius: 5%;
     outline: 10px groove blueviolet;
     outline-offset: -1px;
     background-position: 0 0;
     background: rgb(2,0,36);
     background: linear-gradient(90deg, rgba(14,136,201,0.004639355742296902) 20%, rgba(58,133,135,0.8897934173669468) 31%, rgba(0,212,255,1) 100%);
     background-size: 140% 140%; 
}

.pic{
    float:left;
    margin: 1rem;
    width: 220px; height: 220px;
}

.paired{
    display: inline-block;
    margin-top: 1rem;
    margin-left: 2rem;
}

#intro {}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
}

/* Slides */
section {
   flex: 0 0 100vw;
   padding: 1rem;
   box-sizing: border-box;
}

.lily, .sample1, .sample2, .sample3, .group2 {
    color:#00ff6a;
}

#WOE {
    float: left;
    margin-top: -6rem;
    padding: 2rem;
    width: 200px; /* or whatever feels right */
    height: auto;
}

#hw {
    width: fit-content;
    margin-left: 1rem;
}

#gramIcon {
    display: block;
    cursor: pointer;
    width: fit-content;
    border-radius: 50%;
    padding:       4px;
    border: 5px solid yellow;
    margin-top:  -1rem;
    margin-left: 2rem;
    opacity: .6;
}
#gramIcon:hover {
    opacity: 1;
}

#base {
    color: yellow;
    margin-left: 2.7rem;
}

#footer {
    color: white;
    margin-left: 40%;
}

/* FOR SMARTPHONE ***********************SMARTPHONE*********************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width: 767px) {
    .freckle-face-regular {
        font-family: "Freckle Face", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size:  20px;
    }
    #header{
        color: darkgreen;
        font-family: Harry p, Helvetica;
        font-size: 1.5rem;
        font-weight: 600;
        text-shadow:#fff 0 -1px 4px, 
        #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
        margin-top: 3rem;
        margin-left: 25%;
    }
    #Q_Theme{
        border: 2px;
        border-color: silver;
        border-style: solid;
        border-radius: 5px;
        width: 320px; height: 220px;
        margin-top: 2rem;
        margin-left: 10%;
    }
    #power{
        width: 75%;
        margin-left: 10%;
    }
    .video {
        width: 340px;
        margin-left: 8%;
    }

    .norm {
        background-color: lightgreen;
        color: darkgreen;
        font-size: 20px;
        font-style: normal;
        width: 85%;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: static;
        margin: 20px auto;
    }
    
    /* Fix intro image */
    #intro {
        width: 100%;
        max-width: 450px;
        height: auto;
        display: block;
        margin: 0 auto 1rem auto;
    }

    /* Fix scroller wrapper collapse */
    .scroller-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        width: 100vw;
        min-height: 300px;
        scroll-snap-type: x mandatory;
        display: block;
    }

    /* Make container the horizontal flex row */
    .container {
        display: flex;
        flex-direction: row;
        width: max-content;
    }

    /* Each slide */
    .container section {
        flex: 0 0 100vw;
        scroll-snap-align: start;
        padding: 0.75rem;
        box-sizing: border-box;
    }
        
    .container section img {
        width: 90%;
        max-width: 350px;
        height: auto;
        display: block;
        margin: 0 auto 1rem auto;
    }
        
    #WOE {
        margin-top: -3rem;
        width: 200px;
    }
    .finalParagraph {
        background-color:  black; 
        color:#3399ff;
        font-size: 25px;
        width: 55%;
        border: 5px groove;
        border-radius: 15px;
        padding: 10px;
        position: static;
        margin: 30px auto;
        margin-top: 3rem;
    }
    
    .pic{
        margin: .5rem;
        width:  90%;
    }

    #hw {
        width: fit-content;
        margin-left: 1rem;
    }

    #gramIcon {
        display: block;
        cursor: pointer;
        width: fit-content;
        border-radius: 50%;
        padding:       4px;
        border: 5px solid yellow;
        margin-top:  -1rem;
        margin-left: 2rem;
        opacity: .6;
    }
    #gramIcon:hover {
        opacity: 1;
    }

    #base {
        color: yellow;
        margin-left: 2.7rem;
    }

    #footer {
        color: #00ff6a;
        margin-left: 35%;
    }
}