:root {
  --black: #2c292d;
  --grey-5: #4a474a;
  --grey-4: #676568;
  --grey-3: #858385;
  --grey-2: #a3a2a2;
  --grey-1: #c1c0bf;
  --grey-0: #dededd;
  --white: #fcfcfa;

  --green: #a9dc76;
  --yellow: #ffd866;
  --purple: #ab9df2;
  --red: #ff6188;
  --blue: #78dce8;
  --orange: #fc9867;
}

body {
  background-color: var(--black);
  font-family: monospace;
  color: var(--white);
  scrollbar-width: thin;
}

p {
  color: var(--white);
}

h1 {
  color: var(--green);
  
}

h2 {
  color: var(--white);
}

h3 {
  font-weight: 100;
  color: var(--white);
  font-size: 15px;
}



a:link {
  color: var(--grey-2);
}

a:visited {
  color: var(--green);
}

a:hover {
  color: var(--yellow);
}



.beloved {
  position: relative;
  z-index: 3;
  height: 50px;
  border-bottom: solid 2px;
  border-color: var(--green);
  background-color: var(--grey-5);
  opacity: 85%;
  border-radius: 1px;
}

#header-window {
  position: relative;
  margin-inline: auto;
  height: fit-content;
  max-width: 1000px;
}

#header-links {
  text-align: center;
  font-weight: normal;
}

/* Social media links */
#bsky {
  color: var(--blue);
}

#itch {
  color: var(--red);
}

#github {
  color: var(--purple);
}

#linkedin {
  color: var(--orange);
}

a.header-link:link {
  color: var(--white);
  text-decoration: none;

}

a.header-link:visited {
  color: var(--white);
  text-decoration: none;
}

a.header-link:hover {
  color: var(--purple);
  text-decoration: underline;
}

a.blog-link:link {
  text-decoration: none;
}

a.blog-link:visited {
  text-decoration: none;
}

a.blog-link:hover {
  text-decoration: none;
}

a.blog-link:hover h1 {
  color: var(--red);
}

.window-body {
  z-index: 1;
  background-color: var(--grey-5);
  opacity: 85%;
  padding: 5px 15px;
  border: solid 2px var(--green);
  border-radius: 1px;
  height: 100%;

}

.window-bar {
  color: var(--green);
  z-index: 2;
  border: solid 2px var(--green);
  border-bottom: none;
  background-color: var(--grey-5);
  opacity: 85%;
  height: 15px;
  top: 0;
}

.window-buttons {
  position: absolute;
  right: 0;
}

.dvdLogo {
  position: relative;
  width: 75px;
  height: 50px;

  z-index: -1;
  text-align: center;
  -webkit-animation: moveX 4s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 4s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 4s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 4s linear 0s infinite alternate, moveY 3.4 linear 0s infinite alternate;
}

.dvdLogo img {
  width: 128px;
  height: 58px;
}

.dvd {
  /* Debug: */
  /* border: 1px solid red; */
  top: 0px;
  position: fixed;
  
}


@-webkit-keyframes moveX {
  from { left: 0; } to { left: calc(100vw - 135px); }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: calc(100vw - 135px); }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: calc(100vw - 135px); }
}
@keyframes moveX {
  from { left: 0; } to { left: calc(100vw - 135px); }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: calc(100vh - 58px); }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: calc(100vh - 58px); }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: calc(100vh - 58px); }
}
@keyframes moveY {
  from { top: 0; } to { top: calc(100vh - 58px); }
}