/* 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." */

@font-face {
    font-family: 'rubberstamp';
    src: url('rubberstamp-webfont.woff2') format('woff2'),
         url('rubberstamp-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pinkend';
    src: url('pinkend-webfont.woff2') format('woff2'),
         url('pinkend-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gabriele-d';
    src: url('gabriele-d-webfont.woff2') format('woff2'),
         url('gabriele-d-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
  background-color: #0F0F0F;
  background-image: url("theabyss_background_oftheabyss.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  color: #D7D0D6;
  text-align: center; 
}

header {
  margin-top: 75px;
}

header p{
  font-family: pinkend;
  font-size: 34px;
}

h1 { 
  font-family: rubberstamp;
  font-size: 54px; 
  letter-spacing: 3px;
  margin-top: 10px;
}

h2 {
  font-family: gabriele-d;
  font-size: 22px
}

p {
  text-align: center;
  margin-bottom: 0px;
}

.pbody p {
  font-family: gabriele-d;
  font-size: 14px;
  line-height: 120%;
}

.psubheader{
  font-family: gabriele-d;
  font-size: 22px;
}

.lowopacity {
  opacity: 50%;
}

.container{
  margin: 0 auto;
  max-width: 580px;
  width: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.honeybun {
  margin-top: 100px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.menuleft {
  position: absolute;
  top: 50%;
  left: -65%;
  transform: translate(-50%, -50%);
  text-align: right;
}

.menuright {
  position: absolute;
  top: 50%;
  right: -65%;
  transform: translate(50%, -50%);
}

.slideshowbuttons {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;    
}

.zineslides {
}

.bottomleft {
  position: absolute;
  bottom: 9%;
  left: 14%;
  transform: translate(-50%, 50%);
}

button.leftarrow{
  left: -20%
}

button.rightarrow{
  right: -20%
}