html{ height:100%; }
body{
    height:100%; display: flex; flex-direction: column; align-items: center; font-family: Arial;
    margin: 0; background: linear-gradient(#000, #000); color:#322F31;
}

main{ width: 100%; flex-shrink: 0; margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; text-align: center; }
main #logo{ margin-bottom: 2rem; max-width: 70%; transition: 1s; width: 400px; height: auto;  }
main #logo:hover{ transform: scale(1.1); }
main #motto{ font-weight: 400; font-family: system-ui; text-align: center; color: #FFF; font-size: 1rem; }
footer { text-align: center; }
footer .social{ margin-top: .5rem; display: flex; align-items: center; justify-content: center;  }
footer .social .item-wrapper{ display: inline-block; line-height: 100%; }
footer .social .item{
    line-height: 0; background-color: #34b59d; width: 44px; height: 44px; display: flex; align-items: center;
    transition-duration: .2s; border-radius: 100%; margin: 0 .2rem; border: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
}
footer .social .item:hover{ box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.3); border-radius: 20%; }
footer .social i{ font-size: 1.75rem; margin-left: auto; margin-right: auto; color: #000; }
footer .social .item img{ width: 28px; height: 28px; }
footer{ margin-top: auto; padding-bottom: 1rem; }

#copyright{ margin-top: 2rem; color: #6c757d; font-size: 0.85rem; font-family: system-ui; }
#copyright a{ text-decoration: none; color: #34b59d; }

#copyright .line-1{ margin-bottom: .25rem;}


/* ANIMATION */
#motto{ animation: opacity1 5s linear infinite; }
#logo { animation: opacity1 5s linear infinite; }
@keyframes opacity1 {
    0%   { opacity: 1; }
    50%  { opacity: .2; }
    100% { opacity: 1; }
}