body{
  height:100vh;
}


/* color of header & footer */

header{
  border-bottom:3px solid hsl(200, 58%, 47%);
}
header #menu_logo .solid{
  fill:hsl(200, 58%, 47%);
}
header #menu_logo .outline{
  stroke:hsl(200, 58%, 47%);
}
header #menu_logo text{
  stroke:hsl(200, 58%, 47%);
}
footer{
  height:5vh;
  border-top:3px solid hsl(200, 58%, 47%);
}


/* main */

main{
  height:calc(95vh - 68px);
  min-width:800px;
  position:relative;
}
main h1{
  position:absolute;
  right:23.5%;
  bottom:450px;
  width:50%;
  opacity:0;
  padding:5px 0;
  line-height:2em;
  margin:0 auto;
  font-size:2.05vw;
  animation:COPYSLIDEDOWN .5s ease-in 1s forwards;
  text-shadow:
    0px 4px 1px #eeeeee, 0px 3px 1px #eeeeee, 1px 3px 1px #eeeeee,
    2px 3px 1px #eeeeee, 2px 2px 1px #eeeeee, 3px 2px 1px #eeeeee,
    3px 1px 1px #eeeeee, 3px 0px 1px #eeeeee, 4px 0px 1px #eeeeee,
    3px -1px 1px #eeeeee, 3px -2px 1px #eeeeee, 3px -3px 1px #eeeeee,
    2px -3px 1px #eeeeee, 2px -4px 1px #eeeeee, 1px -4px 1px #eeeeee,
    0px -4px 1px #eeeeee, -1px -4px 1px #eeeeee, -2px -4px 1px #eeeeee,
    -3px -4px 1px #eeeeee, -3px -3px 1px #eeeeee, -4px -3px 1px #eeeeee,
    -4px -2px 1px #eeeeee, -4px -1px 1px #eeeeee, -4px 0px 1px #eeeeee,
    -4px 1px 1px #eeeeee, -4px 2px 1px #eeeeee, -3px 2px 1px #eeeeee,
    -3px 3px 1px #eeeeee, -2px 3px 1px #eeeeee, -1px 3px 1px #eeeeee;
}
main h1 span{
  color:hsl(200, 58%, 47%);
}

#twitter{
  position:absolute;
  bottom:6vh;
  right:20px;
  width:30%;
  padding:1%;
  text-align:right;
  opacity:0;
  animation:FADEIN 1s linear 1s forwards;
}
.twitter-timeline-rendered{
  width:calc(80% - 20px) !important;
  height:300px !important;
  padding:5px !important;
  border:1px solid #CCC !important;
  border-radius:20px !important;
  background-color:white !important;
}


/* mediaquery */

@media (max-width:800px){
  main h1{
    right:auto;
    left:30px;
    width:70%;
    font-size:22px;
  }
  #twitter{
    right:30px !important;
  }
}