* { font-family: 'Minecraft', sans-serif; box-sizing: border-box; } body { padding: 0; margin: 0; background-color: white; } nav { background-color: black; height: 50px; width: 100%; border-bottom: 1px solid black; margin: 0; display: block; position: fixed; top: 0; z-index: 10; } nav .hamburger { display: none; } nav ul { list-style-type: none; display: block; margin: 0; padding: 0; position: absolute; top: 0; } nav li { font-size: 20px; display: inline-block; margin: 0; padding: 0; } nav .left { left: 20px; } nav .right { right: 20px; } nav a { margin: 0; display: inline-block; text-decoration: none; color: white; box-shadow: inset 0 0 0 0 white; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; padding: 13px 25px; } nav a:active { color: white; } nav a:visited { color: white; } nav a:hover, nav .active a { box-shadow: inset 140px 0 0 0 white; color: black; } #content { padding-top: 50px; } .text-container { width: 70vw; margin-left: auto; margin-right: auto; margin-bottom: 50px; } h1 { text-align: center; font-size: 40px; margin: 60px; } h2 { margin-top: 35px; font-size: 25px; } .text-container p, .text-container a, .text-container li { font-size: 25px; line-height: 32px; } .text-container a, .text-container a:visited { text-decoration: none; color: black; position: relative; background-color: lightgray; transition: color 0.3s, background-color 0.3s; padding: 4px 6px 2px; } .text-container a:hover { color: white; background-color: black; } .choice { position: relative; } .selection { display: flex; flex-direction: row; justify-content: center; margin-left: auto; margin-right: auto; max-width: 90vw; } .separator { flex-grow: 1; position: relative; } .separator .new-pairing { position: absolute; width: 100%; bottom: 5vw; text-align: center; } .separator .new-pairing a, .separator .new-pairing a:visited { text-decoration: none; color: black; border-radius: 3px; display: inline-block; padding: 10px; } .separator .new-pairing a:hover { text-decoration: underline; } .middle { width: 100%; position: absolute; top: 0; height: 100%; user-select: none; z-index: -100; } .middle .or, .middle .spinner { color: white; font-size: 30px; position: absolute; top: 60%; width: 100%; text-align: center; transform: translate(0%, -50%); opacity: 1; transition: opacity 0.2s; } .middle .spinner img { width: 7vw; } .loading .or { opacity: 0; } .loading .spinner img { animation-name: spinner; animation-duration: 1s; animation-delay: 0.2s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .mob { width: 33vw; height: 35vw; position: relative; } .mob h2 { position: absolute; width: 100%; text-align: center; } .mob input.fallback { display: block; margin: auto; } .mob img { object-fit: contain; width: 28vw; height: 28vw; margin-top: 5.5vw; margin-left: 2.5vw; } .results-list img { height: 100px; object-fit: contain; width: 100px; } .results-list .right { text-align: right; padding-right: 15px; } .results-list .left { padding-left: 10px; } .results-list .trend-container { width: 400px; height: 100px; } .results-list { border-collapse: collapse; margin-left: auto; margin-right: auto; } .results-list th { font-size: 20px; } .results-list td { border: none; } .results-list tbody tr:nth-child(even) { background-color: rgb(230, 230, 230); } .results-list tbody tr:nth-child(odd) { background-color: white; } .results-list td a, .results-list td a:visited { text-decoration: none; color: black; transition: color 0.2s; } .results-list td a:hover { color: grey; text-decoration: underline; } #disclaimer p { font-size: 13px; text-align: center; color: grey; } #disclaimer a, #disclaimer a:visited { color: grey; } #version { position: fixed; bottom: 0; left: 2px; font-size: 12px; } @media (max-aspect-ratio: 1/1.4) { nav { background: transparent; height: 60px; width: 60px; left: initial; right: 0; border: none; transition: background-color 0.3s, width 0.3s, height 0.3s; } nav .hamburger { position: absolute; right: 0; display: block; font-size: 40px; margin: 0; } nav .hamburger i { position: absolute; top: 5px; right: 10px; transition: opacity 0.3s; } nav .hamburger .closed { opacity: 1; } nav .hamburger .open { opacity: 0; right: 12px; color: white; } nav .hamburger .checkbox { position: absolute; right: 5px; width: 40px; height: 40px; cursor: pointer; opacity: 0; } nav:has(> .hamburger input[type="checkbox"]:checked) { width: 100%; height: 100%; background-color: black; } nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .open { opacity: 1; } nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .closed { opacity: 0; } nav ul { margin-top: 60px; display: none; width: 50%; } nav .left { left: 0; } nav .right { right: 0; } nav ul li, nav ul li a { display: block; width: 50vw; font-size: 40px; } nav .right a { text-align: right; } nav ul li a:hover, nav ul li.active a { box-shadow: inset 50vw 0 0 0 white; } nav:has(> .hamburger input[type="checkbox"]:checked) ul { display: block; } h1 { font-size: 30px; margin-top: 0; margin-bottom: 3vh; } .selection { flex-direction: column; max-width: 90vw; align-items: center; height: 100%; } .separator { height: 13vh; width: 100%; } .separator .new-pairing { bottom: 0; } .mob { width: 24vh; height: 27vh; } .mob h2 { font-size: 20px; margin: 0; } .mob img { width: 24vh; height: 24vh; margin-top: 3vh; margin-left: 0; } .middle .or, .middle .spinner{ top: 57%; } .middle .spinner img { width: auto; height: 7vh; } .results-list td img { width: 50px; height: 50px; } .results-list .hide-on-mobile { display: none; } .results-list .trend-container { width: 190px; } #disclaimer { max-width: 90vw; margin: auto; } }