@font-face {
  font-family:"Pixel Operator";
  src:url("PixelOperator.ttf");
}

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

html, body {
  color:white;
  font-size:35px;
  background-color:black;
  font-family:"Pixel Operator";
}

#box {
  width:40%;
  margin:auto;
  height:150px;
  display:flex;
  position:relative;
  border:2px solid white;
}

#dBox {
  width:40%;
  margin:auto;
  height:auto;
  display:flex;
  padding:5px 20px;
  position:relative;
  border:2px solid white;
}

#charaPortrait {
  order:1;
  width:auto;
  height:200px;
  image-rendering:pixelated;
  margin:12px 15px 12px 0px;
}

#dial {
  order:2;
  display:inline;
  margin:20px 18px;
}

#left {
  order:1;
  top:35px;
  width:250px;
  height:50px;
  text-align:right;
  position:absolute;
  padding:10px 20px;
  vertical-align:middle;
}

#leftLink:hover::after {
  top:18px;
  left:285px;
  position:absolute;
  image-rendering:pixelated;
  content:url("dHeart.png");
}

#right {
  order:2;
  right:0;
  top:35px;
  width:250px;
  height:50px;
  text-align:left;
  padding:10px 20px;
  position:absolute;
}

#rightLink:hover::before {
  top:18px;
  right:285px;
  position:absolute;
  image-rendering:pixelated;
  content:url("dHeart.png");
}

.opt {
  vertical-align:middle;
}

h1 {
  text-align:center;
  font-family:"deltarune";
  font-weight:normal;
}

p:before {
  content:"*";
  margin-right:5px;
}

p {
  margin:0px;
}

a:link, a:hover, a:active, a:visited {
  color:white;
  text-decoration:none;
}

::selection {
  color:#000000;
  background-color:#ff0000;
}

::-webkit-scrollbar {
  color:#ffffff;
}

::-webkit-scrollbar-track {
  background:#000000;
}

::-webkit-scrollbar-thumb {
  background:#ffffff;
}

::-webkit-resizer {
  background:#ffffff;
}

@-webkit-keyframes hvr-bob {
  0% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
  50% {
    transform:translateY(-4px);
    -webkit-transform:translateY(-4px);
  }
  100% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
  50% {
    transform:translateY(-4px);
    -webkit-transform:translateY(-4px);
  }
  100% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
  }
}

.hvr-bob {
  animation-name:hvr-bob-float, hvr-bob;
  -webkit-animation-name:hvr-bob-float, hvr-bob;
  animation-duration:.3s, 1.5s;
  -webkit-animation-duration:.3s, 1.5s;
  animation-delay:0s, .3s;
  -webkit-animation-delay: 0s, .3s;
  animation-timing-function:ease-out, ease-in-out;
  -webkit-animation-timing-function:ease-out, ease-in-out;
  animation-iteration-count:1, infinite;
  -webkit-animation-iteration-count:1, infinite;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-direction:normal, alternate;
  -webkit-animation-direction:normal, alternate;
}