html { height: 100%; background-color: black; color: white; font-family: Verdana, Helvetica, serif; } a { color: inherit; text-decoration: none; transition: all 0.1s ease-in-out; } a:hover { text-decoration: none; text-shadow: 3px 3px 10px #fff, -3px -3px 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(255, 255, 255, 0.2); border-style: solid; border-width: 2px; border-color: rgba(255, 255, 255, 0); border-radius: 128px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); position: absolute; top: 20%; 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(255, 255, 255, 0); border-radius: 50%; border-width: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } h1 { font-variant: small-caps; } #content p { margin: 2em; line-height: 1.5; } ul.buttons { list-style: none; padding-left: 0; margin-bottom: 4em; margin-top: 3em; font-size: 1.1em; } ul.buttons li { display: inline; line-height: 1; padding: 0.5em; margin-top: 3em; margin-left: 0.5em; margin-right: 0.5em; text-transform: uppercase; } .button:hover { text-shadow: -3px -3px 5px #fff, -3px 3px 5px #fff, 3px -3px 5px #fff, 3px 3px 5px #fff, 0px 0px 7px #ff0000; } .gallery: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; } .fadeout { -webkit-animation: fadeout 0.25s linear 1; -webkit-animation-fill-mode: forwards; animation: fadeout 0.25s linear 1; animation-fill-mode: both; } #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;} } @-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: 2em; margin-bottom: 3em; } ul.buttons li { display: block; margin-top: 1em; } }