:root {
  /* --bg-color: #ffe9fb; */
  --bg-color: #d8b2ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hide {
  display: none!important;
}

body {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--bg-color);
}

/* preload? */
body::after {
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(./imgs/about-alt.png) url(./imgs/buttons-alt.png) url(./imgs/journal-alt.png) url(./imgs/links-alt.png) url(./imgs/memories-alt.png) url(./imgs/music-alt.png) url(./imgs/tv-alt.png);
}

body.nav-visible {
  overflow-y: auto;
}

#splash {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: var(--bg-color);
  display: grid;
  place-items: center;
}

#splash img {
  cursor: pointer;
}

a {
  color: black;
}

nav {
  display: none;
  top: 0;
  position: relative;
  width: 100vw;
  height: 100%;
  grid-template-rows: auto(1fr);
  grid-template-columns: auto(1fr);
  background: var(--bg-color);
  user-select: none;
  z-index: 99;
}

.nav-visible nav {
  display: block;
}

.nav-visible #toggle-anim {
  display: none;
}

.nav-content {
  height: 100%;
  display: flex;
  gap: 24px 48px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 5em;
}

.button-container {
  width: fit-content;
  position: fixed;
  z-index: 99;
  top: 0;
  padding-left: .5em;
}

button {
  box-shadow: none;
  border: 2px solid black;
  border-top: 0;
  margin-top: 0;
  padding: 1.2em 1em .5em;
  font-family: 'Verdana', sans-serif;
  font-weight: normal;
  font-size: 15px;
  background: var(--bg-color);
  cursor: pointer;
  transform: translateY(-.8em);
  transition: transform .5s ease;
}

button:hover {
  transform: translateY(0);
}

.welcome {
  height: 367px;
  width: 354px;
  position: absolute;
  background: var(--bg-color);
  font-family: Verdana;
  font-size: 11px;
  list-style-position: inside;
  overflow: hidden;
  clip-path: polygon(49.58% 0.53%, 99.57% 24.82%, 99.72% 78.29%, 49.58% 101.9%, -0.13% 78.17%, 0% 24.69%);
  top: 16px;
  left: 563px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.welcome-content {
  padding: 3em;
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
}

.map-container {
  /* margin-top: 120px;
  height: calc(100vh - 120px); */
  height: 100vh;
  padding: 5em;
}

.map-container.scroll {
  overflow: auto;
}

.map-container::-webkit-scrollbar {
  width: 8px;
  background-color: #d8b2ff;
}

.map-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .5);
}

.map-container, #map {
  position: relative;
  user-select: none;
}

#map {
  width: 1604px;
  height: 1700px;
  cursor: grab;
}

#map img#home-animated,
#map.anim-off img#home-static {
  display: block;
}

#map img#home-static,
#map.anim-off img#home-animated {
  display: none;
}

.link {
  display: block;
  position: absolute;
}

#about-link {
  width: 290px;
  height: 150px;
  top: 140px;
  left: 944px;
}

#buttons-link {
  width: 290px;
  height: 150px;
  top: 698px;
  left: 950px;
}

#journal-link {
  width: 290px;
  height: 150px;
  top: 709px;
  left: 234px;
}

#links-link {
  width: 310px;
  height: 150px;
  top: 990px;
  left: 400px;
}

#memories-link {
  width: 300px;
  height: 150px;
  top: 996px;
  left: 1120px;
}

#music-link {
  width: 330px;
  height: 110px;
  top: 448px;
  left: 396px;
}

#tv-link {
  width: 240px;
  height: 246px;
  top: 360px;
  left: 1150px;
}

#pasta-link {
  width: 320px;
  height: 230px;
  top: 1250px;
  left: 940px;
}

#cloud-link {
  right: -30px;
  top: 580px;
  width: 70px;
  height: 50px;
}

.link:not(#tv-link, #pasta-link, #cloud-link):hover {
  background-repeat: no-repeat;
  background-color: var(--bg-color);
}

.link#music-link:hover {
  background-color: transparent;
}

#map.anim-off .link:hover {
  background: none!important;
}

#about-link:hover {
  background-image: url(../imgs/about-alt.png);
  background-position: center;
}

#buttons-link:hover {
  background-image: url(../imgs/buttons-alt.png);
  background-position: top 0px left 22px;
}

#journal-link:hover {
  background-image: url(../imgs/journal-alt.png);
  background-position: center;
}

#links-link:hover {
  background-image: url(../imgs/links-alt.png);
  background-position: top 32px left 36px;
}

#memories-link:hover {
  background-image: url(../imgs/memories-alt.png);
  background-position: top 8px left 30px;
}

#music-link:hover {
  background-image: url(../imgs/music-alt.png);
  background-position: top 8px left 14px;
}

#tv-link:hover {
  background-image: url(../imgs/tv-alt.png);
  background-position: top -162px left -180px;
}

#cloud-link:hover {
  background-image: url(/cloud/roguecloud.png);
  background-position: top -3px left -7px;
}

@media (prefers-reduced-motion) {
  #map img#home-static {
    display: block;
  }

  #map.anim-off img#home-animated {
    display: none;
  }
}