@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

html,
body {
   height: 100%;
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0;

   background: linear-gradient(#5690cfe0, #5690cfe0), transparent url("background.jpg") center center/cover no-repeat scroll;
   color: #ffffff;

   font-weight: 500;
   font-family: 'Poppins', sans-serif;
}

.center {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   background-color: #5690cf;
}

.center > div {
   margin: 2rem;
}

.center h1 {
   margin: 0 0 2rem 0;
   font-size: 2.5rem;
   font-weight: 600;
}

.center ul {
   padding-left: 2rem;
   margin: 0;
   font-size: 1.2rem;
   font-weight: 400;
}

.center h2 {
   margin: 0 0 1.5rem 0;
   font-size: 1.7rem;
   font-weight: 500;
}

.center a {
   font-size: 1.2rem;
   font-weight: 400;
   color: inherit;
}

@media (min-width: 24rem) {
   .center > div {
      margin: 4rem;
   }

   .center h1 {
      font-size: 3rem;
   }
   
   .center ul {
      font-size: 1.5rem;
   }
   
   .center h2 {
      font-size: 2rem;
   }
   
   .center a {
      font-size: 1.5rem;
   }
}

@media (min-width: 45rem) {
   .center {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }
}