@font-face {
  font-family: 'oswald';
  src: url('./fonts/Wavetosh.ttf');
}

header h1 {
  color: #f0c506;
  position: absolute;
  top: 0rem;
  left: 0rem;
  opacity: 90%;
  border-color: #074207;
  border-width: medium;
  font-size: 1.85rem;
  z-index: 1;
  
}

a { color: darkslategray;
    background: goldenrod;  
}

h1 {
font-family: 'oswald', Arial, Helvetica, sans-serif;
}

body {
  margin: 0px; padding:0px;
  color: #22e9ff;
  font-family: 'Crete Round';
  font-weight: 400;
  line-height: 1.6;
  background-color: #652179;
  z-index: 10;

}
h3 {
  color: #782791;
}
h4 {
  color: #44ba00;
    font-family: 'Montagu Slab';
    font-weight: 700;
    font-style: normal;

  };

.hed {
  font-family: 'oswald';
  z-index: 1;
  
}

.nineteen {
  padding-top: 15px;
}

 .nineteen8 {
  padding-top: 25px;
  color: crimson;
  font-size: 21px;
  font-style: bold;
}

.cann {
  color: #aaffb5;
}

/* main */
header {
    height: 100%;
}

ul, ol {
  text-align: center;
  list-style-position: inside;
}

p {
  line-height: 1.6rem;
  letter-spacing: .3px;
  margin-left: 8%;
  margin-right: 8%;

}

.blue {
  background-color: darkblue;
  color: goldenrod;
}

.header-banner {
	  background-image: linear-gradient(to bottom right, black, khaki 80%);
    background-position:center;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px; 
}

.pfp {
  width: 25%;
  height: 100%;
  border-right: 4px solid #044404;
  border-left: 4px solid #044404;
  border-bottom: 5px dotted #044404;
  margin-left: 5%;
}
.john {
  width: 100%;
  height: 100%;
  outline-offset:-10px;
}

@keyframes jiggle {
  from {margin-right: 0%;}
  to {margin-right: 33%;}
}

@keyframes gold {
  from {color: #f0c506;}
  to {color: #84ff00;}
}

.name, .name2, h2, a, #com, .com {
  animation-name: gold;
  animation-duration: 3s;
}

@keyframes boot_gold {
  from {color: #44ba00;}
  to {color: #f0c506;}
}

.booting {
  animation-name: boot_gold;
  animation-duration: 3s;
  margin-top: 4.20%;
}


.float_logo {
  width: 25%;
  height: 75%;
  opacity: 100%;
  float: right;
  margin-top: 2%;
  box-shadow: 81px 27px 4px -32px #002100;
  border-radius: 50%;
  animation: 3s linear 1s infinite alternate jiggle;  
}

.container {
  box-shadow: 10px 10px #044404;
  /* background-color: #5f5f64; */
  text-align: center;
}

#com, .com {
 padding-top: 3%;
 padding-bottom: 1%;
 color: #00ee83;
 height: 50%;
 font-size: 350%;
}

.album {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}



.fizzle {
  margin-bottom: 3.3%;
}

.fizz_em {
  margin-top: 3.3%;
}

.beer_background {
 width: 33%;
 height: 33%;
 background-color: #ca00c7;
 z-index: -1;
 margin-left: 33%;
 border-radius: 50%;
}

.fixed-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 2;
}

.visible-title {  
 visibility: visible;
 font-family: 'oswald';
 color: gold;
}

.beer {
height: 80%;
width: 80%;
border-radius: 50%;
margin-bottom: 9%;
margin-top: 9%;
background-position: center;
z-index: 1;
}

.beer1 {
  height: 80%;
  width: 79%;
  border-radius: 50%;
  margin-top: 9%;
  background-position: center;
  }

.prev2 {
  margin-top: 33px;
}

.stonk {
  height: 45%;
  width: 45%;
}

.name {
    padding-left: 5%;
    padding-top: .7%;
  }
 

nav {
    width: 100%;
    height: 60px;
    background-image: url('../img/bzlogo3.png');
    background-size: 100px, 100px;
    position: fixed;
}
nav div {
    color: #0f4c81;
    background-color: #5f5f64;
    font-size: 2rem;
    line-height: 60px;
    position: absolute;
    top: 0;
    left: 2%;
    visibility: hidden;
}

nav ul {
    list-style-type: none;
    margin: 0 2% auto 0;
    padding-left: 0;
    text-align: right;
    max-width: 100%;
    background-image: url('../img/bzlogo3.png')!important;
    background-position: center;
    background-repeat: repeat;
    background-size: 133px, 133px;
}
nav ul li {
    display: inline-block;
    line-height: 60px;
    margin-left: 10px;
}
nav ul li a {
    text-decoration: none;
    color: #e9ca41;
    background-color: #5f5f64;
    font-size: 1.7rem;
}

.list {
  list-style-type: none;
  margin: auto;
}

@media only screen and (max-width: 400px) {
    .content{
        padding: 2rem 0;
    }
    article {
        float: none;
        margin: 0 auto;
        width: 96%;
    }
    article:last-of-type {
        margin-bottom: 3rem;
    }
    aside {
        float: none;
        text-align: center;
        width: 100%;
    }
    .piss {
      width: 25%;
      font-size: 25px;
    }
    .visible-title {
      width: 25%;
    }
    .site-title {
      width: 25%;
    }
    .pfp {
      width: 52%;
    }
    @keyframes jiggle {
      from {margin-right: 0%;}
      to {margin-right: 18%;}
    }
    
}

.bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  }