*{
   margin:0;
   padding:0;
   box-sizing: border-box;
 }
 :root{
       --dark-blue-color:#00091b;
       --white-color:#ffff;
       --primary-color:#63FF81;
 }
 body{
 background: var(--dark-blue-color);
 color: var(--white-color);
 }
 .wrapper{
   width:100%;
   text-align:center;
   position:absolute;
   left:50%;
   top:50%;
   -webkit-transform:translate(-50%,-50%);
   -moz-transform:translate(-50%,-50%);
   -ms-transform:translate(-50%,-50%);
   transform:translate(-50%,-50%);
   -webkit-animation:fadeIn 1000ms ease;
   -moz-animation:fadeIn 1000ms ease;
   -ms-animation:fadeIn 1000ms ease;
   animation:fadeIn 1000ms ease;

 }
 @-webkit-keyframes fadeIn{
   from{
     top:20%;
     opacity:0;
 }
   to{
     top:100;
     opacity:1;
     }
 }
 @keyframes fadeIn{
   from{
     top:20%;
     opacity:0;
   }
   to{
     top:100;
     opacity:1;
   }
 }
 .wrapper img{
    max-width:35%;
    height:auto;
 }
 .wrapper h1{
    font-size: 50px;
    font-family: "Poppins" sans-serif;
    margin: 10px 0;
    line-height: 1;
    font-weight: 700;
 }
 .wrapper .dot{
    color:var --primary-color;
 }
 .wrapper p{
    text-align:center;
    margin: 18px;
    font-family: "Poppins", sans-serif;
    font-weight:normal;
    font-size: 20px;
 }
 .wrapper .icons{
    text-align:center;
    margin-top: 15px;
 }
 .wrapper .icons a{
    color:var(--dark-blue-color);
 }
 .wrapper .icons i{
    background:var(--white-color);
    height: 50px;
    width: 50px;
    padding: 13px;
    font-size: 18px;
    margin:0 10px;
    border-radius: 50px;
    border: 2px solid var(--white-color);
    transition:all 200ms ease;
    text-decoration:none;
    position: relative;
 }
 .wrapper .icons i:hover,
 .wrapper .icons i:active{
    color:var(--primary-color);
    border-color:var(--primary-color);
    background:none;
    cursor:pointer;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    text-decoration: none;
}