body{
	background-image: url("img/bg.gif");
  background-size: cover;
  min-height: calc(100vh - 16px);
}

@font-face {
  font-family: vcr;
  src: url(vcr_osd_mono.woff);
}

a{
	font-family: vcr;
	list-style: none;
	color: white;
  text-decoration: none;

}

#header{
	background-color: transparent;
	width: 100%;
	height: 200px;
  display: block;
}

#homebtn{
  top: 8px;
  left: 8px;
  width: 236px;
  height: 155px;
  background-color: transparent;

  /*border: 1px solid green;*/
}

#socialsimg{
  position: absolute;
  right: 8px;
}



#twitterbtn {
  top: 20px;
  right: 249px;
  width: 46px;
  height: 46px;
  background-color: transparent;

/*border: 1px solid black;*/
}

#instabtn {
  top: 23px;
  right: 171px;
  width: 48px;
  height: 44px;
  background-color: transparent;

/*border: 1px solid blue;*/
}

#ytbtn {
  top: 23px;
  right: 101px;
  width: 47px;
  height: 43px;
  background-color: transparent;

/*border: 1px solid red;*/
}

#patreonbtn {
  top: 20px;
  right: 27px;
  width: 49px;
  height: 45px;
  background-color: transparent;

/*border: 1px solid orange;*/
}

#feedbackbtn {
  top: 85px;
  right: 8px;
  width: 520px;
  height: 55px;
  background-color: transparent;

  /*border: 1px solid orange;*/
}

.socbtn{
	position: absolute;
}
.socbtn:hover{
	cursor: pointer;
}

#issue-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 50px;
  min-height: calc(100vh - 200px - 30px - 16px);
}


.issue-container{
	margin: 70px auto 0px auto;
	width: 180px;
	height: 325px;
	font-size: 24px;
}
.issue-lbl{
	margin: 6px auto;

}

#issue-1{
  background-color: black;
  border: none;
  font-family: vcr;
  color: white;
  font-size: 24px;
  padding: 0px;
  cursor: pointer;
}

#cover{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 500px
}

.center, .issue-lbl{
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


#issue-title{
  width: 100%;
  position: absolute;
  top: -45px;
  text-align: center;
  font-size: 28px;
  color: white;
  font-family: vcr;
}


#foot{
  text-align: center; 
  width: calc(100% - 16px);
  height: 30px;
  color: white;
  font-family: vcr;
}

#warning{
  text-align: center; 
  height: calc(75vh - 32px);
  width: calc(100% - 16px);
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  font-family: vcr;
  color: white;
}

#page-container{
    position: relative;
    width: calc(100vw - 16px);
    max-width: 1200px;
    height: calc((100vw - 16px) * 1.5294413689);
    max-height: 1835px;
    background: transparent;
    display: block;
    margin: 0px auto 200px auto;
   }

   #pageimg{
    width: calc(100vw - 16px);
    max-width: 1200px;
    height: calc((100vw - 16px) * 1.5294413689); 
    max-height: 1835px;
  } 

  #comicbtn{
    width: calc(100vw - 16px);
    max-width: 1200px;
    height: calc((100vw - 16px) * 0.13666666666);
    max-height: 164px;
  }

  .page{
  font-size : clamp(4px, 4vw, 48px);
  text-align: center;
  color: white;
  font-family: vcr;
  }

  #curlbl{
    position: absolute;
    top: calc(100% + (7% / 3));
    left: calc(100% - (166% / 3));
  }

  .page-btn{
    position: absolute;
  }

  #prev{
    width: calc(12vw / 2);
    height: calc(12vw / 2);
    max-width: 85px;
    max-height: 98px;

    top: calc(100% + 2%);
    left: calc(100% - 69%);

    border: 0px solid green;
  }

  #last{
    width: calc(31vw / 2);
    height: calc(12vw / 2);
    max-width: 194px;
    max-height: 94px;

    top: calc(100% + 2%);
    left: calc(100% - 23%);

    border: 0px solid green;
  }

  #first{
    width: calc(31vw / 2);
    height: calc(12vw / 2);
    max-width: 203px;
    max-height: 79px;

    top: calc(100% + 2%);
    left: calc(100% - 93%);

    border: 0px solid green;
  }

  #next{
    width: calc(11vw / 2);
    height: calc(12vw / 2);
    max-width: 70px;
    max-height: 92px;

    top: calc(100% + 2%);
    left: calc(100% - 39%);

    border: 0px solid green;
  }