@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); * { --red: #e83b3a; --orange: #e67439; --yellow: #f2b73f; --navy: #151d37; --blue: #0c3761; } html { scroll-behavior: smooth; background-color: var(--blue); } /* Alternate background setup where the background is static */ /*#bg-img {*/ /* background-size: cover;*/ /* position: fixed;*/ /* width: 100vw;*/ /* height: 100vh;*/ /* z-index: -1;*/ /*}*/ body { background-image: url("/images/paper_navy_tilable.jpg"); background-size: 100% !important; background-repeat: space repeat; @media (max-width: 900px) { background-size: 300% !important; } /* Note: the background property is overridden in . */ /* This override is removed in the onload callback of a tag in the . */ /* This prevents the background image from displaying when it is only partially loaded. */ font-family: "Noto Sans", sans-serif; color: white; margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } header { display: flex; justify-content: center; padding-top: 30px; color: var(--navy); position: fixed; width: 100%; z-index: 10; filter: drop-shadow(0 0 20px var(--navy)); @media (max-width: 900px) { font-size: 9pt; } } .navbar { & ul { list-style-type: none; overflow: hidden; background-color: var(--orange); padding: 0; margin: 0; } & li:first-child { @media (max-width: 380px) { display: none; } } & a { text-decoration: none; padding: 15px; display: block; text-align: center; &:hover { background-color: var(--yellow); } @media (max-width: 900px) { padding: 10px 5px 10px 5px; } } & :link, :visited { color: var(--navy); } & li { float: left; } } :link, :visited { color: var(--orange); } .link-button { padding: 10px; background-color: var(--orange); color: var(--navy); text-decoration: none; transition: 0.3s; line-height: 45px; white-space: nowrap; filter: drop-shadow(var(--navy) 0 0 5px); } .link-button:hover { background-color: var(--yellow); } h1 { font-weight: 900; font-size: 36px; } h2 { font-size: 32px; } main { text-align: center; padding-top: 5%; padding-bottom: 5%; } .social { max-width: 50px; padding: 10px; transition: 0.3s ease-in-out; &:hover { scale: 1.2; } } .cards { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; & a { color: unset; text-decoration: none; background-color: var(--navy); padding: 10px; max-width: 200px; height: auto; transition: 0.3s ease-in-out; @media (max-width: 900px) { max-width: 150px; } &:hover { scale: 1.05; } filter: drop-shadow(var(--navy) 0 0 5px); } & div > img { max-height: 30px; } } footer { display: block; padding: 5px; background-color: var(--navy); color: white; font-size: 12px; text-align: center; }