/* 
    Created on : Jun 19, 2016, 8:34:03 PM
    Author     : Leonard Garcia
*/
    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);
    }

    p#hide  {
        display:none;
        font-size: 12px;
        border: 4px silver;
        padding: .5rem;
    }

    #header {
        color: darkgreen;
        text-shadow: 0px 2px 3px #555;
        font-family:verdana;
        font-size:250%;
        position: absolute;
        left: 450px;
        top: 5px;
        padding:5px;
        margin-bottom: 5px;
    }
    #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:  5px;
        left:   33%;
    }
   
    .headShot {
        border:4px;
        border-color: darkgreen;
        border-style:groove;
        border-radius: 25%;
        margin-top:   5%;
        margin-left: 32%;
        width: 300px;
        height: 150px;
    }
    h1 {
        color: darkgreen;
        font-style: italic;
        position: absolute;
        top: 3px;
        left: 500px;
    }

    h3  {
        color: chartreuse;
        font-family: verdana;
        font-style: italic;
        font-size: 125%;
        position: relative;
        left: 500px;
        top: 10px;
        padding:5px;
    }
    .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 */       
    }
    
    div#p01  {
        background-color: lightgreen;
        color: darkslategray;
        font-family: sans-serif;
        font-size:160%;
        position: relative;
        left: 10px;
        top: 15px;
        border: 6px darkgreen;
        border-radius: 10px;
        padding:5px;
        margin:30px;
        max-width:  85%;
    }
    div#p01:first-letter{
        font-family: Lucida Calligraphy;
        font-size:2em;
        color: darkslategray;
        text-shadow: 5px 8px 9px cyan;
   }

    
    div#p02  {
        background-color: lightgreen;
        color: darkslategray;
        font-family: sans-serif;
        font-size:160%;
        text-align: justify;
        position: relative;
        left: 10px;
        top: 20px;
        border: 7px darkgreen;
        border-radius: 15px;
        padding: 10px;
        margin:30px;
        width: fit-content;
    }
    div#p02::before {
        content: url(../images/wizman_tiny.png);
    }
    div#p03  {
        background-color: lightgreen;
        color: darkslategray;
        font-family: sans-serif;
        font-size:160%;
        position: relative;
        left: 10px;
        top: 30px;
        border:5px darkgreen;
        padding:10px;
        margin:30px;
        width: fit-content;
    }
    p#hide  {
        display:none;
        font-size: 1.2rem;
    }

    form {
        position: relative;
        width  : 740px;
        height : 498px;
        margin : 0 auto;
        background: yellow;
        color   : darkgreen;
    }
    input {
        width : fit-content;
        margin: 5px;
    }
    .cuz {
        background-image: url("../images/ricepaper_blue.jpg");
        background-color: lightgreen;
        color   : darkgreen;  
        font-weight: 600; 
        border: 5px darkgreen;
        border-radius: 2px;
        border-style: ridge;
        width: 26%;
        margin-left: 5px;
    }
    textarea, select {
        width : 150px;
        margin: 0;
        background: #c6d7ce;
        color   : darkgreen;

        -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
           -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
                box-sizing: border-box;
    }

    button {
        position     : relative;
        left         : 40px;
        top          : 40px;
        padding      : 5px;
        font         : bold 1em sans-serif;
        border       : 3px solid #635208;
        border-radius: 5px;
        background   : none;
        color        : darkolivegreen;
        cursor       : pointer;
    }

    button:after {
        content: " ";
    }

    button:hover,
    button:focus {
        outline   : none;
        background: #000;
        color     : darkgoldenrod;
    }
    
    .question {
        background-image: url("../images/ricepaper_blue.jpg");
        background-color: lightgoldenrodyellow;
        color: darkgreen;
        width: 380px;
        border: 3px;
        border-radius: 5px;
        border-style:groove;
        padding: 2px;
        margin-left: 5px;
    }
    hr {
        background-color:darkgreen;
        color: darkolivegreen;
        height: 5px;
        border: 0 none;
        width: auto;
    }

    section {
        position: relative;
        top: 30px;
        left: 500px;
        color: darkgreen;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .pics {
        display: inline;
        background-color: black;
        padding: 4px;
        margin: 5px;
    }
    #imgSelect {
        color:white;
        font-size: 20px;
    }
    #write {
        color: white;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        top: 5px;
        left: 450px;
    }
    textarea {
        color: black;
        font-weight: 600;
        position: relative;
        top: 5px;
        left: 450px;
        width: 30%;
        text-align: left;
        outline: none;
        border-color: darkgreen;
        border-width: 5px;
        border-radius: 10%;
        margin-bottom: 10px;
    }
    #lyrics {
        margin-left: 25%;
    }
    #audiowrapper {
         margin-left: 25%;
    }
    #gramIcon {
        display: block;
        cursor: pointer;
        width: fit-content;
        border-radius: 50%;
        padding:       4px;
        border: 5px solid yellow;
        margin-left: 30rem;
        opacity: .6;
    }
    #gramIcon:hover {
        opacity: 1;
    }
    #base {
        margin-left: 30rem;
        color: darkgreen;
    }

    #footer {
        background-color:black;
        color:white;
        clear: both;
        text-align:center;
        padding:5px;
    }
    /******************************************************************************/
    /****************************LAPTOP Wide***************************************/
    /******************************************************************************/
    @media only screen and (min-width: 768px) {
        input {
            width : fit-content;
            margin: 5px;
        }
        .cuz {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgreen;
            color   : darkgreen;  
            font-weight: 600; 
            border: 5px darkgreen;
            border-radius: 2px;
            border-style: ridge;
            width: 32%;
            margin-left: 35px;
        }
        .question {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgoldenrodyellow;
            color: darkgreen;
            width: 380px;
            border: 3px;
            border-radius: 15px;
            border-style:groove;
            padding: 2px;
            margin-left: 5px;
        }   
    }    
    
    /****************************Tablet***********************************/
    /*********************************************************************/
    @media only screen and (max-width : 990px) and (min-width: 400px) {
        #header {
            font-size:190%;
            position: absolute;
            left: 180px;
            top: 5px;
            padding:5px;
            margin-bottom: 5px;
        }
        h3  {
            font-size: 100%;
            position: relative;
            left: 50px;
            top: 50px;
            padding:5px;
        }
        div#p01  {
            font-size:   1.2rem;
            margin-left: 5rem;
        }
        div#p02  {
            font-size: 130%;
            position: relative;
            left: 5px;
            top: 15px;
            border:5px darkgreen;
            border-radius: 15px;
            padding: 6px;
            margin-left: 5rem;
        }
        div#p03  {
            font-size: 1.5rem;
            position: relative;
            left: 10px;
            top: 30px;
            border:5px silver;
            border-style: inset;
            padding:    10px;
            margin-left: 4rem;
        }
        #sh {
            margin-left: 3rem;
        }
        input {
            width : fit-content;
            margin: 5px;
        }
        .cuz {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgreen;
            color   : darkgreen;  
            font-weight: 600; 
            border: 5px darkgreen;
            border-radius: 2px;
            border-style: ridge;
            width: 72%;
            margin-left: 5rem;
        }
        .question {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgoldenrodyellow;
            color: darkgreen;
            width: 380px;
            border: 3px;
            border-radius: 15px;
            border-style:groove;
            padding: 2px;
            margin-left: 5px;
        }   
        section {
            position: relative;
            top: 35px;
            left: 50px;
            margin-bottom: 10px;
        }
        #write {
            position: relative;
            top: 5px;
            left: 50px;
        }
        textarea {
            position: relative;
            top: 5px;
            left: 50px;
            width: 30%;
            margin-bottom: 10px;
        }
    }
    /****************************************************************************/
    /********************Smartphone *******************************************/
    /****************************************************************************/
    @media only screen and (max-width : 414px) and (min-width: 280px) {
        #header {
            font-size:1em;
            position: absolute;
            left: 30px;
            top: 5px;
            padding:5px;
            margin-bottom: 5px;
        }
        #header2 {
            color: darkgreen;
            font-family: Harry p, Helvetica;
            font-size: 1.9rem;
            font-weight: 600;
            text-shadow:#fff 0 -1px 4px, 
            #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
            position: absolute;
            left: 13%;
        }
        .headShot {
            margin-top:  17%;
            margin-left: 20%;
            width: 200px;
        }
        div#p01  {
            font-size:120%;
            position: relative;
            left: 6px;
            top: 10px;
            border: 6px darkgreen;
            border-radius: 10px;
            padding:5px;
            margin:20px;
        }
        .question {
            color: darkgreen;
            font-size: 84%;
            position: relative;
            left: 10px;
            text-align: left;
        }
        hr {
            height: 3px;
            width: 330px;
            border: 0 none;
        }
        div#p02  {
            font-size: 100%;
            position: relative;
            left: 5px;
            top: 15px;
            border:5px darkgreen;
            border-radius: 15px;
            padding: 6px;
            margin: 5px;
        }
        input {
            width : fit-content;
            margin: 5px;
        }
        .cuz {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgreen;
            color   : darkgreen;  
            font-weight: 600; 
            border: 5px darkgreen;
            border-radius: 2px;
            border-style: ridge;
            width: 85%;
            margin-left: 35px;
        }
        .question {
            background-image: url("../images/ricepaper_blue.jpg");
            background-color: lightgoldenrodyellow;
            color: darkgreen;
            font-size: 1rem;
            width: 310px;
            border: 3px;
            border-radius: 15px;
            border-style:groove;
            padding: 2px;
            margin-left: 2px;
        }   
        section {
            position: relative;
            top: 10px;
            left: 10px;
            margin-bottom: 5px;
        }
        #imgSelect {
            color:white;
            font-size: 15px;
        }
   
        #write {
            font-size: 14px;
            position: relative;
            top: 3px;
            left: 5px;
            
        }
        textarea {
            position: relative;
            top: 5px;
            left: 10px;
            width: 75%;
            margin-bottom: 10px;
        }
        
        #lyrics {
            width: 80%;
            margin-left: 5%;
        }
        #audiowrapper {
            margin-left: 5%;
        }
    
        #gramIcon {
            display: block;
            cursor: pointer;
            width: fit-content;
            margin-left: 10rem;
            opacity: .6;
        }
        #gramIcon:hover {
            opacity: 1;
        }
        #base {
            margin-left: 10rem;
            color: darkgreen;
        }
        
    }