:root {
 --main-color: #333333;
 --main-muted: #aaaaaa;
 --green: #2de087;
 --orange: #E87502;
 --red: #e72d2d;
 --cyan: #6dfedf;
 --orange:  #e88e2c;
 --blue: #678bdc;
 --magenta: #ff6f9f;
 --pink: #f92672;
 --violet: #4e4372;
 --yellow: #ffdb7d;
 --foreground-light: #678bdc;
 --white: #ffffff;
}

@keyframes rise {
 0% {opacity:0;}
 100% {opacity:1;}
}
@keyframes fadein {
 from {opacity:0.3;}
 to {opacity:1;}
}
body {
 background-color: var(--main-color);
 /*background: linear-gradient(33deg, var(--main-muted), var(--main-color));*/
 text-align: center;
 margin: 0;
}

#top_bar {
 position: center;
 font-family: 'SFNS Display', monospace;
 text-align: center;
 color: #dc322f;
 font-size: 12px;
 padding: 30px;
 border: 5px solid var(--main-color);
 background: var(--main-color);
 box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#footer {
   position: center;
   font-family: 'SFNS Display', monospace;
   text-align:center;
   color: var(--foreground-light);
   font-size: 14px;
   padding: 15px;
}
a:link , a:visited{
 text-decoration: none;
 color: var(--main-muted);
 background-color:var(--main-color);
 border-style: 2px solid;
 border-radius: 3px;
 padding: 8px;
 width: 200px;
 height: 100px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
  }

.top-bar-links {
    text-decoration: none;
    margin: 5px;
    transition: 0.5s ease;
}
#youtube {
 border: 2px solid var(--red);
} 
#youtube:hover {
 background-color: var(--red);
 color: var(--white);
 transform: scale(1.1);
} 
#packt {
 border:2px solid var(--orange);
} 
#packt:hover {
 background-color: var(--orange);
 color: var(--white);
 transform: scale(1.1);
} 
#pluralsight {
 border: 2px solid var(--pink);
 }
#pluralsight:hover {
 background-color: var(--pink);
 color: var(--white);
 transform: scale(1.1);
}
#vultr {
 border:2px solid var(--blue); 
}
#vultr:hover {
 background-color: var(--blue);
 color: var(--white);
 transform: scale(1.1);
}
#wiki {
 border:2px solid var(--violet);
}
#wiki:hover {
 background-color: var(--violet);	
 color: var(--white);
 transform: scale(1.1);
}
input {
 font-family: 'SFNS Display', monospace;
 text-align: center;
 color: var(--white);
 background-color: var(--main-color);
 border: 2px solid var(--main-color);
 border-radius: 3px;
 width: 42%;
 height: 20px;
 font-size: 14px;
 padding : 8px;
 box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.7);
 position: relative;
 transition: 0.2s ease;
}
input:focus {
 box-shadow: 1px 4px 10px 0px rgba(0,0,0,0.7);
} 
input:hover {
 box-shadow: 1px 4px 10px 0px rgba(0,0,0,0.7);
}
#logo {
 margin-top: 50px;
 font-family: 'SFNS Display', monospace;
 font-size: 70px;
 text-align: center;
 padding: 30px;	
 animation-name: rise;
 animation-duration: 0.5s;
 animation-iteration: 1;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#big_d {
 height: 100px;
 margin-top: 50px;
}
#icons {
 position: center;
 font-family: 'Monaco', sans-serif;
 text-align: center;
 color: var(--main-muted);
 font-size: 12px;
 padding: 30px;
 background: rgba(0,0,0,0);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#github ,#instagram, #twitter, #facebook, #reddit, #mail, #freecodecamp {
 background-color: rgba(0,0,0,0);
 color: var(--main-muted);
}
.icon-links {
 background-color: rgba(0,0,0,0);
 color: var(--main-muted);
 transition: 0.5s ease;
 }
 .icon-links:hover {
 transition: 0.5s ease;
 }

#github:hover {
 color: var(--yellow);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#freecodecamp:hover {
 color: var(--green);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#twitter:hover {
 color: var(--cyan);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#facebook:hover {
 color: var(--blue);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#reddit:hover {
 color: var(--orange);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#mail:hover {
 color: var(--blue);
 transition: 0.5s ease;
}
#gitlab:hover {
 color: var(--violet);
 transition: 0.5s ease;
 transform: scale(1.1);
}
#search {
   color: var(--yellow);
   transition: 0.5s ease;
}