@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* for some reason neocities thinks this code is Wrong. but it's correct.
ah well! at least it works, right? */
:root {
  --cybergrape: #58427C;
  --shmblush: #D98695;
  --satin: #CD607E;
  --bubblegum: #FFD3F8;
  --tmpink: #FC80A5;
  --cpink: #FFA6C9;
}

@font-face {
  font-family: Pixel;
  src: url("/fonts/PixelOperator.woff");
}

@font-face {
  font-family: Venice Classic;
  src: url("/fonts/VeniceClassic.ttf");
}

.post-title {
  font-family: "Venice Classic";
  text-transform: lowercase;
  font-weight: 100;
  -webkit-text-stroke: 1px #FD5B78;
  text-shadow: 2px 2px 0 #50BFE6;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
}

body {
  background: linear-gradient( rgba(252, 128, 165, 0.8), rgba(252, 128, 165, 0.8) ), url("/images/prison.gif");
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 1.15em;
}

.post {
  position: relative;
  width: 720px;
  border: 2px solid #000;
  border-radius: 25px;
  padding: 20px;
  margin-bottom: 30px;
  height: auto;
  box-shadow: 0 3px 8px black;
  background: linear-gradient( rgba(253, 91, 120, 0.5), rgba(253, 91, 120, 0.5) ), url(/images/trip.gif);
}

.post p {
  text-shadow: 0 0 8px black;
}

.sidebar {
  height: 100%;
  width: 320px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  text-align: center;
  background: linear-gradient( rgba(255, 166, 201, 0.8), rgba(255, 166, 201, 0.8) ), url("/images/epilepsy.gif");
  border-right: 7px dashed #ff1942;
  overflow-x: hidden;
  padding-top: 20px;
  box-shadow: 3px 0 20px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 5px deeppink;
}

.sidebar a {
  display: inline-block;
  transition: 0.3s;
  font-size: 1.4em;
  font-family: "Venice Classic";
  font-weight: 100;
  color: #000;
  text-shadow: 1px 1px 0 var(--cybergrape);
}

.sidebar a:hover {
  transform: scale(1.2);
  color: #000;
}

.main {
  margin-left: 320px;
  padding: 0 0 0 220px;
}

a {
  display: inline-block;
  transition: 0.3s;
  color: #8B72BE;
}

a:hover {
  transform: scale(1.05);
  display: inline-block;
  color: #C9A0DC;
}

::selection {
  color: #FD5B78;
  background-color: #0048BA;
}

b::selection, i::selection, strong::selection, em::selection {
  color: #50BFE6;
  background-color: #0048BA;
}