/* 
    Created on : Apr 30, 2025, 4:46:30 PM
    Author     : Leonard Garcia*/

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 */       
}

#header, #pvHeader {
    color: darkgreen;
    text-shadow: 0px 2px 3px #555;
    font-family: Harry p, Verdana;
    font-size:270%;
    position: absolute;
    left: 550px;
    top: 5px;
    padding:5px;
    margin-bottom: 5px;
    max-width: 90%;
}

.header2 {
    color: darkgreen;
    font-family: Harry p, Helvetica;
    font-size: 3.1em;
    font-weight: 600;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    margin-top: 3rem;
}
.headShot {
    margin-top: 5%;
    margin-left: 35%;
}
.theme {
    margin-top: 5%;
    margin-left: 17%;
    width: 45%;
}
#presHead {
    position: absolute;
    top:    5px;
    left:   30%;
}

#presShot {
    width: 320px; height: 220px;
    margin-top: 8rem;
    margin-bottom: -2%;
    margin-left: 30%;
}
.myIMG {
    margin-top: 3rem;
    margin-left: 3rem;
}

.compact {
        border-width: 2px;
        border-radius: 50%;
        margin-top: 2rem;
        margin-left: 2rem;
        width: fit-content;
}
.subtitle {
    background-color: lightgreen;
    color:          black;
    font-size:      1.5em;
    border:         6px;
    border-color:   silver;
    border-radius:  6px;
    border-style:   ridge;
    padding:        4px;
    position:       relative;
    left:           15px;
    margin-bottom: -25px;
    width:          50%;
}
.select{
    background-color:white;
    color: #A52A2A; 
    border: 4px;
    border-color: silver;
    border-style: solid;
    border-radius: 4px;
    text-indent: 5%; 
    font-size: 1.3rem; 
    padding: 2px;
    width:20rem;
    margin-left: 2rem;
}

.questions
{
    color: darkgreen;
    font-weight: 600;
    height: 80px;
    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;
}
div.together {
    display: inline-block;
}
.yes {
    
}
.no {
    
}
.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;
}

.normal_blue {
    color:              black;
    background-color:   lightblue;
    font-family:        sans-serif;
    font-weight:        normal;        
    border:             6px;
    border-color:       silver;
    border-style:       ridge;
    border-radius:      4px;
    padding:            4px;
    width:              40vw;
    margin-left:        5px;
}

.rounded {
    color:              yellow;
    background-color:   black;
    font-family:        sans-serif;
    font-weight:        normal;   
    font-size:          20px;
    border:             6px;
    border-color:       gold;
    border-style:       ridge;
    border-radius:      8px;
    padding:            6px;
    width:              fit-content;
    margin-left:        5rem;
}
#LR{
    margin-left:        3rem;
}
#steps {
    border:             #ffff66;
    border:             10px;
    border-style:       solid;
    border-radius:      10%; 
    margin-left:        3rem;
}

#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: 20%;
}

/* FOR SMARTPHONE ***********************SMARTPHONE*********************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width: 600px) {
    .header2 {
        font-family: Harry p, Helvetica;
        font-size: 2.4rem;
    }   
    #presHead {
        position: absolute;
        top:    5px;
        left:   10%;
    }
    #presShot {
        width: 320px; height: 220px;
        margin-top: 8rem;
        margin-bottom: -2%;
        margin-left: 10%;
    }
    .myIMG {
        margin-top: 3rem;
        margin-left: 1rem;
        width: 85%;
    }
    .compact {
        margin-top: 2rem;
        margin-left: 2rem;
        width: 35%;
    }
    .subtitle {
        background-color: lightgreen;
        color:          black;
        font-size:      1.5em;
        border:         6px;
        border-color:   silver;
        border-radius:  6px;
        border-style:   ridge;
        padding:        4px;
        position:       relative;
        left:           15px;
        margin-bottom: -25px;
        width:          50%;
    }
    .select{
        background-color:white;
        color: #A52A2A; 
        border: 4px;
        border-color: silver;
        border-style: solid;
        border-radius: 4px;
        text-indent: 5%; 
        font-size: 1.3rem; 
        padding: 2px;
        width:20rem;
        margin-left: 2rem;
    }
    
    .questions
    {
        color: darkgreen;
        font-weight: 600;
        height: 80px;
        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;
      width: 90px;
    }
    div.flip 
    {
      margin-bottom: 5px;
      width: 90px;
    }
    div.together {
        display: inline-block;
    }
    
    .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: relative;
        top: 25px;
        left: 20px;
        margin-bottom: 20px;
        margin-top:    20px;
    }

    .normal_blue {
        color:              black;
        background-color:   lightblue;
        font-family:        sans-serif;
        font-weight:        normal;        
        border:             6px;
        border-color:       silver;
        border-style:       ridge;
        border-radius:      4px;
        padding:            4px;
        width:              40vw;
        margin-left:        5px;
    }

    .rounded {
        color:              yellow;
        background-color:   black;
        font-family:        sans-serif;
        font-weight:        normal;   
        font-size:          20px;
        border:             6px;
        border-color:       gold;
        border-style:       ridge;
        border-radius:      8px;
        padding:            6px;
        width:              fit-content;
        margin-left:        5rem;
    }
    #LR{
        margin-left:        3rem;
    }
    #steps {
        margin-left:       3rem;
    }
    #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: 20%;
    }
}