:root {
  --backgroud-color: #080204;
  --font-color: #f18997;

  --button-color: #b86e81;
  --button-hover: #e9a3b5;
  --button-backgroud: #250d13;
}

* {
  font-family: "Courier";
}

body {
  background-color: var(--backgroud-color);
  color: var(--font-color);
}

a, a:hover, a:focus, a:active {
  color: #f5465d;
  text-decoration: none;
  color: inherit;
}

#container {
  width: 40%;
  margin: 10em auto 0 auto;
}

.scary {
  background-color: var(--button-backgroud);
  color: var(--button-color);
}

.scary:hover {
  color: var(--button-hover);
}


/* Animations 
---------------------------------------------------*/
:root {
  --fade-in: fadeIn ease 4.1s;
}

.fade-in {
  animation: var(--fade-in);
  -webkit-animation: var(--fade-in);
  -moz-animation: var(--fade-in);
  -o-animation: var(--fade-in);
  -ms-animation: var(--fade-in);
}

@keyframes fadeIn {
  0% { opacity:0; }
  60% { opacity: 0; }
  100% { opacity:1; }
}

@-moz-keyframes fadeIn {
  0% { opacity:0; }
  60% { opacity: 0; }
  100% { opacity:1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  60% { opacity: 0; }
  100% { opacity:1; }
}

@-o-keyframes fadeIn {
  0% { opacity:0; }
  60% { opacity: 0; }
  100% { opacity:1; }
}

@-ms-keyframes fadeIn {
  0% { opacity:0; }
  60% { opacity: 0; }
  100% { opacity:1; }
}


/* Screen change 
---------------------------------------------------*/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (min-width:320px)  {
  #container {
    width: 90%;
    margin: 4em auto 4em auto;
  }
  *{
    font-size: x-large;
  }
}
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (min-width:481px)  {
  #container {
    width: 80%;
    margin: 4em auto 4em auto;
  }
  *{
    font-size: x-large;
  }
}
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (min-width:641px)  {
  #container {
    width: 70%;
    margin: 4em auto 4em auto;
  }
}
/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (min-width:961px)  {
  #container {
    width: 60%;
    margin: 6em auto 4em auto;
  }
}
/* big landscape tablets, laptops, and desktops */ 
@media (min-width:1025px) {
  #container {
    width: 50%;
    margin: 6em auto 4em auto;
  }
}
/* hi-res laptops and desktops */ 
@media (min-width:1281px) {
  #container {
    width: 40%;
    margin: 6em auto 4em auto;
  }
}