@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
@import url('https://fonts.cdnfonts.com/css/century-gothic?styles=24895,24898,24896,24897');
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 html, body {
     height: 100%;
}
 body {
     display: flex;
     flex-direction: column;
     background: radial-gradient(circle, #aadee9, #b2dfed, #bbdff0, #c4dff2, #cde0f3, #cddff2, #cedef1, #ceddf0, #c6daee, #bdd7eb, #b4d5e9, #abd2e5);
     background-attachment: fixed;
     font-family: "Century Gothic", sans-serif;
     line-height: 1.3;
     z-index: -9999;
}
 .main {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .flip-card-container {
     text-align: -webkit-center;
     --hue: 150;
     --primary: hsl(var(--hue), 50%, 50%);
     --white-1: hsl(0, 0%, 90%);
     --white-2: hsl(0, 0%, 80%);
     --dark: hsl(var(--hue), 25%, 10%);
     --grey: hsl(0, 0%, 50%);
     width: 280px;
     height: 380px;
     margin: 20px;
     padding: 0px;
     perspective: 1000px 
}
 .flip-card {
     width: inherit;
     height: inherit;
     position: relative;
     transform-style: preserve-3d;
     transition: 0.6s 0.1s 
}
 .flip-card-container:hover .flip-card, .flip-card-container:focus-within .flip-card {
     transform: rotateY(180deg) 
}
 .card-front, .card-back {
     width: 100%;
     height: 100%;
     border-radius: 24px;
     background: var(--dark);
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     backface-visibility: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 2 
}
 .card-front {
     transform: rotateY(0deg);
     z-index: 2 
}
 .card-back {
     transform: rotateY(180deg);
     z-index: 1 
}

 figure {
     z-index: -1 
}
 figure, .img-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100% 
}
 img {
     height: 100%;
     width: 100%;
     margin-bottom: 30px;
}
 figcaption {
     display: block;
     width: auto;
     margin-top: 10%;
     padding: 10px 30px 10px 10px;
     font-weight: bold;
     font-size: 25px;
     line-height: 1;
     text-align: right;
     position: absolute;
     top: 0;
     right: -15px;
     font-family: "Century Gothic", sans-serif;
     color: hsl(0deg 0% 100%);
     background: var(--primary);
     border-radius: 10px 
}
 .img-bg {
     background: hsla(var(--hue), 25%, 10%, .4) 
}
 .card-front .img-bg {
     clip-path: polygon(0 25%, 100% 50%, 100% 100%, 0 100%) 
}
 .card-front .img-bg::before {
     content: "";
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(18.5deg);
     width: 100%;
     height: 6px;
     border: 1px solid var(--primary);
     border-left-color: transparent;
     border-right-color: transparent;
     transition: 0.1s 
}
 .flip-card-container:hover .card-front .img-bg::before {
     width: 6px;
     border-left-color: var(--primary);
     border-right-color: var(--primary) 
}
 ul {
     padding-top: 60%;
     padding-left: 0;
     margin: 0 auto;
     width: 90%;
     height: 100%;
     list-style: none;
     color: hsl(0deg 0% 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column 
}
 li {
     width: 100%;
     margin-top: 12px;
     padding-bottom: 12px;
     font-size: 14px;
     text-align: justify;
     font-weight: 400;
     position: relative 
}
 li:nth-child(2n) {
     color: hsl(0deg 0% 100%) 
}
 li:not(:last-child)::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: currentColor;
     opacity: .5 
}
 a {
     color: var(--gray);
     text-decoration: none;
     font-weight: 400 
}
 a:focus, a:hover {
     color: #000;
     font-weight: 600;
     text-decoration: none 
}

 quote{
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
}
 button {
     font-family: inherit;
     font-weight: 700;
     color: black;
     letter-spacing: 2px;
     padding: 9px 20px;
     border: 3px solid var(--grey);
     border-radius: 1000px;
     background: #fff;
     transition: 0.3s;
     cursor: pointer 
}
 button:hover, button:focus {
     color: var(--primary);
     background: #fffafaa1;
     border-color: currentColor 
}
 button:active {
     transform: translate(2px) 
}
 button .a:hover, .a:focus {
     color: var(--primary);
     text-decoration: none 
}
 .design-container {
     --tr: 90;
     --op: .5;
     width: 100%;
     height: 100%;
     background: transparent;
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
}
 button:hover+.design-container, button:active+.design-container, button:focus+.design-container {
     --tr: 20;
     --op: .7 
}
 .max-container {
     max-width: 1770px;
     margin: 10px auto;
     padding:5px;
}
 .footer {
     margin-top: auto;
     position: relative;
     bottom: 0;
     left: 0;
     right: 0;
     background: #ffffff30;
     height: auto;
     width: 100%;
     padding: 20px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     margin-top: 50px;
}
 .footer p {
     font-family: 'Century Gothic', sans-serif;
     font-size: 12px;
     font-weight: 400;
     text-align: center;
     color: #0b213d;
     font-style: italic;
     margin-bottom:0;
}
 .footer a {
     color: #409fbf;
     font-weight: 600;
}

.social-icons {
	margin-top: 10px;
}
.social-icons a {
	color: #333;
	margin: 0 10px;
	transition: all 0.3s ease-in-out;
}
.social-icons a:hover {
	color: #007bff;
	transform: translateY(-5px);
}