/* Custom Cursor */

html {
  cursor: url:("cursor.png"), auto;
}

/* Header and Descriptipn */

.Web {
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  background-color: #1B242C;
}

h1 {
  position: absolute;
  left: 2%;
  font-size: 70px;
  font-family: 'Open Sans', sans-serif;
  color: #9FA2DB;
  border-bottom: 1px solid #9FA2DB;
  animation-name: start;
  animation-duration: 1s;
}


.desc {
  position: absolute;
  left: 40px;
  top: 180px;
  color: #9FA2DB;
  font-family: 'Open Sans', sans-serif;
  animation-name: startb;
  animation-duration: 1s;
}

/* Header and Description Animation Keyframes */

@keyframes start {
    0% {left: -500px;}
    50% {left: 90px;}
    100% {left: 40px;}
}

@keyframes startb {
    0% {left: -1000px;}
    50% {left: 90px;}
    100% {left: 40px;}
}

/* Hide steam popup and ncs */

@media screen and (max-width: 990px) {
  .steam {
    visibility: hidden;
  }

  .ncs {
    color: #9FA2DB;
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 300px;
    bottom: auto;
  }
}

/* Steam popup */

.steam {
  position: absolute;
  bottom: -90px;
  animation-name: down;
  animation-duration: 0.5s;
}

.steam:hover {
  animation-name: up;
  animation-duration: 0.5s;
  bottom: 1px;
}

/* Steam popup Keyframes */

@keyframes down {
    from {bottom: 1px;}
    to {bottom: -90px;}
}

@keyframes up {
    from {bottom: -90px;}
    to {bottom: 1px;}
}

/* new css tag for ncs if screen is to small */

@media screen and (min-width: 990px){
  .ncs {
    color: #9FA2DB;
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 60px;
    right: 70px;
  }
}

/* Network Buttons */

.yt {
position:absolute;
right: 20px;
bottom: 20px;
background-color: #F44336;
font-family: 'Roboto', sans-serif;
color: #ffffff;
padding: 7px;
border: none;
transition: all 0.5s ease;
cursor: pointer;
}

.yt:hover {
  background-color: #ffffff;
  color: #F44336;
}

.tw {
  position:absolute;
  right: 90px;
  bottom: 20px;
  background-color: #55ACEE;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  padding: 7px;
  border: none;
  transition: all 0.5s ease;
  cursor: pointer;
}

.tw:hover {
  background-color: #ffffff;
  color: #55ACEE;
}

.rt {
  position:absolute;
  right: 152px;
  bottom: 20px;
  background-color: #FF8B60;
  font-family: 'Roboto', sans-serif;
  color: #f4f4f4;
  padding: 7px;
  border: none;
  transition: all 0.5s ease;
  cursor: pointer;
}

.rt:hover {
  background-color: #f4f4f4;
  color: #FF8B60;
}