body {
  background: yellow;
  margin:0;
  padding:0;
}

/*Navigation*/

.topbar {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 70px;
  border-bottom: 0.25px solid black;
  z-index: 24;
  background-color: yellow;
  position: fixed;
}

.nav{
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
   -webkit-text-fill-color: yellow;
   -webkit-text-stroke-width: 1.25px;
   -webkit-text-stroke-color: black;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
            line-height: 23px;
}

a:link    {
  text-decoration: none;
}

a:hover { 
  transform: skew(-20deg);
}

#bencain {
    cursor: pointer;
    position: fixed;
    z-index: 25;
    top: 21px;
    left: 25px;
}

#about {
    cursor: pointer;
    position: fixed;
    z-index: 25;
    top: 21px;
    right: 25px;
}

#archive {
    cursor: pointer;
    position: fixed;
    z-index: 25;
    top: 21px;
    text-align: center;
    left: 45vw;
}

/*Text*/

.container {
    top: 70px;
    position: absolute;
}

.textbox {
  border-right: none;
  border-bottom: none;
  left: 0px;
  width: 66vw;
  height: auto;
  z-index: 23;
  float: left;
    border-right: 0.25px solid black;
}

.taggs {
  right: 0px;
  padding-top: 10px;
  width: 33vw;
  height: auto;
  z-index: 22;
  float: right;
}

h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 45px;
  padding-left: 25px;
  padding-right: 25px;
  color: black;
}

h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 25px;
  color: black;
  padding-left: 25px;
  padding-right: 25px;
}

b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 25px;
  color: black;
}

p {
  font-family: 'Archivo', sans-serif;
  font-size: 25px;
  color: black;
  padding-left: 25px;
  padding-right: 25px;
}

.taggs a{
  color: black;
}

.taggs a:hover{
  text-decoration: underline;
}





@media screen and (max-width : 1030px) {

/*Text*/

.textbox {
  border-right: none;
  border-bottom: 0.25px solid black;
  width: 100vw;
}

.taggs {
  padding-top: 20px;
  width: 100vw;
  float: left;

}

/*Navigation*/

#archive {
    left: 43vw;
}

#bencain {
    left: 10px;
}





@media screen and (max-width : 500px) {

/*Navigation*/

  .nav{
font-size: 18px;
   -webkit-text-stroke-width: 1px;
}

.topbar {
  height: 40px;
}


#bencain {
    top: 9px;
    left: 10px;
}

#about {
    top: 9px;
    right: 10px;
}

#archive {
    top: 9px;
    left: 40vw;
}

.container {
    top: 40px;
}

/*Text*/

h1 {
  font-size: 35px;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

b {
  font-size: 18px;
}

p {
  padding-left: 10px;
  padding-right: 10px;
      font-size: 18px;
}



}