@font-face {
  font-family: 'perry goth';
  src: url(https://external-media.spacehey.net/media/sJehavmRnSfPA6Vkj18FKkg3KQRRotAr_FgpH_pDSMc8=/https://dl.dropbox.com/s/9a25q7d9s3tsmcf/PERRYGOT.ttf);
}

::-webkit-scrollbar {
  width: 12px;
  background-color: #000000;
  border: 3px solid #ff2b50;
}

::-webkit-scrollbar-thumb {
  background-color: #ff2b50;
}

html {
  scrollbar-color: #ff2b50 #000;
  /* thumb color | track color */
}

body {
  width: 600px;
  margin: 100px auto;
  background:black;
  color: pink;
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-family: perry goth;
  text-shadow: 2px 2px #ff002d, -2px -2px #0064ff;
  color: pink;
  text-align: center;
  float: left;
  margin: 15px;
}

h2 {
  color: #ff2b50;
  text-align: center;
  text-shadow: 2px 2px black;
}

hr {
  color: aqua;
  width: 70%;
  border-style: dashed;
}

li::marker {
  content: "★ ";
}

nav ul {
  list-style: none;
  text-align: center;
  padding-left: 0px;
  margin: 0px;
}

nav li {
  display: inline-block;
}

nav a {
  background: #000;
  padding: 31px 25px;
  margin: 0px;
  text-decoration: none;
  color: #ff2b50;
  font-size: 16px;
  font-family: helvetica, sans-serif;
}

nav a:hover {
  background: #ff2b50;
  color: black;
  transition: .5s;
}

#float-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  border-bottom: 2px solid #ff2b50;
}

nav {
  float: right;
  margin: 15px;
  z-index: 1001;
}

a {
  color: #ff2b50;
  text-decoration: none;
}

footer ul {
  list-style: none;
  text-align: center;
  padding-left: 0px;
  margin: 16px auto;
}

footer li {
  display: inline-block;
}

footer a {
  padding: 1px 10px;
  margin: 0 5px;
  text-decoration: none;
  color: pink;
  font-size: 16px;
  font-family: helvetica, sans-serif;
}

.contact {
  float: right;
}

.footermenu {
  float: left;
}

.footermenu::before {
  content: "Menu ★";
  color: #ff3b5d;
  font-family: helvetica, sans-serif;
  font-size: 17px;
  margin-right: -12px;
}

.contact::after {
  content: "★ Contact";
  color: #ff3b5d;
  font-family: helvetica, sans-serif;
  font-size: 17px;
  margin-left: -12px;
}

footer p {
  color: aqua;
  font-family: helvetica, sans-serif;
}

footer {
  width: 124%;
  margin: 30px -60px;
}

#mobile-h1 {
  width: 100%;
  margin-top: -34px;
  visibility: hidden;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 720px) {
  body {
    width: 90%;
  }

  nav a {
    padding: 5px 10px;
    font-size: 115%;
  }

  #mobile_hide {
    display: none;
  }

  #float-nav {
    display: none;
  }

  #mobile-h1 {
    visibility: visible;
  }

  footer {
    width: 100%;
    margin: 0px;
  }

  footer hr {
    width: 100%;
    margin: 0px;
  }

  .footermenu,
  .contact {
    margin: 0px 0px 15px 0px;
  }

  footer .menu {
    margin: 0px 0px;
  }

}

html::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(https://i.pinimg.com/originals/f4/b8/49/f4b84973eacdb9abec030abbbc7bd3da.gif);
  z-index: 200;
  opacity: 0.1;
  pointer-events: none;
  background-size: cover;
  mix-blend-mode: color-dodge;
}

a:hover {
  color: #810a1f;
  transition: 0.3s;
  text-decoration: line-through #ff2b50;
}

textarea {
  width: 100%;
  height: 200px;
}

summary::marker {
  content: "";
}

summary h2::before {
  content: "➯ ";
  color:#810a1f;
}