@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans|Roboto|Rokkitt|Alpha+Slab+One');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC');
@import url('https://fonts.googleapis.com/css?family=Anton|Monoton&display=swap');

/* unvisited link */
a:link {
  color: #FFC2AA;
}

/* visited link */
a:visited {
  color: #FFC2AA;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link doesn't work???*/
a:active {
  color: blue;
}

/*
*{outline: white 1px solid;}

#64284A;   dark purple
#AF3C5E;   purple
#FA5072;   pink
#FFC2AA;   offwhite
#190036;   navy blue
*/
body
{
  background-color: #190036;  
}
#container
{
    padding: 15px;
    background-color: #190036;
    color: #FFC2AA;
}
#logo
{
    max-width:  100px; max-height: 50px;
}
.blue
{
    background-color: #64284A;
    text-align: center;
}
.header
{
    background-color: #64284A; 
}
h1
{
   font-family: 'Abril Fatface', cursive;
}
h2
{
    text-align: center;
    font-family: 'Monoton', cursive;
}
h3
{
    font-family: 'Abril Fatface', cursive;
}
.pageSelect
{
    background-color: #FA5072; 
    text-align: center;
    outline: #FFC2AA 1px solid;
    font-weight: bold;
}
.pageHeader
{
    background-color: #64284A; 
}
.learnBody /* LEARN PAGE ONLY*/
{
    background-color: #AF3C5E;
}
.libraryColumn   /* ?LIBRARY ONLY*/
{
    background-color: #AF3C5E;
    grid-template-columns: 25% 75%;
}
.aboutColumn
{
    background-color: #AF3C5E;
    width: 100%;
}
.mainLinks  /* HOME AND LIBRARY ONLY*/
{
    background-color: #AF3C5E;
}
.quickLink
{
    background-color: #64284A;
    color: #64284A;
    text-align: center;
}
picture
{
    background-color: papayawhip;
}
.comic
{
    background-color: #FFC2AA;
    height: 1px;  
}
.fas   /*FONT AWESOME CSS*/
{
    color: #FFC2AA;
    font-size: 8em;
    padding: 15px;
    padding: 15px;
}
.comic img
{
    border-radius: 8px; /*gives img rounded edge*/
    max-height: 50%;
    max-width: 50%;
    object-fit: contain;
}
.colorBlock
{
    min-height: 5px;
    min-width: 100%;
    background-color: #64284A;
}
/*sm*/
@media (min-width: 576px) 
{ 
                
}
     
/*med*/
@media (min-width: 768px) /*when we reach this size screen we want the green class to act differently*/
{
.mainLinks
{
    display: grid;
    grid-template-columns: 25% 75%;
}
.learnBody
{
    display: block
}
.libraryColumn  /*PRICES / LIBRARY page have inpage styles*/
{
    display: grid;
    grid-template-columns: 33% 67%;
}
.aboutColumn
{
    display: grid;
    grid-template-columns: 25% 75%;
}
.comic
{
    height: 3px;  
}
.colorBlock
{
    min-height: 15px;
}
/*lag*/
@media (min-width: 992px) 
{
h2
{
    text-align: right;
}
.pageSelect
{
    outline: none;
}
.mainLinks
{
    display: block
}
.comic
{
    height: 5px;  
}
    
}

/*xl*/
@media (min-width: 1200px) 
{
}










/*
    font-family: 'Abril Fatface', cursive;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Alfa Slab One', cursive;
    font-family: 'Rokkitt', serif;
*/
/**{
    outline: 2px solid lime;
}*/

/*
#container{
    background-color: rgb(102, 45, 52);
    max-width: 1800px;
    padding: 0px;
    margin: auto;
    padding-bottom: 3px;
    }
#header{
    height: 250px;
    display: grid;
    grid-template-columns: 33% 67%;
}
#logocont{
    padding: 15px;
    
}
#logocontgrid{
    display: grid;
    grid-template-rows: 50% 50%; 
    height: 100%;
}
#logo{
    background-color: rgb(162,120,113);
    }
img{
    height: 12rem;
    margin-left: 12%;
    object-fit: cover;
}
.logosmall{
    background-color: rgb(162,120,113);
    height: 70%;
    margin-top: 15px;
    margin-left: 15px;
}
#namecont{
    display: grid;
    grid-template-rows: 50%;
    padding: 15px;
}
.name{ 
    height: 100%;
    width: 100%;
    padding: 1px;
}
.banner{
   background-color: rgb(193,171,148);
   text-align: right;
   font-size: 1.75rem;
    color: rgb(102,45,52);
}
#body{
    background-color:blueviolet;
    height: 100%;
    display: grid;
    grid-template-columns: 66% 34%;
    font-family: 'Open Sans', sans-serif;
    font-size: 4rem;
    margin: 15px;
    background-color: rgb(146,111,98);
    }
#maintext{   
    height: auto;
    padding: 25px 5% 5% 5%; 
}
#maintext2{   
    padding: 25px;
    display: grid;
    grid-template-rows: auto auto;
}
#maintext div{
    background-color: rgb(162,120,113);
    height: 100%;
    width: 100%;
    padding: 2%;
    text-align: center;
    color: rgb(213,199,177);
}
#maintext2 div{
    background-color: darkorchid;
    height: 100%
    width: 100%; 
    padding: 2%;
    text-align: left; 
    background-color: rgb(162,120,113);
    color:  rgb(213,199,177);
}
#center{
    text-align: center;
}
li{
    font-size: 3rem;
}
#nav{
    height: 700px;
    padding: 25px 5% 5% 5%;   
    text-align: right;
}
#nav > div{
    background-color: darkorchid;
    height: 100%;
    width: 100%;
    padding: 2%;
    bottom: 0;
    left: 0;
    background-color: rgb(162,120,113);
}
.nolink{
    background-color: rgb(146,111,98);
    height: 2%;
}
.link{
    background-color: rgb(146,111,98);
    font-size: 3rem;;
    margin: 5px;
    margin-top: 5%;
    height: 10%;
}


a:link, a:visited{
    text-decoration: none;
    color: rgb(193,171,148);
}
a:hover, a:active {
  text-decoration: none;
    color: black;
}*/

/*
.link a{
    text-decoration: none;
}
a:active{
    text-decoration: underline;
}

    font-family: 'Abril Fatface', cursive;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Alfa Slab One', cursive;
    font-family: 'Rokkitt', serif;
*/