@font-face { font-family: 'Glacial Indifference Bold'; src: url('fonts/GlacialIndifference/GlacialIndifference-Bold.eot'); src: url('fonts/GlacialIndifference/GlacialIndifference-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.woff2') format('woff2'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.woff') format('woff'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.ttf') format('truetype'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.svg#GlacialIndifference-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Glacial Indifference'; src: url('fonts/GlacialIndifference/GlacialIndifference-Regular.eot'); src: url('fonts/GlacialIndifference/GlacialIndifference-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff2') format('woff2'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff') format('woff'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.ttf') format('truetype'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.svg#GlacialIndifference-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'CaslonOS'; src: url('fonts/caslon-os/CaslonOS-Regular.woff2') format('woff2'), url('fonts/caslon-os/CaslonOS-Regular.woff') format('woff'); } @keyframes fade { from {opacity: 5%; border-color: #07121B;} to {opacity: 100%; border-color: #07121B;} } @keyframes fadeup { from {opacity: 5%; margin-top: 1vh;} to {opacity: 100%; margin-top: relative;} } @keyframes fadegrow { from {opacity: 0%; width: calc(5vh + 5vw);} to {opacity: 100%; width: calc(20vh + 20vw);} } @keyframes bgcolor { from {color: #BEBEBE;} to {color: #07121B;} } h1 { font-family: 'Glacial Indifference'; margin-top: 40vh; margin-bottom: auto; font-size: calc(2.5vh + 2.5vw); text-align: center; color: #BEBEBE; border-radius: 5px; border: #BEBEBE; border-width: 1vh; transition: 0.5s; animation-name: fade; animation-duration: 0.5s; animation-delay: 0; min-width: 150px; font-weight: bold; } body { background-color: #07121B; size: 100%; /*height: 100vh;*/ animation-name: bgcolor; animation-duration: 0.5s; margin: 0; } hr { display: calc(0.15vh + 0.15vw) solid #BEBEBE; border: calc(0.15vh + 0.15vw) solid #BEBEBE; color: #BEBEBE; fill: #BEBEBE; fill-opacity: 100%; width: calc(20vh + 20vw); border-radius: 5px; animation-name: fadegrow; animation-duration: 1s; transition: 1s; animation-delay: -3; background-color: #BEBEBE; } p { font-family: 'Glacial Indifference'; text-align: center; font-size: calc(1.3vh + 1.3vw); color: #BEBEBE; margin-top: -0.01vh; animation-name: fadeup; animation-duration: 2s; transition: 2s; animation-delay: -3; } .aligner { text-align: center; } button { border-radius: 0 0 0 15px; border-color: #202F3A; color: #BEBEBE; width: calc(7vw + 5vh); height: calc(3vw + 1vh); text-align: center; background-color: #202F3A; font-family: 'Glacial Indifference'; transition: 1s; border-width: 1px; font-size: calc(1vw + 1vh); margin: 0.0vw; border-style: none; animation-name: fade; animation-duration: 1s; min-width: 60px; min-height: 30px; transition: 1s; } @keyframes buttonwhitefade { from {color: #BEBEBE;} to {color: #BEBEBE;} } button:hover { border-radius: 0 0 0 15px; color: #BEBEBE; border-color: #2D4251; text-align: center; background-color: #2D4251; transition: 0.75s; cursor: pointer; } .b2 { border-radius: 0px; border-color: #2D4251; color: #BEBEBE; width: calc(7vw + 5vh); height: calc(3vw + 1vh); text-align: center; background-color: #111920; font-family: 'Glacial Indifference'; border-width: 2px; font-size: calc(1vw + 1vh); margin-top: calc(0); margin: 0vw; border-style: none; animation-name: fade; animation-duration: 0.75s; } .b2:hover { border-radius: 0px; color: #BEBEBE; border-color: #363636; text-align: center; background-color: #0E2533; cursor: pointer; } .b3 { border-radius: 0 0 15px 0; border-color: #2D4251; color: #BEBEBE; width: calc(7vw + 5vh); height: calc(3vw + 1vh); text-align: center; background-color: #111920; font-family: 'Glacial Indifference'; border-width: 2px; font-size: calc(1vw + 1vh); margin-top: calc(0.0vw + 0.0vh); margin: 0vw; border-style: none; animation-name: fade; animation-duration: 0.75s; } .b3:hover { border-radius: 0 0 15px 0; color: #BEBEBE; border-color: #363636; text-align: center; background-color: #0E2533; cursor: pointer; } nav { height: calc(3vw + 1vw + 1vh + 1vh); padding: 0; width: calc(22vw + 1vw + 16vh + 1vh); animation-name: fade; animation-duration: 0.75s; background-color: #050C12; border-radius: 0 0 15px 15px; min-height: 38px; min-width: 220px; transition: 0.75s; margin-left: auto; margin-right: auto; margin-top: 0; } .footer { background-color: #07121B; border-color: #07121B; border-style: solid; border-width: 0.25vh; color: #BEBEBE; padding-bottom: 0vh; padding-top: 0vh; margin-bottom: 0vh; height: 5vh; border-radius: 0px; transition: 1s; animation-name: fade; animation-duration: 2s; font-family: 'Glacial Indifference'; text-align: center; font-size: calc(0.75vh + 0.75vw); position: fixed; bottom: 0; right: 0%; width: 100%; box-sizing: border-box; display: inline-block; margin-right: 0%; margin-left: 2.5%; } html { background-color: #07121B; color:#07121B margin: 0; }