body { background: linear-gradient(to bottom right, bisque, hsl(24, 57%, 70%)); height: 100vw; margin: 0; } #bytes_in { text-align: center; border: 0px; font-size: 56px; font-family: 'Cute Font'; filter: sepia(100%); border-radius: 10px; background-color: #eeeeee; } #input_box { filter: // drop-shadow(5px 5px red) sepia(100%) // drop-shadow(-5px -5px hsl(24, 27%, 40%)) drop-shadow(10px 10px 10px 10px hsl(24, 27%, 40%)); height: 150px; display: flex; width: 100%; align-items: center; justify-content: center; } .bit { color: blue; font-weight: 200; font-size: 80px; cursor: pointer; } th { background-color: bisque; } th:nth-child(odd) { background-color: burlywood; } #bit_wrap table:nth-of-type(even) { margin-left: 5px; margin-bottom: 5px; margin-right: 0px; } #bit_wrap table:nth-of-type(odd) { margin-left: 0px; margin-bottom: 5px; margin-right: 5px; } table { width: 45%; } #activated_ext { display: flex; flex-wrap: wrap; flex-basis: content; justify-content: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; text-align: center; border: 0px; font-size: 36px; font-family: 'Cute Font'; background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%)); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #activated_wrap { display: flex; flex-wrap: wrap; flex-basis: content; justify-content: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; text-align: center; border: 0px; font-size: 36px; font-family: 'Cute Font'; background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%)); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #bit_wrap { filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px hsl(24, 27%, 40%)); display: flex; flex-wrap: wrap; flex-basis: content; justify-content: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; } #activated { text-wrap: balance; font-weight: bold; font-size: 64px; color: grey; word-wrap: break-word; text-align: center; /* width: 90vw; */ } #activated_text { font-weight: bold; text-align: center; font-size: 32px; } .bit:hover { filter: brightness(85%) saturate(150%); } .header { font-size: x-large; }