/**************/
/* CSS REMEDY */
/**************/

body {
  margin:0;
  background-color: var(--body-color);
  cursor: url(../images/Stylus.png) 30 100,auto;
}

img {
  max-width:100%;
}

@font-face {
  font-family: "pixel_titel";
  src: url(../fonts/Daydream.ttf);
}

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

@font-face {
  font-family: "minen";
  src: url(../fonts/Minecraft.ttf);
}

p {
  font-family: 'minen', 'onderscherm',sans-serif;
}

h1 {
  font-family: 'pixel_titel', 'onderscherm', sans-serif;
}

li {
  font-family: 'onderscherm', sans-serif;
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
  --color-headings:rgb(206, 20, 57);
  --scherm-achtergrond:black; 
  --hover-timeline:rgb(169, 128, 135);
  --p-color:white;
  --body-color:rgb(141, 141, 141); 
  --active-color: rgb(195, 34, 34);
}


/********************/
/* ALGEMENE STYLING */
/********************/

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

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

/* Body & articles */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

article{
  display: flex;
  width: 52.5em;
  height: 18.75em;
  background-color: var(--scherm-achtergrond);
  outline: 0.5em solid var(--p-color);
  margin-top: 2vh;
  border-radius: 5px;
}

article section:nth-of-type(1) {
  background-color: var(--scherm-achtergrond);
  margin-top: 3vh;
  margin-left: 2vh;
  margin-right: 2vh;
}

article:nth-last-of-type(1) img:nth-last-of-type(2) {
  position: absolute;
  left: 75vh;
}

article>h1 {
  align-items: flex-end;
  margin-left: 5vh;
}

article>img {
  margin-left: 5vh;
  margin-top: 5vh;
  width: 12.5em;
  height: 12.5em;
}

body article:nth-of-type(10) {
  width: 52.5em;
  height: 15em;
  background-color: var(--scherm-achtergrond);
  border-radius: 5px;
}

/* Tijdlijn */

ol {
  color: var(--p-color);
  margin-left: 4.5vh;
  margin-top: 13.5vh;
  list-style: none;
  display: flex;
}

li {
  margin: 1vw;
  margin-left: 2.3vw;
}

/* hover */

li:hover {
  color:var(--hover-timeline);
  cursor: url(../images/Stylus_press.png) 30 100,auto;
}

li {
  transition: transform 0.3s ease-in-out;
}

li:hover {
  animation: shake 0.3s ease;
}


@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

/* focus */

button {
  all: unset;
}

button:focus {
  color: var(--hover-timeline);  
    transition: transform 0.3s ease-in-out;
    animation: shake 0.3s ease;
}

/* active */
button:active {
  color: var(--active-color);
}


/* Hidden */

body > article:nth-of-type(2), body > article:nth-of-type(3), body > article:nth-of-type(4), body > article:nth-of-type(5), body > article:nth-of-type(6), body > article:nth-of-type(7), body > article:nth-of-type(8), body > article:nth-of-type(9){
  display: none;
}

/* dpad & facebuttons */

body figure img:nth-of-type(1) {
  position: absolute;
  left: 5em;
  width: 20vh;
  height: 20vh;
}

body figure img:nth-of-type(2) {
  position: absolute;
  right: 5em;
  width: 25vh;
  height: 25vh;
}

/* easter egg 1992 */

article > ol > li > img {
  display: none;
  position: absolute;
  left: 32vw;
  top: 15vh;
}