/* Global Secion */ body { background: #233142; } a { text-decoration: none; } .align-center { text-align: center; align: center; } /* Avatar Secion */ .avatar { text-align: center; margin-top: 5%; } .avatar-img { width: 200px; height: auto; border-radius: 50%; margin-top: 1%; animation-name: avatar-picture-fadein; animation-duration: 1.5s; } .avatar-text { color: #7996b9; font-family: 'Trebuchet MS', sans-serif; animation-name: fadeIn; animation-duration: 1.5s; } .avatar-subtext { color: #7996b9; font-family: 'Trebuchet MS', sans-serif; animation-name: fadeIn; animation-duration: 1.5s; } /* links Secion */ .links { text-align: center; margin-top: -2%; } .block { display: inline-block; vertical-align: top; padding: 5%; font-size: 38px; color: #bfbfbf; max-width: 14%; opacity: 0; } @media only screen and (max-width: 968px) { .block { display: block; text-align: center; transform: translate(50%, 3%); max-width: 40%; } } .block-subtext { font-size: 0.5em; color: #7996b9; font-family: 'Trebuchet MS', sans-serif; } .block-1{ animation-name: fadeIn; animation-duration: 1.5s; animation-delay: 0.2s; animation-fill-mode:forwards; } .block-2{ animation-name: fadeIn; animation-duration: 1.5s; animation-delay: 0.5s; animation-fill-mode:forwards; } .block-3 { animation-name: fadeIn; animation-duration: 1.5s; animation-delay: 0.8s; animation-fill-mode:forwards; } .button { border: 0; background: #354a64; color: #bfbfbf; width: 110px; height: 40px; margin: 20px auto; border-radius: 5px; display: block; text-decoration: none; text-align: center; font-family: 'Trebuchet MS', sans-serif; font-size: 0.6em; transition-duration: 0.4s; } .button:hover { background-color: #006080; } /* Footer section */ .footer { text-align: center; margin-top: -2%; color: #7996b9; font-family: 'Trebuchet MS', sans-serif; animation-name: fadeIn; animation-duration: 1.5s; } .footer-heart { color: red; }