body { background: url('images/index_optimized.webp') 50% 50% no-repeat fixed black; } a { color: orange; } .bartest { position: absolute; bottom: 4px; width: inherit; height: auto; right: 0; left: 0; font-family: arial; font-weight: bold; color: white; text-decoration: none; padding-top: 120px; } .bar-link { background-position: center -14px; background-repeat: repeat-x; width: 128px; height: 128px; color: #FFFFFF; position: relative; top: 8px; left: 0; display: inline-block; } #logo { float: left; width: 0; max-width: 100vw; clear: both; margin: 0 0 20px 25px; opacity: 0.35; } .bar-link:hover { background-position: center -142px !important; } #includedContent { min-height: 190px; } #topbar { overflow: visible; background-position: -50px -13px; background-image: url('images/Aurora_top_bar_new.webp'); background-repeat: repeat-x; padding-top: 57px; } .buttonkeygameicon, #buttonkeyrazer, #buttonkeylogitech { border: 3px solid #323232; border-radius: 10px; padding: 10px; background: linear-gradient(to bottom, rgb(32, 32, 32) 0%, rgb(8, 8, 8) 40%, rgb(8, 8, 8) 60%, rgb(32, 32, 32) 100%); } .buttonkeygameicon { width:64px; height:64px } .content { font-family: arial; } .auto-style1 { text-align: left; width: fit-content; } .features { padding: 2em; margin: 1em 0; background: #000000AA; border-radius: 1em; width: fit-content; } .box-size { box-sizing: border-box } .image-container { max-width: 100vw; } .image-container img { max-width: 100%; width: auto; height: auto; } /* Slideshow container */ .slideshow-container { max-width: 1000px; max-height: 670px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides { max-width: 1000px; display: none; } .mySlides0 { max-width: 1000px; } .slideshow-container img { max-width: 100%; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .prev { left: 0; background-color: rgba(0, 0, 0, 0.3); } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; background-color: rgba(0, 0, 0, 0.3); } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } .keyboard { position: relative; transition: opacity 1s ease; } .keyboard > * { position: absolute; left: 0; top: 0; width: 100%; } .keyboard > video { max-width: 95%; } .keyboard > image { opacity: 0.5%; } .demo-container { align-items: center; } .demo-container > * { min-width: 50px; max-width: 100%; margin: 5px; } .keyboard-container { display:inline-block; width: 600px; max-width: 100vw; height:342px; } #gameplay { width: 600px; max-width: 100vh; } @media (max-width: 600px) { #gameplay { max-width: 100vw; } } .keyboard-switch { min-height: 40px; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } lite-youtube { height: 500px; max-width: unset; } .info-panel { background-color: rgba(0, 0, 0, 0.7); width: 75%; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } /* disable animations until load */ .preload * { transition: none !important; animation-duration: 0.001s !important; } @media (max-width: 1080px) { .bar-link { top: 0; } .bar-link.excessive { visibility: collapse; display: none; } #logo { width: 100%; margin: 0; } #logo > img { max-width: 100%; } #topbar { padding-top: 2px; } } @media (max-width: 600px) { .keyboard-container { width: 100%; height: 227px; } }