@font-face {
    font-family: manrope;
    src: url("Manrope.ttf");
}

@font-face {
    font-family: broken15;
    src: url("Retroteam.otf");
}

@font-face {
    font-family: porcodio;
    src: url("howdoyousleep.ttf");
}

body {
background-image: url("!!!3.png");
    background-size: 3%;
    background-attachment: fixed;
    color: white;
    font-family: manrope;
}

.navbrush1 {
    width: 400px;
}

.navbrush2 {
    width: 400px;
}

.navbrush3 {
    width: 400px;
}

.navbrush1:hover {
content: url("introblood4.png");
}

.navbrush2:hover {
content: url("charactersblood4.png");
}

.navbrush3:hover {
content: url("volumesblood4.png");
}

.navbar {
    text-align: center;
}

h1 {
font-family: broken15;
    font-size: 70px;
     letter-spacing: 3px;
    margin-top: -10px;
    margin-bottom: 0px;
    color: #F61B81;
    /* color: #bd21ff;
    #b507ff; */
}

.pookies {
    background-image: url(binding_dark.png);
     box-shadow: 0px 0px 10px 5px #F84195;
   /* in order: x offset, y offset, blur size, spread size, color 
   blur size and spread size are optional (they default to 0) */
width: 450px;
    padding: 10px;
    border-radius: 30px;
}

.wrapper {
   padding: 50px;
}

.col1 {
  position:relative;
  float: right;
  margin:1.1%;
  background-color:#333;
    background-image: url(binding_dark.png);
   /* box-shadow: 0px 0px 20px 10px #F84195;
  /* in order: x offset, y offset, blur size, spread size, color */
  /* blur size and spread size are optional (they default to 0) */
width: 800px;
    border-radius: 30px;
    border-style: solid;
    border-width: 6px;
    border-color: #F61B81; /*#9400d3;*/
    box-shadow:
      0 0 5px #F61B81,
      0 0 25px #F61B81,
          0 0 50px #F61B81;
     /* 0 0 200px #9400d3; */
    transform: skew(-5deg);
    padding: 50px;
     margin-top: 100px;
}

.col2 {
  background-image: url(binding_dark.png);
    padding: 50px;
    border-radius: 30px;
    border-style: solid;
    border-width: 6px;
    border-color: #F61B81; /*#9400d3;*/
    box-shadow:
      0 0 5px #F61B81, /*#9400d3,*/
      0 0 25px #F61B81,
          0 0 50px #F61B81;
     /* 0 0 200px #9400d3; */
    transform: skew(5deg);
    width: 800px;
  position:relative;
    float: left;
  margin:1.1%;
    margin-top: 100px;
}

.aiuto1 {
    transform: skew(-5deg);
    margin-right: 250px;
}

.tottigol {
    float: right;
    width: 600px;
   position: absolute;
    left: 590px;
    bottom: -65px;
}

.aiuto2 {
    transform: skew(5deg);
    text-align: right;
    margin-left: 250px;
}

a {
    color: #f6107a;
       /* #c43aff; */
}

.altrafrocia {
    width: 500px;
    position: absolute;
    right: 450px;
    bottom: -65px;
}

.kokai {
    float: right;
    position: absolute;
    left: 610px;
    bottom: -290px;
}

.cheuomo {
    float: left;
    margin-top: 0;
    margin-bottom: -50px;
    width: 350px;
}

.ran {
    width: 400px;
    position: absolute;
    right: 530px;
    bottom: -65px;
}

.smallran {
    position: absolute;
    bottom: -65px;
    right: -60px;
}

.shibako {
    width: 300px;
    float: right;
    position: absolute;
    left: 600px;
    bottom: -50px;
}

.finocchia {
    width: 300px;
    position: absolute;
    right: 550px;
    bottom: -50px;
}

.babe {
float: right;
    position: absolute;
    left: 590px;
    bottom: -65px;
    
}

.payola {
    position: absolute;
    left: 600px;
    bottom: -65px;
}

.homophobia {
    width: 220px;
    position: absolute;
    right: 580px;
    bottom: -267px;
}

.madoca {
    position: absolute;
    right: 550px;
    bottom: -65px;
}

.chepaura {
    position: absolute;
    width: 180px;
    right: -70px;
    bottom: -80px;
}

.gaylord {
    width: 400px;
    position: absolute;
    left: 690px;
    bottom: -50px;
}