html, body {
   height: 100%;
}

body {
   margin: 0;
   color: #FFF;
   background-color: #000;
}

.main {
   height: 100%;
   padding: 0;
   margin: auto;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   width: 50vw;
}

h2, h4 {
   text-transform: uppercase;
   font-family: Poppins, sans-serif;
   font-weight: 500;
   font-size: 28px;
   line-height: 4px;
}

h2 strong {
   color: #fa5b0f;
}

.profile {
   display: flex;
   flex-direction: row;
}

.profile-image {
   width: 200px;
   border-radius: 50%;
   border: 10px solid #303030;
}

.item {
   padding: 10px;
   text-align: center;
}

.profile-info{
   text-align: left;
}

p {
   margin: 32px 0px;
   line-height: 30px;
   font-family: 'Open Sans', sans-serif;
}

a.btn-link{
   text-decoration: none;
   color: #FFF;
   background-color: #fa5b0f;
   opacity: 0.9;
   padding: 10px 35px;
   border-radius: 20px;
}

a.btn-link:hover{
   opacity: 1;
}

@media (max-width: 1200px) {
   .main {
      width: 80vw;
   }
}

@media (max-width: 880px) {
   .main {
      width: 100vw;
      flex-wrap: wrap;
   }

   .profile{
      flex-wrap: wrap;
   }

   .profile-info{
      text-align: center;
   }

   .item{
      padding: 0;
      width: 100vw;
   }
}