html { height: 100%; background-color: black; color: white; font-family: Verdana, Helvetica, sans-serif; } a { color: inherit; text-decoration: none; transition: all 0.1s ease-in-out; } a:hover { text-decoration: none; text-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff; } #background-image { background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter: blur(6px); -webkit-filter: blur(6px); position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } #content { text-align: center; text-shadow: 3px 3px 5px #000, -3px -3px 5px #000; font-weight: bold; color: white; padding: 1em; width: 40em; max-width: 90%; background-color: rgba(0, 0, 0, 0.4); border-style: solid; border-width: 2px; border-color: rgba(0, 0, 0, 0); border-radius: 128px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6); position: absolute; top: 15%; left: 50%; transform: translate(-50%, 0); z-index: 10; } #logo { margin: auto; margin-top: -5em; max-width: 60%; width: 50%; display: block; border-style: solid; border-color: rgba(0, 0, 0, 0.2); border-radius: 50%; border-width: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4); } h1 { font-variant: small-caps; font-size: 2.5em; } #content p { margin: 2em; line-height: 1.5; } ul.buttons { list-style: none; padding-left: 0; margin-top: 1em; margin-bottom: 1em; font-size: 1.75em; } ul.buttons li { line-height: 1; padding: 0.5em; margin-left: 0.5em; margin-right: 0.5em; text-transform: uppercase; } .button.nav { padding-top: 0.75em; padding-bottom: 0.55em; padding-left: 1.5em; padding-right: 1.5em; border-radius: 30px; transition: all 0.25s ease-in-out; } .button:hover { text-shadow: -3px -3px 5px #fff, -3px 3px 5px #fff, 3px -3px 5px #fff, 3px 3px 5px #fff, 0px 0px 7px #ff0000; } .button.nav:hover { text-shadow: 0px 0px 7px #000, -5px -5px 10px #fff, -5px 5px 10px #fff, 5px -5px 10px #fff, 5px 5px 10px #fff; -webkit-animation-name: pulse; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: none; animation-name: pulse; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: none; } .explore:hover { color: #5588e0; } .youtube:hover { color: #ff0000; } .instagram:hover { color: #c13584; } .twitter:hover { color: #1da1f2; } #background-info { text-align: right; font-size: 0.85em; padding: 0.75em; position: fixed; bottom: 0; right: 0; z-index: 5; } footer { font-size: 0.9em; } footer div { margin-bottom: 0.5em; } footer a.button i { padding: 0.5em; font-size: 1.25em; } .fadeout { -webkit-animation: fadeout 0.25s linear 1; -webkit-animation-fill-mode: forwards; animation: fadeout 0.25s linear 1; animation-fill-mode: forwards; } #preloader { width: 100%; height: 100%; display: inline-block; overflow: hidden; background-color: black; z-index: 100; margin: 0; position: fixed; top: 0; left: 0; } .spinner { width: 140px; height: 140px; position: relative; backface-visibility: hidden; transform-origin: 0 0; transform: translate(-50%, -50%); top: 50%; left: 50%; background-size: contain; border-radius: 50%; } .spinner div { position: absolute; width: 100px; height: 100px; border: 20px solid rgba(213, 213, 213, 1); border-top-color: transparent; border-radius: 50%; animation: spinner 1.5s linear infinite; top: 50%; left: 50%; box-sizing: content-box; } @-webkit-keyframes fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes pulse { 0% { box-shadow: 0px 0px 15px 3px #fff, 0px 0px 15px 3px #88a9fc; } 10% { box-shadow: -10px -10px 15px 3px #fff, 10px 10px 15px 3px #88a9fc; } 30% { box-shadow: -10px 10px 15px 3px #b5f7fc, 10px -10px 15px 3px #fcaa99; } 45% { box-shadow: 10px 10px 15px 3px #ecf9a7, -10px -10px 15px 3px #fcaa99; } 60% { box-shadow: 10px -10px 15px 3px #ecf9a7, -10px 10px 15px 3px #abfcad; } 75% { box-shadow: -10px -10px 15px 3px #b5f7fc, 10px 10px 15px 3px #abfcad; } 90% { box-shadow: -10px 10px 15px 3px #fff, 10px -10px 15px 3px #88a9fc; } 100% { box-shadow: 0px 0px 15px 3px #b5f7fc, 0px 0px 15px 3px #88a9fc; } } @-webkit-keyframes spinner { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } @keyframes spinner { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } @media only screen and (max-width: 600px) { #content { padding: 0; padding-bottom: 1em; border-radius: 32px; top: 6em; } #content p { margin: 1em; } ul.buttons { margin-top: 1.5em; margin-bottom: 1.5em; } ul.buttons li { display: block; margin-top: 1em; } }