nav { width: 100vw; height: 8vh; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; z-index: 999; } nav ul { width: 60%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; list-style: none; } nav ul li a { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: black; text-decoration: none; } nav ul li a:hover { font-weight: bold; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { overflow-x: hidden; } .seal { width: 100px; height: 100px; z-index: 999; position: fixed; right: 0; margin-right: 15px; margin-top: 15px; } .seal::before { -webkit-animation: spin 20s 10s infinite; animation: spin 20s 10s infinite; content: ''; width: 100%; height: 100%; position: absolute; background-image: url("/res/seal.png"); background-size: cover; } @media (max-width: 786px) { .seal { display: none; } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } section { height: 100vh; width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 1; } #landing { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-left: 5vw; font-size: 4rem; font-family: cooper-black-std, "Arial Black", sans-serif; color: #DA3252; line-height: 1; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(245, 246, 252, 0.52)), to(rgba(255, 255, 255, 0))), url("/res/banner.png"); background-image: linear-gradient(to right, rgba(245, 246, 252, 0.52) 50%, rgba(255, 255, 255, 0)), url("/res/banner.png"); text-shadow: 3px 3px #000; } @media (max-width: 786px) { #landing { padding-left: 0; font-size: 2rem; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(245, 246, 252, 0.52); } } .subtitle { color: #5d8db9; font-family: "Fugaz One", cursive; } #about { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 5vw 5vh 0 5vw; height: auto; } #about .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 5vh; } #about .row .caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; padding: 0 5vw; } #about .row .caption h1 { font-family: "Fugaz One", cursive; font-size: 4rem; color: #DA3252; line-height: 1; margin-bottom: 5vh; } #about .row .caption p { font-family: "Poppins", sans-serif; font-size: 1.5rem; color: #5d8db9; line-height: 1.5; margin-bottom: 5vh; } #about .row .img { width: 100%; height: 50vh; background-repeat: no-repeat; background-size: contain; background-position: center; } #about .row #experience { background-image: url("/res/experience.jpeg"); } #about .row #initatives { background-image: url("/res/initiatives.jpg"); } #about .row #community { background-image: url("/res/community.jpg"); } @media (max-width: 786px) { #about .row { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } #cta { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30vh; background: #FDFD96; } #cta h1 { font-family: cooper-black-std, cursive; font-size: 2rem; line-height: 1; } #cta h2 { font-family: "Poppins", sans-serif; font-size: 6rem; color: #000; line-height: 1; text-decoration: underline; } #cta p { font-family: cooper-black-std, sans-serif; font-size: 1.5rem; color: #4b4b4b; line-height: 4; } #cta:hover { cursor: pointer; } #cta:hover p { color: #DA3252; } /*# sourceMappingURL=style.css.map */