* {box-sizing: border-box;}
     
      body {
        background-image: url("https://traderoftrouble.neocities.org/neocities_space.jpg");
        background-size: cover;
        font-family: "grenze";
      }
      .grenze-thin {
        font-family: "Grenze", serif;
        font-weight: 100;
        font-style: normal;
      }

      .grenze-extralight {
        font-family: "Grenze", serif;
        font-weight: 200;
        font-style: normal;
      }

      .grenze-light {
        font-family: "Grenze", serif;
        font-weight: 300;
        font-style: normal;
      }

      .grenze-regular {
        font-family: "Grenze", serif;
        font-weight: 400;
        font-style: normal;
      }

      .grenze-medium {
        font-family: "Grenze", serif;
        font-weight: 500;
        font-style: normal;
      }

      .grenze-semibold {
        font-family: "Grenze", serif;
        font-weight: 600;
        font-style: normal;
      }

      .grenze-bold {
        font-family: "Grenze", serif;
        font-weight: 700;
        font-style: normal;
      }

      .grenze-extrabold {
        font-family: "Grenze", serif;
        font-weight: 800;
        font-style: normal;
      }

      .grenze-black {
        font-family: "Grenze", serif;
        font-weight: 900;
        font-style: normal;
      }

      .grenze-thin-italic {
        font-family: "Grenze", serif;
        font-weight: 100;
        font-style: italic;
      }

      .grenze-extralight-italic {
        font-family: "Grenze", serif;
        font-weight: 200;
        font-style: italic;
      }

      .grenze-light-italic {
        font-family: "Grenze", serif;
        font-weight: 300;
        font-style: italic;
      }

      .grenze-regular-italic {
        font-family: "Grenze", serif;
        font-weight: 400;
        font-style: italic;
      }

      .grenze-medium-italic {
        font-family: "Grenze", serif;
        font-weight: 500;
        font-style: italic;
      }

      .grenze-semibold-italic {
        font-family: "Grenze", serif;
        font-weight: 600;
        font-style: italic;
      }

      .grenze-bold-italic {
        font-family: "Grenze", serif;
        font-weight: 700;
        font-style: italic;
      }

      .grenze-extrabold-italic {
        font-family: "Grenze", serif;
        font-weight: 800;
        font-style: italic;
      }

      .grenze-black-italic {
        font-family: "Grenze", serif;
        font-weight: 900;
        font-style: italic;
      }
    
      .parentgrid {
        display: grid;
        grid-template-areas: 
            " . header header header . "
          " . sidenav middle middle . "
          " . blog blog sidebar . "
          ". saturnv ribboneel footer .";
        grid-gap: 40px;
        margin-left: 500px;
        margin-right: 500px;
       
    }
      


      .header {
        grid-area: header;
        text-align-last: center;
        color: rgba(41, 27, 27, 1);
        background-color: rgba(57, 178, 255, 0.5);
        outline-color: rgb(102, 175, 80);
        outline-style: solid;
        outline-width: 6px;
        border-radius: 10px;
        padding: 20px;
        margin: auto;

      }
      
       .sidebar { 
  grid-area: sidebar; 
 padding-left: 28px;
 padding-top: 14px;
 margin: 20px;
 max-width: fit-content;
border-radius: 10px; 
background-image: url(https://traderoftrouble.neocities.org/papertexture2.1.jpg);
background-size: cover; 
outline-color: rgba(57, 178, 255, 0.5);
outline-style: solid;
outline-width: 10px;
  }

      .sidenav {
        grid-area: sidenav;
        background-color: rgba(57, 178, 255, 0.5);
        border-radius: 10px;
        color: rgba(41, 27, 27, 1);
        outline-color: rgb(102, 175, 80);
        outline-width: 10px;
        outline-style: solid;
        max-width: fit-content;
        padding: 5px;
        margin: auto;
      }
      /*navbarlinks*/
      .sidenav a {
        color: rgba(41, 27, 27, 1);
        text-align: left;
        padding: 10px 10px 10px 10px;
        text-decoration: none;
      }
      .sidenav a:hover {
        background-color: rgba(102, 175, 80);
        color: rgba(41, 27, 27, 1);
        border-radius: 15px 15px 15px 15px;
      }
      #snlinks {
        text-align: center;
        outline-style: solid;
        outline-width: 4px;
        border-radius: 3px;
        margin: 10px;
        outline-color: rgba(102, 175, 80);
      }

      .middle {
        grid-area: middle;
        display: grid;
        grid-template-areas:
          " item3 item3 item3 item3 item1"
          "item2 item2 item2 item2 item1";
        gap: 30px;
        background-image: url("https://traderoftrouble.neocities.org/lined-paper-texture.jpg");
        background-position: center;
        background-repeat: repeat;
        padding: 30px;
        border-radius: 10px;
        outline-color: rgba(57, 178, 255, 0.5);
        outline-style: solid;
        outline-width: 10px;
        margin: auto;
        color: rgba(41, 27, 27, 1);
        
      }

      .item3 {
        grid-area: item3;
        text-align: left;
        outline-style: dashed;
        outline-color: rgba(95, 62, 38, 0.72);
        border-radius: 10px;
        padding: 10px;
        margin: auto;
        align-content: left;
      }
      .item1 {
        grid-area: item1;
        text-align: left;
        outline-style: dashed;
        outline-color: rgba(95, 62, 38, 0.72);
        border-radius: 10px;
        padding: 10px;
        align-content: left;
      }
      .item2 {
        grid-area: item2;
        text-align: left;
        outline-style: dashed;
        outline-color: rgba(95, 62, 38, 0.72);
        border-radius: 10px;
        padding: 10px;
        align-content: left;
      }
      .ribboneel {
        grid-area: ribboneel;
         border-radius: 10px;
  outline-color: rgba(57,178,255,0.5);
  outline-style: solid;
  outline-width: 10px;
  height: 100px; 
  width: 100px;
      }
      .blog {grid-area: blog;
       display: grid;
    grid-template-areas: 'bnav bhead'
                       'bnav post';
  gap: 30px;  
  margin: auto;
  }
  .blognav { 
  grid-area: bnav;
  color: rgba(41, 27, 27, 1.0);
  background-color: rgba(57, 178, 255, 0.5);
  outline-color: rgb(102, 175, 80);
 outline-width: 6px;
 outline-style: solid;
margin: auto;
  padding: 5px;
 border-radius: 10px;
  max-width: min-content;
 
  }
       .bhead {
  grid-area: bhead;
  text-align: center;
   color: rgba(41, 27, 27, 1.0);
  background-color: rgba(57, 178, 255, 0.5);
  outline-color: rgb(102, 175, 80);
 outline-width: 6px;
 outline-style: solid;
padding-right: 10px;
padding-left: 10px; 
 border-radius: 10px;
margin: auto;
    
  }
  .blognav button{
color: rgba(41, 27, 27, 1.0);
text-align: center;
padding: 10px 10px 10px 10px; 
border: none; 
background-color: rgba(57, 178, 255, 0.0);
font-family: "grenze";
font-size: 16px;
font-weight: 700; 
  }
 .blognavlinks{
 color: rgba(41, 27, 27, 1.0);
    text-align: center; 
    border-radius: 10px;
    margin: 10px;
  }
.blognavlinks:hover {
 text-align: center; 
    outline-style: solid;
    outline-width: 4px; 
    border-radius: 3px;
    margin: 10px;
    outline-color: rgba(102, 175, 80);
  background-color: rgba(102,175,80);
}
  .blognavlinks.active {
  text-align: center; 
    outline-style: solid;
    outline-width: 4px; 
    border-radius: 3px;
    margin: 10px;
    outline-color: rgba(102, 175, 80);
  background-color: rgba(102, 175, 80); 
  }
      .tabcontent {grid-area: post; 
  background-image: url(https://traderoftrouble.neocities.org/oldpapertexture.jpg); 
  padding-top: 0px; 
  padding-left: 40px;
  padding-right: 40px; 
  margin: auto; 
  outline-color: rgba(57, 178, 255, 0.5);
  outline-style: solid;
  outline-width: 10px;
  border-radius: 10px;
  max-width: 300px; 
  max-height: 400px; 
  overflow-y: auto; 
  scrollbar-color: rgb(95, 62, 38) rgba(157, 97, 53, 0);
  align-content: left; 
  position: centered; 
}
      .footer {grid-area: footer;}
      .saturnv {grid-area: saturnv;
       border-radius: 10px;
  outline-color: rgba(57,178,255,0.5);
  outline-style: solid;
  outline-width: 10px;
  margin: auto;
 height: 530px; 
  width: 200px; 
  }