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

main{ flex-shrink: 0; margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; text-align: center; }
main #logo{ margin-bottom: 2rem; max-width: 100%; transition: 1s; height: 100px;  }
main #logo:hover{ transform: scale(1.1); }
#motto{ font-weight: 400; font-family: system-ui; text-align: center; color: #6c757d; font-size: 1.5rem; }
#motto a{ text-decoration: none; color: #000; }
footer { text-align: center; }
footer .social{ font-size: 48px; margin-top: .5rem;  }
footer .social .item-wrapper{ display: inline-block; }
footer .social .item{
    line-height: 0; background-color: #231f20; 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);
}
footer .social .item:hover{ background-color: #666; transform: scale(1.1); box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.3); }
footer .social a{ text-decoration: none;  }
footer .social i{ font-size: 1.75rem; margin-left: auto; margin-right: auto; color: #FFF; }
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; }

#copyright .line-1{ margin-bottom: .25rem;}
#copyright .line-2 a{ color: #000; }

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