body { background-image: repeating-linear-gradient(90deg, #092D61 0%, #092D61 25%, #F5F2EC 25%, #F5F2EC 75%, #092D61 75%, #092D61 100%); background-size: 12.5% 100%; background-repeat: repeat-x; width: 100%; height: 100%; margin: 0; padding: 0; min-height: 100vh; font-family: "Poppins", sans-serif; font-size: 16px; color: #092d61; }

.page-container { width: 100%; min-height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 2rem 0; position: relative; }

.page-content { width: 1140px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 4rem); padding: 0; max-width: 1140px; }
.logo { z-index: 99; display: flex; flex-direction: row; justify-content: space-between; width: 100%; }
.logo picture { width: 47.5%; display: flex; align-items: center; justify-content: center; margin: 0; }
.logo picture img { width: 100%; max-width: 100%; height: auto; animation-name: popUp; animation-duration: 1s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: .25s; transform: scale(0); }
.logo picture:nth-of-type(2) img { animation-delay: .5s; }

.content { margin: 1rem auto 0 auto; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; opacity: 0; transform: translateX(-100px); animation-name: floatLeft; animation-duration: .5s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 1s; }
.content p { font-size: clamp(1.25rem, calc(0.432rem + 4.091vw), 3rem); display: inline-block; background-color: #f5f2ec; padding: 1rem; text-transform: uppercase; font-weight: 500; letter-spacing: 6px; margin: 0; }

.social { display: flex; flex-direction: row; margin: 1rem 0 0 0; padding: 0 1rem; transform: translateX(100px); animation-name: floatRight; animation-duration: .5s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 1s; z-index: 100; opacity: 0; }
.social-icon { margin: 0 .5rem; width: 4rem; height: 4rem; transform: scale(100%); transition: .5s; }
.social-icon:hover { transform: scale(120%); transition: .5s; }

@media (max-width: 1200px) {
    .page-content { max-width: 80%; }
}

@media (max-width: 768px) {
    .page-container { align-items: flex-start; padding: 3rem 0 2rem 0; }
    .page-content { min-height: calc(100vh - 8rem); }
    .logo { flex-direction: column; }
    .logo picture { width: 100%; margin: 0 0 1rem 0; }
}

@media (max-width: 480px) {
    .content p { letter-spacing: 3px; }
}

@keyframes popUp {
    0% { transform: scale(0%); }
    100% { transform: scale(100%); }
}

@keyframes floatRight {
    0% { transform: translateX(100px); opacity: 0; }
    100% { transform: translateX(0px); opacity: 1; }
}

@keyframes floatLeft {
    0% { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0px); opacity: 1; }
}