@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
body{
  background: linear-gradient(to bottom, #7bb4c4, #008399) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Nunito', sans-serif;
 
}
h1{
  color: #fff;
  text-shadow: 4px 4px 10px #008399;
  text-align: center;
  text-transform: uppercase;
  font-size: 25px;
}
.social-media{
  align-items: center;
  display: flex;
  transition: transform 0.3s ease-in-out;
   
}
.social-media:hover{
  transform: translateX(calc(-100% + 60px));
}

.social-media i{
  color: #fff;
  font-size: 20px;
  padding: 15px;
  text-align: center;
  width: 60px;
  
}
.social-media a{
  color: #fff;
  padding: 0 10px;
  text-align: center;
  text-decoration: none;
  
}
.social-media-container{
  top: 40%;
  list-style-type: none;
  padding: 0;
  position: fixed;
  left: calc(100% - 60px);
  transform: translateY(-50%);
  min-width: 200px;
  z-index:1000;
}

.social-media.blog{
  background-color: #014592;
}

.social-media.pinterest{
  background-color: #0865FF;
}
.social-media.linkedin{
  background-color: #0865FF;
  border-top-left-radius:10px;
}
.social-media.instagram{
  background-color: #3ABF4C;
  border-bottom-left-radius:10px;
}
.social-media.github{
  background-color: #333;
}