/* 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." */


    * {
  box-sizing: border-box;
}
    
     .smallimage {
       width:75px;
     }
      
      #main {
        margin: 0 auto;
      }
    
    
    a:link {
      color: black;
    }
    
    a:hover {
      color: skyblue;
    }
    
    a:visited {
      color: black;
    }
    
    a:active {
      color: skyblue;
    }
    
    @font-face {
      font-family: "Syne Mono";
      src:url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
    }
    
    .syne-mono-regular {
      font-family: "Syne Mono", monospace;
      font-weight: 400;
      font-style: normal;
    }
    
    
    body {
      font-family: "Syne Mono", monospace;
      margin: 25px;
      background-image: url('/images/sky gradient2.png'); 
      background-repeat:no-repeat;
      color: black;
      padding: 50px;
    }
    
    .text {
      padding: 15px;
    }
    
    h1,
    h2,
    h3, 
    h4, {
      font-family: "Syne Mono";
    }
    
    h1 {
      font-size: 50px;
      text-align: center;
      color: skyblue;
    }
    
    h2 {
      font-size: 45px;
      text-align: center;
      color:black;
      }
      
      /*#babae3 a darker lavender color*/
      
    h3 {
      font-size: 30px;
      text-align: center;
      color:#bbd1fc;
      background-color: white;
      border: 4px dashed #bbd1fc;
      border-radius: 15px;
      width: 550px;
      height: 45px;
      margin: auto;
    }
    h4 {
      color: #bbd1fc;
    }
    
    #inlineh4 {
      color: black;
    }
      
      
    img {
        width:590px;
        padding:0;
        margin: auto;
        border-radius: 15px;
    }
    
    header {
      padding:10px;
      text-align:center;
      margin: auto;
      width:600px;
      border-radius:20px;
      background-color: #e8effc;
    }
    
    nav {
      padding:15px;
      float: left;
      background-color: #e8effc;
      border-radius: 20px;
      position:fixed;
    }
    /*rgb(109, 174, 244) a nice sky blue with more red/purplish hue than standard*/
    /*rgb(187, 209, 252( is the same as #bbd1fc, the color of h3 and h3 border*/
    
    ul {
      list-style-type:none;
      padding:0;
      margin: auto;
      overflow: hidden;
      width:600px;
    }
    
    li {
      float:left;
      padding:5px;
    }
    
    .normallist {
      list-style-type: circle;
      width: auto;
      color: black;
    }
    
    .normallist li {
      float:none
    }
    
    article {
      padding:0;
      width:600px;
      background-color: rgba(135,206,235, 0.2);
      margin: auto;
      border: 5px dashed skyblue;
      border-radius: 15px;
    }
    
    section::after {
      content: "";
      display: table;
      clear: both;
    }
    
    footer {
      color: white;
      text-align: center;
    }