@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Poppins:wght@300;400&display=swap');

html, body {
   margin: 0;
}

body {
   min-height: 100vh;
   background: url(img/bg.png);
   background-color: #001325;
   background-repeat: no-repeat;
   background-size: cover;
   font-family: 'Poppins', sans-serif;
   font-weight: 300;
}

.logo {
	width: 400px;
	margin: 3rem auto;
	position: relative;
	transform: translateX(-50%);
	left: 50%;
}

h1 {
   color: white;
   text-align: center;
   padding: 7rem 0;
   margin: 0;
   font-size: 3.5rem;
   font-family: 'Alfa Slab One', Helvetica, cursive;
}

.wrapper {
   position: relative;
   min-height: 100vh;
}

.classes {
   display: flex;
   flex-direction: column;
   max-width: 1080px;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}

.class {
   margin: 0.5rem 0.8rem;
   min-width: 25%;
   max-width: 500px;
   text-align: center;
}

.class .card {
   width: 100%;
   min-height: 10rem;
   background: white;
   border-radius: 1rem;
   margin-bottom: 2rem;
   position: relative;
   overflow: hidden;
}

.class .card::before {
   content: '';
   width: 100%;
   min-height: 10rem;
   border: 1px solid red;
   position: absolute;
   left: 0.5rem;
   top: 0.5rem;
   border-radius: 1rem;
   z-index: -1;
}

.class.blue .card::before {
   border-color: #34BCD7;
}
.class.red .card::before {
   border-color: #DD5166;
}
.class.green .card::before {
   border-color: #25BB00;
}

.class .card .card-header {
   height: 8rem;
}

.class.blue .card .card-header {
   background: #34BCD7;
}
.class.red .card .card-header {
   background: #DD5166;
}
.class.green .card .card-header {
   background: #25BB00;
}

.class .card .card-header img {
   margin-top: 0.5rem;
   height: 120%;
}

.class .card .card-title {
   margin: 3rem 0 1rem 0;
   font-size: 1.2rem;
   padding: 0 0.5rem;
   font-weight: 400;
}

.class .card .card-description {
   padding: 0 0.5rem;
   font-size: 0.9rem;
   margin-bottom: 2rem;
}

.class button {
   border: 0;
   border-radius: 1rem;
   padding: 0.4rem 2rem;
   color: white;
   font-weight: bold;
   font-size: 1rem;
   margin-bottom: 1rem;
}

.class.blue button {
   background: #34BCD7;
}
.class.blue button:hover {
   background: #0E8AA3;
}
.class.red button {
   background: #DD5166;
}
.class.red button:hover {
   background: #85454E;
}
.class.green button {
   background: #25BB00;
}
.class.green button:hover {
   background: #277214;
}

.staging {
   margin: 3rem 0.5rem;
   text-align: center;
   flex-grow: 0;
   color: #ccc;
   font-size: 0.9rem;
}

.staging button {
   border: 0;
   border-radius: 1rem;
   padding: 0.4rem 3.4rem;
   font-weight: bold;
   font-size: 1rem;
   margin-bottom: 0.5rem;
}

button {
   cursor: pointer;
}

main {
   padding-bottom: 5rem;
}

footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 5rem;
   padding: 1rem 0;
   background: #001D36;
   text-align: center;
}

footer .footer-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
}

footer .footer-wrapper div:nth-child(2) {
   text-align: left;
   margin-left: 2rem;
   padding-left: 2rem;
   border-left: 1px solid rgba(255,255,255,0.3);
}

footer .footer-wrapper a,
footer .footer-wrapper a:visited,
footer .footer-wrapper a:active,
footer .footer-wrapper a:focus {
   color: white;
   text-decoration: none;
}

footer .footer-wrapper a:hover {
   color: #34BCD7;
}

@media only screen and (min-width: 1080px) {

   .classes {
      flex-direction: row;
   }

}