/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* UNIVERSAL STYLES */

      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body{
        background: url("purple.jpg");
        font-family: times;
        color: #FFF0F5;
        font-size: 14px;
        cursor: url("https://www.picgifs.com/mini-graphics/mini-graphics/mice/mini-graphics-mice-596223.gif"), auto;
      }
      
      /* Text indent for paragraphs */
      p{
        text-indent: 1em;
      }
      
    .vertical {
        width: 80%;
        margin: auto;
        overflow-y: auto;
        
    }
    
    .nav-links {
        list-style-type: none;
        padding: 20px 0;
        margin: 0;
        
    }
    
    .nav-links li {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .nav-links li a {
        
        display: block;
        font-weight: bold;
        font-size: 20px;
        text-decoration: none;
        letter-spacing: 2px;
        color: black;
        font-variant: none;
        text-transform: lowercase;
        background: lightgray;
        
        
    }
    
    .nav-links li a:hover {
        color: black;
        background: darkgray;
    }
    
    
    .news-tile
    {
      width: 100px;
      height: 100px;
      border-radius: 25px;
      margin: 20px;
      box-shadow: 10px 10px 5px black;
    }
    
    .book-entry
    {
      margin-bottom: 20px;
    }
    
    .book-icon /*img class*/
    {
      width: 200px;
      box-shadow: 10px 10px 5px black;
    }
    
    .book-review /*p class*/
    {
      font-size: 14px;
      font-family: times;
      color: black;
      float:right;
    }
    
    .divider
    {
      width: 300px;
      display:block;
      margin:auto;
    }
    

    #not-selected{
        border-top: 5px outset white;
        border-left: 5px outset white;
        border-bottom: 5px outset gray;
        border-right: 5px outset gray;
    }
    
          /* Appearance of selected navigation tab */
      #selected{
        background: magenta;
        border-top: 5px inset gray;
        border-left: 5px inset gray;
        border-bottom: 5px inset white;
        border-right: 5px inset white;
      }


      
/* ELEMENT-SPECIFIC STYLES */
  
      
      #welcome_portal{
        width: 40%;
        margin: 10% 10% 30% 30%;
        animation: bobbing 2s ease-in-out infinite;
        animation-direction: alternate;
      }
      
      #welcome_body{
        background: url("SKY1.png");
        cursor: initial;
        overflow: hidden;
      }
      
      #wrapper-div
      {
          width: 70%;
          margin: auto;
      }
      
      #logo-div{
        width: 100%;
        min-height: 100px;
        column-width: auto;
        background: #556B2F;
        padding-left: 2%;
        padding-right: 2%;
        margin-top: 5%;
        margin-bottom: 20px;
        overflow: hidden;
        box-shadow: 10px 5px 5px black;
      }
      
      #nav-div
      {
        width: 100%;
        min-height: 30px;
        margin-bottom: 20px;
      }
      
      #menu
      {
        width: 20px;
      }
      
      #main-div
      {
        min-height: 400px;
        margin-bottom: 20px;
        
      }
      
      #sidebar-div
      {
        min-height: 400px;
        width: 20%;
        background-image: url("white shell.JPG");
        margin-right: 2%;
        float: left;
        box-shadow: 10px 5px 5px black;
      }
      
      .body-div
      {
        min-height: 400px;
        width: 78%;
        float: right;
        position: relative;
        box-shadow: 10px 5px 5px black;
        padding: 50px;
      }
      
      #home-body
      {
        background-image: url("water.png");
        position:relative;
      }
      
      #graf{
        font-size: 20px;
        font-style: italic;
        letter-spacing: 2px;
        font-weight: bold;
        text-indent: 1em;
        padding: 40px;
        color: black;
      }
      
      #footer-div
      {
        width: 100%;
        min-height: 100px;
        background: magenta;
        box-shadow: 10px 5px 5px black;
      }
      
      
      
      /* Real time clock */
      #clock{
        background-image: url("https://i.pinimg.com/originals/07/f7/27/07f72772fee4f51adcf8f9aa9fa1a8e0.gif");
        max-width: 50%;
        margin: auto;
        margin-top: 30%;
        font-weight: bold;
        font-size: 18px;
        color: white;
        border-top: 5px inset gray;
        border-left: 5px inset gray;
        border-bottom: 5px inset white;
        border-right: 5px inset white;
        padding: .25em;
        
      }
      
      #title{
        height: 100px;
        line-height: 100px;
        font-size: 16px;
        float: left;
        margin-right: 2%;
        margin-left: 2%;
        margin-top: 10px;
      }
    
      #logo-image{
        max-width: 75%;
        float: right;
        overflow: hidden;
        margin-top: 10px;
      }
      
      .outer-div {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        text-align:right;
        overflow:hidden;
        white-space: nowrap;
      }
      
      .inner-div {
        float:right;
      }

      
      #guinea{
        height: 100px;
      }
      


      /* Appearance of website title (Slant Rhyme) */
      #welcomeLink {
        font-size: 30px;
        font-style: italic;
        font-weight: bold;
        font-family: times;
        letter-spacing: 2px;
        color: #ADFF2F;
        animation: color-change 1s infinite;
        text-decoration: none;
      }
  
/* CLASSES */
  
      .clearfix
      {
        content: "";
        display: block;
        clear:both;
      }

      /* Gallery format template */
      div.gallery {
        margin: 10px;
        float: left;
        width: 200px;
      }
      
      /* Gallery image format */
      div.gallery img {
        width: 100%;
        height: auto;
      }
      
      /* Clicked gallery image is enlarged in center of screen*/
      div.gallery img:focus{
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(4); 
      }
      
      /* Gallery item description format */
      desc {
        padding: 15px;
        text-align: center;
      }
      
      

/* KEYFRAMES */
    
    /* Color-change function for website title */
    @keyframes color-change {
      0% { color: darkblue; }
      50% { color: magenta; }
      100% { color: darkblue; }
    }
    

    @keyframes bobbing {
        0% {
            transform: translateY(10px);
        }
        100% {
            transform: translateY(-10px);
        }
    }