/*
Author:  Leonard Garcia
All Rights Reserved
Created on : Dec 25, 2021, 10:24:48 PM
*/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body{
    background-color: black;
    color:  darkgreen;
}
::-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);
}

.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;
    position: absolute;
    top: 20px;
    margin-left: 3rem;
}
#wizwel {
    border: 6px;
    border-color: goldenrod;
    border-radius: 6px;
    border-style: groove;
    margin-left: 2rem;
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.theme{
    border: 5px;
    border-color: #089494;
    border-style: solid;
    border-radius: 8px;
    margin-left: 4rem;
    margin-top: 6rem;
    margin-bottom: -6rem; 
}
.ww {
    width:  320px; /*100% */
    height: 240px;
    margin: 0px 0px 5px 5px; /*top, right, bottom, left */
} 
#gramMan {
    float: left;
    width: 3.5rem; height: 5rem;
    margin-right: 1rem;
    margin-top: -.8rem;
    margin-bottom: .5rem;
    
}
.iconic {
    float: left;
    width: 3rem; height: 3em;
    margin-right: 1rem;
    margin-top: -.5rem;
    margin-bottom: .5rem;
}
#except {
    width: 2rem; height: 2rem;
    margin-top: .1rem;
}
.norm {
    background-color: lightgreen;
    color: darkgreen;
    font-weight: 600;
    border: 3px gold;
    border-style: groove;
    padding: 1rem;
}
.textwrap {
    border: 2px;
    border-color: transparent;
    border-style: solid;
    border-radius: 50%;
    float: left;
    margin-top: -.7rem;
    margin-right: 5px;
}
p.convoNum {
    background-color:#ff0;
    color: darkgreen;
    border: 4px;
    border-color:#139483;
    border-style: solid;
    font-size: 20px;
    width: fit-content;
    margin-left: 1rem;
    margin-top: 1rem;
}
.convo1 {
    width: auto;
}
.convo2 {
    flex: 1 2 0;
    align-self: auto; 
    border: 6px;
    border-color: gold;
    border-radius: 10px;
    border-style: groove;
    background-color: navajowhite;
    color: darkgreen;
    padding: 4px;
    margin: .5rem;
    width: 50%;
}
.convo3 {
    flex: 1 2 0;
    align-self: auto; 
    border: 6px;
    border-color: gold;
    border-radius: 10px;
    border-style: groove;
    background-color: navajowhite;
    color: darkgreen;
    padding: 4px;
    margin: .5rem;
    width: 50%;
}
.convo2:hover, .convo3:hover {
    background-color: #ff0;
    color: darkblue; 
}  

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: auto;
    grid-template-areas: 
          "header header header header"
          "main main main main"
          "sidebar sidebar sidebar sidebar"
          "footer footer footer footer";
    column-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-column-gap: 6px;
    grid-row-gap:6px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    justify-items: start;
}
.item-a {
    grid-area: header;
    align-self: center;
    margin-left: 6%;
    margin-top:  8%;
}
.item-b {
    grid-area: main;
    align-self: center;
    font-weight: 600;
    border: 1px gold;
    border-style: groove;
    padding: .5rem;
    width: fit-content;
    height: auto;
    margin-top: .5rem;
    margin-left: .5rem;
}
.item-c {
    
}
.item-d {
    grid-area: footer;
    align-self: center; 
}
#audbox {
    display: none;
}
.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;
}

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

#hw {
    width: 305px;
}
#footer {
    background-color:black;
    color:white;
    text-align:center;
    padding:7px;
    margin-left: 35%;
}

/* For Smartphone ****************************************************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width : 414px) and (min-width: 280px) {
    .header2 {
        font-size: 1.8rem;   
    }
    .theme{
        border-radius: 10px;
        margin-left: 2.5rem;
        margin-top: 6rem;
        margin-bottom: -6rem; 
    }
    #footer {
        margin-left: 25%;
    }
}