* { font-family: 'Minecraft', sans-serif; box-sizing: border-box; } body { padding: 0; margin: 0; } nav { background-color: black; height: 50px; width: 100%; border-bottom: 1px solid black; margin: 0; display: block; position: fixed; top: 0; } 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; transition: color 0.3s; padding: 4px 6px 2px; } .text-container a::after { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: black; z-index: -2; } .text-container a::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; bottom: 0; background-color: lightgrey; transition: width 0.3s; z-index: -1; } .text-container a:hover { color: white; } .text-container a:hover::before { width: 0; } .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; } .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; }