.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
      box-shadow: 10px 10px

}

    .youtube-video-4x3 {
  aspect-ratio: 4 / 3;
  width: 100%;
      box-shadow: 10px 10px

}

         .youtube-video-80 {
  aspect-ratio: 16 / 9;
  width: 100%;
      box-shadow: 10px 10px

}

    .stream-4x3 {
  aspect-ratio: 4 / 3;
      box-shadow: 10px 10px

}

    .video-4x3 {
  aspect-ratio: 4 / 3;
  width: 80%;
      box-shadow: 10px 10px

}

@font-face {
    font-family: '-webfont'; /*a name to be used later*/
    src: url('https://gremlin.neocities.org/fonts/earwig_factory_rg-webfont.ttf'); /*URL to font*/
}

#statuscafe {
    padding: .5em;
    background-color: #edeef3;

}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}



  body {
    margin: 0;
    padding: 0;
    background: #000000;
    line-height: 133%;
    font-size: 0.98em;
    font-family: "Open Sans", "Droid Sans", "Calibri", sans-serif;
    }
    
    
  /*Miscellanous custom styling for various elements.*/
  h1, h2, h3 {
    font-family: "Calibri";
    }
    
    
  blockquote {
    border-left: #9bd5e9 3px solid;
    background: #d4e3ec;
    padding: 0.1px 0.75rem;
    margin: 0 1.5rem;
    }
  
  hr {
    width: 75%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    }
    
  /*Sticky navigation links at the top of the page.*/
  .quick-nav {
    position:fixed;
    z-index: 999;
    width: 100%;

    text-align: right;
    color: #fff;  
    font-size: 0.875em;
    }
    
  .navbar {
    padding: 1px 25px;
    }
    
  .navbar a {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    
    margin: 0 2px;
    }
    
    
    
  /*Header image.*/
  .header {

    background:  url();
    }
  
  /*Title bar with icon and title/tagline.*/
  .title {
    background: linear-gradient(#54c5eb71, #54c5eb71), url(https://gremlin.neocities.org/images/blobz.gif);
    min-height: px;
    margin-bottom: -25px;
    text-align: center;
    }
    
  .title-text, .title-pic {
    padding:0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    }
    
  /*Contains the text tagline.*/
  .title-text {
  	
    padding-right: 1em;
    width: calc(85vw - 110px);
    line-height: 167%;
    margin-top: -3px;
    padding-bottom: 15px;
    }
    
  .title-text h1 {
  	font-family: '-webfont';
    padding:30px;
    font-size: 64px;
    }
    
  /*Contains the profile pic. This can be left out and should still look okay.*/
  .title-pic {
    height: 100px;
    margin-right: 100px;
    margin-top: -25px;
    border: 5px solid #9bd5e9;
    border-radius: 10px;
    }
    
  .title-pic img {
    height: 100%;
    overflow: hidden;
    }
    
  /*Contains the main content and sidebar.*/
  .page-wrapper {
    padding: 0 100px;
    margin: 0 auto;
    background: #ddd;
    background: linear-gradient(#ee99a0a8, #ee99a06b), url(https://gremlin.neocities.org/images/gmcbg.gif); /*Gradient makes tiles "fade in".*/
    }
  
  /*Contains the sidebar boxes.*/
  .sidebar {
    width: 320px;
    margin: 50px 0;
    position: absolute;
    }
    
  .sidebar h1 {
    font-size: 1.2rem;
    background: #65bfdd;
    color: #000000;
    padding: 12px 10px 10px 10px;
    margin: auto;
    
    }
    
  .sidebar a {
    display: block;
    border-left: 3px solid #54c5eb;
    background: #9bd5e9;
    padding: 5px;
    margin: 10px 0;
    color: #0e0718;
    text-decoration: none;
    box-shadow: 8px 8px #547f8d;


    }
    
  .sidebar a:hover, .sidebar a:focus {
    background: #ffffff;
    transition: ease-in 0.1s, ease-out 0.1s;
    }
    
  .sidebar, .main {
    display: inline-block;
    }
  
  /*Contains main content boxes.*/
  .main {
    margin: 50px 100px 50px 350px;
    width: auto;
    width: calc(100vw - 550px);
    
    }
    
    
  /*Basic container type for subsections of main and sidebar divs*/
  .box {
    margin-bottom: 15px;
    box-shadow: 10px 10px

    }
    
    .box h1 {

    background: #65bfdd;
    color: #000000;
    padding: 15px 12px 12px 12px;
    margin: auto;
    box-shadow: 10px 10px #547f8d;
    
    }  
  /*Inner content div for boxes. Padding goes here so sidebar headers etc can keep their no-margin look.*/
  .inner {
    background:  #edeef3;
    padding: 10px 25px;
    
    }
  
  .inner img {
    max-width: 100%; /*Prevent image overflow.*/
    height: auto;
    border-radius: 5px; /*Give images in content rounded corners.*/
    }
    
  .box, .title-pic img {
    border-radius: 5px;
    overflow: hidden; /*Force inner divs to conform to rounded corners.*/
    }
    
    
  /*Footer section.*/
  .footer {
    background: #000000;
    color: #fff;
    padding: 5px 20px;
    font-size: 0.75em;
    padding-bottom: 10px;
    }
    
  .footer a {
    color: #fff;
    }
  
  /*Individual column of the footer. You can have 3 of these at the current given width.*/
  .footer-column {
    width: 25%;
    margin: 5px 10px;
    display: inline-block;
    vertical-align: top;
    }
  
  
  /*Adapt to narrower screens.*/
  @media(max-width: 900px) {
    .page-wrapper {
      padding: 0 50px;
      }
    
    .sidebar {
      width: 25vw;
      }
      
    .main {
      margin: 50px 0 50px calc(25vw + 30px);
      width: calc(75vw - 150px);
      }
      
    .title-pic {
      margin-right: 7vw;
      }
      
    .title-text {
      padding-left: 1vw;
      padding-right: 2vw;
      }
    
    }
    
  /*Mobile layout.*/
  @media(orientation: portrait) {  
    .page-wrapper {
      padding-top: 0.1px;
      padding-bottom: 0.1px;
      }
    
    .sidebar, .main {
      display: block;
      margin: 0 auto;
      position: static;
      width: 100%;    
      }
      
    .sidebar {
      margin-top: 50px;
      }
      
    .main {
      margin-top: 30px;
      margin-bottom: 30px;
      }
      
      
    }
    
  /***
  For really narrow screens which cause the title text to wrap. 
  You may need to adjust the width at which this kicks in to fit 
  your own title.
  ***/
  @media(max-width: 500px) {
    .header {
      height: 60vw;
      }
    
    .title {
      padding-right: 0;
      }
    
    .title-text {
      margin-top: -5px;
      }
      
    .title-text h1 {
      font-size: 6vw;
      line-height: 75%;
      }
      
    .title {
      height: calc(auto - 25px);
      }
      
    .page-wrapper {
      padding: 0.1px 7vw;
      }
      
    /*For extra narrow screens where the columns would get too skinny.*/
    .footer-column {
      display: block;
      width: 100%;
      margin: 0 auto;
      }
    }