/* 
    Created on : Jan 30, 2025, 5:46:01 PM
    Author     : Leonard Garcia
*/

:root {
    margin: 0;
    padding: 0;
    color: #0000FF;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
}

body{
    margin: 0;
    color: darkgreen;
    background-color: black;
    overflow-x: hidden; /* To prevent horizontal scroll */
}

::-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);
}

h1{
    color: gold;
    background-color: darkgreen;
    border: 4px;
    border-style: solid;
    border-radius: 2%;
    padding:       .4rem;
    margin-left:   3rem;
}
span{
    color: red;
    font-family: Arial, Helvetica, sans-serif;
}
/* Flex Styles */
 
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    width: clamp(260px, 900px, 1200px);
}
.box{
    font-size: 1.5rem;
    color: yellow;
    background-color: black;
    margin: 2rem;
}
.boxBordered{
    border:4px;
    border-color: gold;
    border-style: solid;
    border-radius: 2%;
    padding: 1.5rem;
}

.wizard{
    width: clamp(70%, 100%, 120%);
}
#theme{
    
}

#window{
    float: left;
    clip-path: circle(40%);
    shape-outside: circle(45%);
}

/* inlay styles *****************************************/

.inlay {
  position: relative;
  top: 80%;
  left: -300px; /* Start partially off-screen */
  width: 300px; /* Width of the inlay */
  height: 15%; /* Full height */
  background-color: #3498db; /* Color of the inlay */
  color: white;
  border: 6px;
  border-style: solid;
  border-radius: 30%;
  padding: 1.5rem;
  transition: right 0.3s ease-in-out; /* Smooth transition */
}

.inlay.visible {
  left: 20px; /* Slide in fully from the right */
}

.inlay p {
  margin: 5px;
}

.norm {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 1.2rem;
    font-style: normal;
    width: fit-content;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 10px;
    left: 12px;
    margin-bottom: 9px;
}
    
.questions
{
    color: darkgreen;
    font-weight: 600;
    height: 80px;
    margin-left: 3rem;
    margin-top:  5rem;
    margin-bottom: 5px;
}
.question
{
    cursor: url(../images/hand.png), default;  
    position: relative;
    top:  10px;
    left: 20px;
    float: left;
    margin-bottom: -5px;
}  

div.panel,div.flip {
    margin: 0px;
    padding:5px;
    text-align:center;
    background:yellow;                    
    border:solid 2px darkolivegreen;             
    width:140px;
}
div.panel
{
    display:none;
    color: #A52A2A;
}
div.flip 
{
    margin-bottom: 5px;
}

.spacer {
    width: 20px;
    height: 25px;
}
    
#village{
    float: left;
    margin-right: 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%; 
}

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

#base {
    color: darkgreen;
    margin-left: 2rem;
    margin-top:  1rem;
}

#footer {
    position: relative;
    top: 90px;
    background-color:black;
    color:white;
    clear:both;
    margin-left: 10rem;
    padding:7px;
}

/**********************************************************************/
/***************************Smartphone**********************************/
/*********************************************************************/

@media only screen and (max-width: 600px) {
    :root{
        margin: 0; 
    }
    
    body{
        margin:0;
        color: darkgreen;
        background-color: black;
        box-sizing: border-box;
        overflow-x: hidden; /* To prevent horizontal scroll */
        margin-left: 0;
    }

    h1{
        font-size: 1.1rem;
        width: 245px;
        margin-left: .4rem;
    }
    
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        width: clamp(220px, 240px, 260px);
    }

    .box{
        font-size: .9rem;
        color: yellow;
        background-color: black;
        margin-left: 1.5rem;
        margin-right: -3rem;
        width: 310px;
    }
    .boxBordered{
        font-size: .9rem;
        border:4px;
        border-color: gold;
        border-style: solid;
        border-radius: 2%;
        padding: 1rem;
        margin-left: 1.3rem;
        width: 240px;
    }
    .inlay{
        font-size: .9rem;
        padding: .7rem;
        left: -200px; /* Start partially off-screen */
        width: 200px;
    }
    .inlay.visible {
        left: 30px; /* Slide in fully from the right */
    }
    .inlay p {
        margin-left: 10px;
    }
    
    audio{
        width: 98%;
    }
    
    #theme{
        width: clamp(80%, 90%, 100%);
        margin-left: 1rem;
    }
    #window {
        width:50%;
    }
    .wizard{
        width: clamp(98%, 100%, 132%);
        margin-left: 1rem;
    }
    
    .norm {
        background-color: lightgreen;
        color: darkgreen;
        font-size: .9rem;
        font-style: normal;
        width: 260px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: relative;
        top: 20px;
        left: 10px;
        margin-bottom: 9px;
    }
    
    div.panel,div.flip
    {
        margin-bottom: 2px;
        padding:5px;
        text-align:center;
        background: yellow;       /* was #DAA520  */             
        border:solid 2px darkolivegreen;             
        width:auto;
    }
    
    .questions
    {
        color: darkgreen;
        font-size: .8rem;
        font-weight: 600;
        width: 260px;
        height: 80px;
        margin-left: 1rem;
        margin-top:  2rem;
        margin-bottom: 5px;
    }
    .question
    {
        cursor: url(../images/hand.png), default;  
        position: relative;
        top:  14px;
        left: 5px;
        float: left;
        margin-bottom: 2px;
    }  

    #village{
        float: left;
        margin-right: 2rem;
        width: 50%;
    }
    .video {
         width: 250px;
         aspect-ratio: 16/ 9;
         margin-top: 2rem;
         margin-left: 1.5rem;
         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%; 
    }
    
    #gramIcon {
        display: block;
        cursor: pointer;
        width: fit-content;
        border-radius: 50%;
        padding:       4px;
        border: 5px solid yellow;
        margin-top:  1rem;
        margin-left: 2rem;
        opacity: .8;
    }
    #gramIcon:hover {
        opacity: 1;
    }

    #base {
        color: darkgreen;
        margin-left: 2rem;
        margin-top:  .5rem;
    }

    #footer {
        position: relative;
        top: 90px;
        background-color:black;
        color:white;
        clear:both;
        margin-left: 6rem;
        padding:7px;
        width: 10rem;
    }
}