*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } body { opacity: 0; background-color: #000000; } #bg { content: ''; position: fixed; width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #000000; } body, #bg { z-index: 0; min-width: 240px; width: 100vw; min-height: 100vh; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; } #bg::-webkit-scrollbar { display: none; } .main { z-index: 1; color: #FFFFFF; display: flex; position: relative; flex-direction: column; justify-content: center; text-align: left; max-width: 100%; min-height: 100vh; padding: 5rem 5rem; width: 45rem; opacity: 0; } .main>* { opacity: 1; } .tagline { font-family: "Montserrat", Times; margin-top: 0; margin-bottom: 0.75rem; letter-spacing: 0.3rem; width: calc(100% + 0.5rem); font-size: 3.5rem; line-height: 1.5; font-weight: 200; } .tl1 { margin-bottom: -0.2rem; } .major { font-family: "Montserrat", Times; margin-top: 0; margin-bottom: 2rem; font-size: 1.25rem; line-height: 1.375; font-weight: 300; } .divider { width: 19%; margin-top: 0; margin-left: 0; margin-bottom: 2rem; border: solid 1px; } .about { font-family: "Source Code Pro", Times; margin-top: 0; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.625; } .buttons { font-family: "Source Code Pro", Times; margin-top: 0; margin-bottom: 1.5rem; width: calc(100% + 0.75rem); margin-left: -0.375rem; margin-right: -0.375rem; list-style: none; } .buttons li { display: inline-block; max-width: calc(100% - 0.75rem); margin-left: 0.375rem; } .buttons li a { border: solid 1px; display: flex; padding: 0 1.2rem; border-radius: 0.5rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; font-size: 1rem; align-items: center; justify-content: center; } .icons { margin-top: 0; margin-bottom: 0; width: calc(100% + 1rem); margin-left: -0.5rem; list-style: none; } .icons li { display: inline-block; margin: 0.75rem; vertical-align: middle; } .icons li a { border-radius: 100%; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; } a:link, a:visited { color: #FFFFFF; border-color: #FFFFFF; text-decoration: none; transition: 0.32s; } a:hover, a:active { color: #5AD1E5 !important; border-color: #5AD1E5 !important; text-decoration: none; transition: 0.32s; } html { font-size: 18pt; } @media (max-width: 1680px) { html { font-size: 13pt; } } @media (max-width: 980px) { html { font-size: 11pt; } } @media (max-width: 736px) { .main { padding: 0.375rem 2rem; } .tagline { margin-bottom: 0.75rem; letter-spacing: 0.4375rem; width: calc(100% + 0.4375rem); font-size: 2.125rem; line-height: 1.5; } } @media (max-width: 480px) { .main { text-align: center; padding: 0.375rem 2rem; align-items: center; align-content: center; } .tagline { margin-left: 0.8rem; margin-bottom: 0.65625rem; } .major { margin-bottom: 1.75rem; } .divider { margin-bottom: 1.75rem; } .about { text-align: justify; } .buttons li { display: block; padding: 0.4rem 0; } } @media (max-width: 360px) { .main { padding: 0.28125rem 1.5rem; } .tagline { margin-bottom: 0.5625rem; } .major { margin-bottom: 1.5rem; } .divider { margin-bottom: 1.5rem; } .buttons li { padding: 0.27rem 0; } }