.acme-regular {
  font-family: "Acme", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
}

h1, h2, h3, h4, h5, h6,
p, li, blockquote, pre,
strong, em, span, div {
  font-family: "Acme", sans-serif;
  font-weight: 400;
  text-shadow: 0 0 5px #000, 0 0 10px #000;

}

h2 {
  color: yellow;
  margin: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  font-family: sans-serif;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  -webkit-user-drag: none;
  user-drag: none;
}

img, div, canvas, p, span {
  pointer-events: none;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 600vw;
  height: 100vh;
  background-image: url('background.jpg');
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: top left;
  z-index: 0;
}

html {
  font-size: 1.5vh;
}

.scroll-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
  position: relative;
}

.scroll-container {
  display: flex;
  height: 100vh;
  width: max-content;
  position: relative;
  z-index: 2;
}

.panel {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  color: white;
  border-right: 4px solid #444;
}

.panel.school {
  background: transparent url('bg-school.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.college {
  background: transparent url('bg-college.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.army {
  background: transparent url('bg-army.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.business {
  background: transparent url('bg-business.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.pub {
  background: transparent url('bg-pub.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.degree {
  background: transparent url('bg-degree.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.volunteer {
  background: transparent url('bg-volunteer.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.skills {
  background: transparent url('bg-skills.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.goals {
  background: transparent url('bg-goals.png') center center no-repeat;
  background-size: 100% 100%;
}

.panel.contact {
  background: transparent url('bg-contact.png') center center no-repeat;
  background-size: 100% 100%;
}


.character {
  position: fixed;
  bottom: 10%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-image: url('character.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  transition: background-image 0.2s ease-in-out;
}
.character.walking {
  background-image: url('character_walk.gif');
}
.character.flipped {
  transform: translateX(-50%) scaleX(-1);
}