/* 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." */
body {
  background-image: url("/assets/tumblr_inline_p7gh2lmMFc1rbx4br_400.jpg");
  background-size:50px;
  background-repeat: repeat;
  background-attachment: fixed;
  
    color: brown;
    font-family: "MS UI Gothic", "MS Gothic";
    font-size:12px;
    font-weight: 400;
}     

 h3 {
      color: white;
      font-size:15px;
      text-shadow: 0.075em 0.075em 0 brown;
      background:#FFC66B;
      text-align:center;
      border-radius:5px;
      position: relative;
      padding:2px;
      margin: 5px;
      letter-spacing:2px;
      
    }

  .boxouter {
      max-width: fit-content;
       background-color:#fff;
      margin: auto;
      border:1px solid;
      max-height: fit-content;
      border-radius: 10px;
      border-color:gray;
      padding-left:2px;
      padding-right:2px;
      padding-top:2px;
      padding-bottom:2px;
  }
        

  .box {
      max-width: fit-content;
       background-image: url(/assets/dot-02-31.gif);
      margin: auto;
      border:1px solid;
      height:900px;
      border-color:#eb6a17;
      border-radius: 10px;
      padding-left:5px;
      padding-right:5px;
      padding-top:5px;
      padding-bottom:5px;
    display: grid;
    grid-template-columns: 250px 150px 150px 250px 250px auto;
    grid-template-rows: auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px; 
  }
        
  
  .twitch-embed{
    size:100px;
  }
  
    header-outer {
      background-color: white;
      position: relative;
      grid-area: 1 / 1 / 2 / 6; 
      height:200px;
      z-index:4;
      border: 5px solid;
      border-image: url(frillyborder.png) 11% round;
      box-sizing: border-box;
    }
    
      header-outer h1 {
        
        font-family: "Mochiy Pop One", sans-serif;
        position:absolute;
        font-size: 70px;
        left:575px;
        text-overflow:visible;
        white-space: nowrap;
        color: #FFC66B;
            paint-order: stroke fill;
            text-shadow: 0.075em 0.075em 0 #FA8B37;
    -webkit-text-stroke: 0.1em #FFFF;
        top:60px;
        z-index: 5;
      }
      
          header-outer h1:hover {
        animation: wobble 0.8s ease-in-out;
        
    }

    @keyframes wobble {
        0% { transform: translateX(0%) rotate(0deg); }
        15% { transform: translateX(-2.5%) rotate(-2deg); }
        30% { transform: translateX(2%) rotate(1deg); }
        45% { transform: translateX(-1.5%) rotate(-1deg); }
        60% { transform: translateX(1%) rotate(1deg); }
        75% { transform: translateX(-0.5%) rotate(-0.5deg); }
        100% { transform: translateX(0%) rotate(0deg); }
    }
    
        header-inner {
      
       background-color: transparent;
      list-style-type: none;      
      padding:2px;
      border: 1px dashed;
      border-color:#a6a6a6;
      border-radius: 10px;
      height: 97%;
      display: block
    }
    
          status {
      	position: relative;
      	top:75px;
      	float:right;
      	padding:2px;
      	width:300px;
      left:15px;
      	background: #ffe759;
      	border-radius: .4em;
      	z-index: 4;
      }
      
          status:after {
          	content: '';
          	position: absolute;
          	bottom: 0;
          	left: 10%;
          	width: 0;
          	height: 0;
      border-color:brown;
      border:1px solid;
          	border: 12px solid transparent;
          	border-top-color: #ffe759;
          	border-bottom: 0;
          	border-left: 0;
          	margin-left: -12.5px;
          	margin-bottom: -3%;
          }
          
          status-inner {
                        border: 1px dashed;
      border-color:orange;
      border-width:1.75px;
      border-radius: 5px;
      padding:2px;
      height:50px;
      display: block;
    }
          
          
          
     
    navbar {
      grid-area: 2 / 1 / 3 / 6;
      height:25px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
    }
      navbar a {
        display: inline-block;
        border:1px solid #fff;
        border-radius:5px;
           color: white;
    paint-order: stroke fill;
    text-shadow: 0.15em 0.15em 0 #FAA637;
    -webkit-text-stroke: 0.2em #FFDF6B;
    font-weight: bold;
    font-size:15px;
        position: relative;
        background: linear-gradient(180deg,rgba(252, 255, 199, 1) 0%, rgba(255, 223, 107, 1) 48%, rgba(250, 192, 55, 1) 52%, rgba(255, 223, 107, 1) 100%);
        padding: 5px 30px;
        margin-left:auto;
        margin-right:auto;
        margin-top:10px;
        margin-bottom:10px;
        text-decoration: none;
        stroke: 0.2em #FFC66B;
      }
      
      navbar a:hover {
        text-shadow: -1px -1px 0 rgba(255, 198, 107, 1), 1px -1px 0 rgba(255, 198, 107, 1), -1px 1px 0 rgba(255, 198, 107, 1), 1px 1px 0 rgba(255, 198, 107, 1);
        position: relative;
        background: linear-gradient(180deg,rgba(255, 234, 199, 1) 0%, rgba(255, 198, 107, 1) 48%, rgba(255, 163, 92, 1) 52%, rgba(255, 198, 107, 1) 100%);
        font-weight: bold;
      }
        
    links-outer {
      background-color: white;
      list-style-type: none;      
      grid-area: 3 / 1 / 4 / 2; 
      border: 5px solid;
      border-image: url(frillyborder.png) 11% round;
      height: max-content;
    }
    
    links-inner {
      
       background-color: transparent;
      list-style-type: none;      
      padding:2px;
      border: 1px dashed;
      border-color:#a6a6a6;
      border-radius: 10px;
      display: block;
    }

    
      links-inner a {
        font-size:13px;
        font-weight:bold;
        position: relative;
        background-color: transparent;
        color: orange;
        margin-top:5px;
        margin-bottom:5px;
        margin-left:5px;
        padding:5px;
        text-decoration: none;
      }
      
      /* Change the link and background color on hover */
      links a:hover {
        color: orange;
      }
    
  .dashed {
  border: 0.01px dashed #bbb;
}
    
    
     twitch-outer {
      background-color: white;
      border: 5px solid;
      grid-area: 4 / 1 / 5 / 2; 
      border-image: url(frillyborder.png) 11% round;
      box-sizing: border-box;
      position: relative;
      top:0px;
      height:max-content;
    }
    
    twitch-inner {
border: 1px dashed;
      border-color:#a6a6a6;
      border-radius: 10px;
      display: block;
      margin-left:2px;
      margin-right:2px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    updates-outer {
      background-color: white;
      position: relative;
      grid-area: 5 / 1 / 6 / 2;
      overflow-y: auto; 
      height: 238px;
      top:0px;
      padding: 2px;
      border: 5px solid;
      border-image: url(frillyborder.png) 11% round;
      box-sizing: border-box;
    }
    
    updates-inner {
            border: 1px dashed;
      border-color:#a6a6a6;
      border-radius: 10px;
      display: block;
    }
    
    
        updates-inner h3 {
      color: white;
      background:#FFC66B;
      text-align:center;
      position: relative;
      margin: 5px;
        }
    
    main-outer{
       background-color: white;
      border: 5px solid;
      grid-area: 3 / 2 / 6 / 5; 
      border-image: url(frillyborder.png) 11% round;
      box-sizing: border-box;
      position: relative;
      height:635px;
    }
  
  
    
    main-inner {
      border: 1px dashed;
      border-color:#a6a6a6;
      border-radius: 10px;
      display: block;
      max-height: 612px;
      overflow-y:scroll;
      scrollbar-width: thin;
      padding: 5px;      
    }
    
    idk1 {
    grid-area: 3 / 5 / 4 / 6;
    display: flex;
    background-color: white;
    border: 5px solid;
     border-image: url(frillyborder.png) 11% round;
    box-sizing: border-box;
    }
    
    idk2 {
    grid-area: 4 / 5 / 5 / 6;
    background-color: white;
    border: 5px solid;
    border-image: url(frillyborder.png) 11% round;
      box-sizing: border-box;
    }
    
    idk3 {
    grid-area: 5 / 5 / 6 / 6;
    background-color: white;
    border: 5px solid;
     border-image: url(frillyborder.png) 11% round;
   box-sizing: border-box;
    }
    
    footer {
      text-align: center;
      padding:5px;
      font-size:12px;
      grid-area: 6 / 1 / 7 / 6;
      background: rgba(255, 255, 255, 0.5);
      display:inline-block;
      border-radius:10px;
      margin-bottom:100px;
    }