/* 
    Created on : Jun 5, 2016, 2:34:33 PM
    Author     : Leonard Garcia
*/

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: black;
}

::-webkit-scrollbar {
    width: 1.2em;
    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 {
    color:darkgreen;
    font-style: italic;
    font-weight: bold;
    text-align:center;
    padding:5px;
}
/*
h1 {
    color:darkgreen;
    background-color:black;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
}

h1::before {
    content: url(../images/romahat.png); 
}
*/
h1{
 color: white;
 
}

.image-text{
    font-size: 80px;
    font-weight: bold;
    background-image: url("../images/CaveDesolate.png");
    background-size: cover;
    background-position: center;
    filter: drop-shadow(4px 4px 5px yellow);
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    background-clip: text;
    color: transparent;
    
    animation: moveBg 5s linear infinite;
    
    @keyframes moveBg {
        from { background-position: 0% center; }
        to { background-position: 100% center; }
    }
    .image-text {
        color: #333; /* fallback */
    }

}

#intersect {
    margin-left: 40px;
}

#internexus {
    margin-left: 3rem;
}
p {
    font-size: 1.1em;
}
.query {
    background-color: linen;
    width:            50%;
    border:           2px;
    border-radius:    5px;
}

p#uni::before {
    content: url(../images/unicycle.jpg); 
}
#tool{
    position:relative; /*this is the key*/
    z-index:24;   
}
#tool span{display: none}
#tool:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;   
    border:1.5px  solid green;    
    border-radius: 7px;
    background-color: greenyellow; color:#000;  
    font-size: .6em;
    text-align: center
}

div#p01  {
    background-color:  khaki;
    border-radius: 25px;
    border: 2px solid #8AC007;
    color:darkblue;
    text-align: left;    
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 10px;
    border:3px solid black;
    max-width: 85rem;
    padding:5px;
    margin:30px;
}
            
div#p02  {
    background-color: lightgreen;
    border-radius: 25px;
    color: darkblue;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 10px;
    border:3px solid black;
    padding:10px;
    margin:30px;
}
#prolog {
    background-color: lightgreen;
    border-radius: 25px;
    color: darkblue;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 10px;
    border:3px solid black;
    padding:10px;
    margin:30px;
}
div#p03, div#p06 {
    background-color: lightgreen;
    border-radius: 25px;
    color: darkblue;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 10px;
    border:3px solid black;
    padding:10px;
    margin:30px;
}
iframe {
    width: 800px; height: 300px;
    border: #8AC007 double 4px;
    position: relative;
    top:        10px;
    left:       50px;
}
div#p04  {
    background-color:#2FD1CD;
    color: black;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top:  20px;
    border:3px solid green;
    padding:10px;
    margin:30px;
}

#p05  {
    background-color: khaki;
    color: black;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 20px;
    border:3px solid green;
    padding:10px;
    margin:30px;
}

#howTo {
    position: relative;
    top:        10px;
    background-color: lightgreen;
    border-radius: 15px;
    color: darkblue;
    text-align: left;
    font-family: sans-serif;
    font-size:160%;
    position: relative;
    left: 10px;
    top: 10px;
    border:3px solid black;
    padding:10px;
    margin: 20px;
    width: fit-content;
}

#warn {
    visibility: hidden; 
}

p#dark1 {
    color: crimson; 
    font-family: sans-serif;
    font-size:100%;
}

p#dark2 {
    color: crimson; 
    font-family: sans-serif;
    font-size:100%;
}
p#dark3 {
    color: crimson; 
    font-family: sans-serif;
    font-size:100%;
}
ol {
    cursor: pointer;
    margin-left: 20px;
}
/* tooltip styles */
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#2FD1CD;  
    color: crimson;     
    font-weight: 900;
    text-decoration:none}

a.info:hover{z-index:25;}  

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;   
    border:1.5px  solid green;    
    border-radius: 7px;
    background-color: greenyellow; color:#000;  
    font-size: .6em;
    text-align: center}

.blue { color: blue; }
    table {
      cursor: pointer;
      float: left;
}
#answers {
    color:darkgreen;
    float: left;
}
div.intro
{
    color: red;
    font-size: 1.5em;
    font-weight: 900;
    border:     3px;
    border-color: #8AC007;
    border-style: ridge;
    border-radius: 4px;
    padding:       2px;
    width: fit-content;
}

table {
    cursor: url(../images/hand.png), default;
    position: relative;
    left: 1px;
    width: 20px;
    border-spacing: 2px 2px;
}
figure {
    width: 7px;
    position: relative;
    left: -37px;
}
figcaption {
    color: darkgreen;
}   

div.panel,div.flip
{
    margin:0px;
    padding:5px;
    text-align:center;
    background:bisque;                    
    border:solid 2px darkolivegreen;             
    width:140px;
}

div.panel
{
    display:none;
    color: #A52A2A;
}
div.flip 
{
    margin-bottom: 5px;
}
#tiny, #tiny2, #tiny3 {
    font-size: .8em;
}
.question
{
    cursor: url(../images/hand.png), default;
    float:left;
}
.questions
{
    color: darkgreen;
    font-weight: 600;
    height: 80px;
    margin-bottom: 10px;
}
.spacer {
    position: relative;
    top: 1vh;
}
.parent {
    display: flex;
    flex-flow: column;
}
.child1, child2 {
    
}

.items {
    width: 250px;
    height: 250px;
    flex-shrink: 1;
}

#footer {
    background-color:black;
    color:white;
    clear: both;
    text-align:center;
    padding:5px;
    width: 150px;
    margin-top: 20px;
}

/******************************************************************************/
/****************************LAPTOP Wide***************************************/
/******************************************************************************/
@media only screen and (max-width : 1366px) and (min-width: 1030px) {
    div#p01, div#p02, div#p03, div#p04, div#p06 {
        max-width: 75rem;
    }
    #p05, #prolog {
        max-width: 75rem;
    }
    div.intro {
        font-size: 1.3em;
        font-weight: 600;
        border:     3px;
        border-color: #8AC007;
        border-style: ridge;
        border-radius: 4px;
        padding:       2px;
        width: 250px;
    }
    #picTest {
        width: 550px;
        background-color: lightgreen;
        color: darkblue;
        text-align: left;  
        font-family: sans-serif;
        font-size:  1.1em;
        position: relative;
        left: 65px;
        top:  87vh;
        border:4px solid green;
        border-radius: 5px;
        padding:    2px;
    }
    
}

/*****************************************************************************/
/*********************************** TABLET ******************************/
/*****************************************************************************/
@media only screen and (max-width : 1024px) and (min-width: 1366px) {
    .spacer {
         width: 20px;
         height: 78px;
     }
    #pic {
        position: relative;
        top: 10px;
        left: 45px;
    }
    .query {
        font-size:        1.1em;
        /*width:            400px; */
        border:           2px;
        border-radius:    5px;
        margin-top:       10px;
        margin-bottom:    10px;
    }
    .questions {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    .question {
        font-size: .8em;
    }
    .parent {
        display: flex;
        flex-flow: column;
        width: 80%;
    }
    .child1 {
        width:      390px;
        margin-top: 50px;
    }
    .child2 {
        width:      390px;
        margin-bottom: 50px;
    }  
    .container {
        display: flex;
        flex-flow: wrap;
        justify-content: space-evenly;
        position: relative;
        top:  45vh;
        left: 10px;
        width: 400px;
        margin-top: auto;
    }
    .items {
        width: 150px;
        height: 150px;
        flex-shrink: 3;
    }
        
    #footer {
        position: relative;
        top:    10vh;
        left:   5vw;
    }
    
}
/******************************************************************************/
/********************************Smartphone *********************************/
/*****************************************************************************/
@media only screen and (max-width : 414px) and (min-width: 240px) {
   .image-text{
        font-size: 30px;
        filter: drop-shadow(1px 1px 1.5px yellow); 
   } 
    
    iframe {
        width: 355px; height: 300px;
        position:   relative;
        top:        10px;
        left:       20px;
    }
    #intersect {
        margin-left: 8rem;
    }
    #internexus {
        margin-left: 3rem;
        width: 50%;
    }
    p {
        font-size: .85em;
    } 
    div#p01 {
        font-size: .8em;
    }
    #p05 {
        font-size: .9em;
    }
    ol {
        font-size: .8em;
    }
    div.panel,div.flip {
        margin: 0px;
        padding:    8px;
        text-align: left;
        background-color: ghostwhite;                     
        border:solid 2px darkolivegreen;             
        width: auto;   
    }
    div.flip {
        font-size: 1em;
    }
    .query {
        font-size:        1em;
        /*width:            400px; */
        border:           2px;
        border-radius:    5px;
        margin-top:       10px;
        margin-bottom:    10px;
    }
    .questions {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .question {
        font-size: .8em;
    }
    
    .items {
        width: 150px;
        height: 150px;
        flex-shrink: 3;
    }
    #picTest {
        width:      80vw;
        font-size:  1.1em;
        position:   relative;
        left:       20px;
        top:        155vh;
        margin:     13px;
    }
    #footer {
        
    }
}