/*
Author:  Leonard Garcia
All Rights Reserved
Created on January 27, 2025
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#futureShot{
    border: 4px;
    border-color: #cabc26;
    border-style: groove;
    border-radius: 6rem;
    margin-left: 25%
}

h1  {
    color: darkgreen;
    font-family:verdana;
    font-size: 200%;
    position: relative;
    left: 310px;
    top:   30px;
    padding: 10px;
}

h2  {
    color: yellow;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 80%;
    position: relative;
    left: 5px;
    top:   5px;
    padding: 5px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}
h3 {
    color: #29c389;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 100%;
    margin-left: 25px;
    margin-bottom: -10px;
}


#alive {
    color: yellow;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40px;
    font-weight: 600;
    margin-top:  5rem;
    margin-left: 3rem;
}
#pregnant {
    border: 4px;
    border-color: #29c389;
    border-style: solid;
    border-radius: 5%;
    margin-top:4rem;
    margin-left: 2rem;
    margin-bottom: -3rem;
}
#radioDir {
    border: 4px;
    border-color: silver;
    border-style:double;
    border-radius: 5%;
    color:          black;
    background-color: silver;
    font-size: 20px;
    padding: .5rem;
    margin-top: 3rem;
    margin-left: 3rem;
    width: 380px;
}

.pnorm {
   color: darkgreen;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 300;
   width: auto;
}
.norm_story {
    background-color: white;
    font-size: 20px;
    font-style: normal;
    width: 80%;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 50px;
    left: 20px;
    margin-bottom: 5px;
}
.pspec {
   color: darkgreen;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 300;
   width: auto;
}
.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;
}
.directions{
    background-color:white;
    color:darkgreen; 
    border: 4px;
    border-color: silver;
    border-style: solid;
    border-radius: 4px;
    text-indent: 3%; 
    font-size:  1.3rem; 
    padding:    2px;
    width:      20rem;
    margin-left: 2rem;
}

.splitImages {
    border: 4px;
    border-color: darkgreen;
    border-style: ridge;
    border-radius: 4px;
    margin-left:  3rem;
    margin-right: -2.5rem;
    width: 300px; height: 200px;
}
.textWindow {
    color: black;
    background-color: white;
    font-size:      20px;
    border:         4px;
    border-color:   darkgreen;
    border-style:   ridge;
    border-radius:  4px;
    margin-left:    2rem;
    margin-right:   2rem;
    width:          250px;
}
.inRow {
    display:        inline-block;
}

p#blue {
   color: blue;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: .75em; 
   font-weight: 600;
}
p#red {
   color: red;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: .75em; 
   font-weight: 600;
}
p#story {
   background-color: white;
   color: black;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-style: italic;
   font-size: .85em; 
   font-weight: 500;
   margin-bottom: 10px;
}
.p1::first-letter {
    font-size: 200%;
    color: #186321;
} 
#p1::first-letter {
    font-size: 200%;
    color: #186321;
}
.conj {
    border: 4px;
    border-color:#186321;
    border-style:dotted;
    background-color: white;
    color: #186321;
    padding-left: 2.5rem;
}
.conj2 {
    font-family:cursive;
    font-size:  20px;
    font-weight: 600;
    border: 4px;
    border-color:#186321;
    border-style:dotted;
    background-color: white;
    color: #186321;
    padding: .5rem;
    margin-left: 20px;
    width: fit-content;
}

ol {
    border: 4px;
    border-color: #186321;
    border-style: double;
}
#timeline {
    position: relative;
    left: 20px;
}
#topimage {
    position: relative;
    top: 60px;
    left: 30px;
}
#def {
    position: relative;
    top: 60px;
    left: 30px;
}

.textwrap {
    float: left;
    margin: 10px;
    border: 2px;
    border-color: transparent;
    border-style: solid;
    border-radius: 50%;
}

#cartoon {
    position: relative;
    top: 5px;
    left: 20px;
    margin-bottom: -7px;
}

#chkUp{
    position: relative;
    text-align: left;
    font-size: 2rem;
    transition: 0.5s;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: burlywood;
}

#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;
}
#inset {
    margin-top: -1.5rem;
    margin-left: -.5rem;
    margin-bottom: 1.8rem;
}
#larger {
    font-size: 1.5rem;
    padding: 1rem;
    margin-top: -1.5rem;
    margin-left: -.5rem;
    margin-bottom: 1.8rem;
}
#small {
    width: 50px; height: 50px;
}
#except {
    width: 2rem; height: 2rem;
    margin-top: -.3rem;
}
#reporter {
    border: 4px transparent;
    border-radius: 25%;
    float: left;
    margin-top: -1rem;
    margin-left: -1rem;
    padding: 1rem;
    width: 6rem; height: 8rem;
}
#pad {
    font-family: serif;
    font-size: 24px;
    padding: 4px;
    height: 8rem;
}
#TEdison {
    background-image: url("../images/old_paper.jpg");
    background-color: grey;
    color: black;
    font-size: 25px;
    font-weight: 600;
    border: 6px gold;
    border-radius: 5%;
    border-style: groove;
    width: fit-content;
    padding: 6px;
    margin-top: 8rem;
    margin-left: 2rem;
}
div#warning {
    background-image: url("../images/old_paper.jpg");
    background-color: grey;
    color: black;
    font-size: 20px;
    font-weight: 600;
    border: 6px gold;
    border-radius: 5%;
    border-style:ridge;
    width: fit-content;
    padding: 6px;
    margin-top: 4rem;
    margin-left: 2rem;
}

div#header {
    width: 700px;
}  
  
div#content {
    height: 200px;
    width: auto;     
}  

.pVerb {
    background-color: lightgoldenrodyellow;
    background-image: url("../images/old_paper.jpg");
    color: darkgreen;
    font-size: 1.2rem;
    width: 640px;
    border: 2px;
    border-radius: 4px;
    border-style: ridge;
    padding: 2px;
    margin-left: 20px;
}
.caption {
    color: yellow;
    text-shadow: 0px 2px 3px #555;
    font-family:verdana;
    font-size: 1.3em;
    position: absolute;
    left: 40px;
    top: 90px;
    padding:5px;
    margin-bottom: 10px;
    
}
#rules {
    font-size:  15px;
    font-weight: bold;  
    width: 45vw;
    padding: 4px;
    border: 8px;
    border-radius: 6px;
    border-color: #139483;
    border-style: ridge;
    background-color: black;
    color:      gold;
    position:   relative;
    left:       20px;
}
#fortune {
    position: relative;
    top:      80px;
    left:    -600px;
}

/* FOR SMARTPHONE ***********************SMARTPHONE*********************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width : 414px) and (min-width: 240px) {
    #body {
        width: 400px;
        overflow-x: hidden; 
        margin: 0;
    }  
    #pregnant {
        width: auto;
        height: 250px;
        margin-bottom: .5rem;
    }
    #chkUp {
        color:burlywood;
        text-shadow: -2px 2px 2px black;
        font-size: 2rem;
        margin-left: -280px;
    }
    
    #rules {
        margin-left: 20px;
    }
    
}