body { padding: 15px 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #E0E0E0; font-size: 0.9em; line-height: 1.6em; background: #000; } img { width: 100%; } #navigation h1.nav-header { padding: 0 15px; margin-bottom: 0; } #navigation a.nav-header { padding: 5px 15px; font-weight: bold; } #navigation ul.uk-nav { padding: 15px 0; } #navigation p { padding-bottom: 10px; } #navigation li.language-select select { float: right; } #content h2 { font-family: Georgia, "Times New Roman", Times, serif; s } #content img.header { margin-bottom: 20px; } #content ul { list-style-type: square; } #content li.done { color: #E160E0; text-decoration: line-through; } #content div.images div { padding-bottom: 25px; } #content p.images-text { margin-top: -15px; } #content .iframe-container { position: relative; /* Magic! Makes sure the container is high enough to show the entire iframe * Thanks to http://andmag.se/2011/11/responsive-embeds/ */ padding-bottom: 56.5%; } #content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 767px) { h2 { margin-top: 25px; } } /* Stars * Thanks to http://codepen.io/keithclark/pen/zqcEd */ #space, .stars { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .stars { background-image: radial-gradient(2px 2px at 20px 30px, #eee, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0)); background-repeat: repeat; background-size: 200px 200px; animation: zoom 10s infinite; opacity: 0; } .stars:nth-child(1) { background-position: 50% 50%; animation-delay: 0s; } .stars:nth-child(2) { background-position: 20% 60%; animation-delay: 2s; } .stars:nth-child(3) { background-position: -20% -30%; animation-delay: 4s; } .stars:nth-child(4) { background-position: 40% -80%; animation-delay: 6s; } .stars:nth-child(5) { background-position: -20% 30%; animation-delay: 8s; } @keyframes zoom { 0% { opacity: 0; transform: scale(0.5); animation-timing-function: ease-in; } 85% { opacity: 1; transform: scale(2.8); animation-timing-function: linear; } 100% { opacity: 0; transform: scale(3.5); } }