body { background-color: #121212; color: snow; transition-duration: 3s; } canvas{ margin-left: 5rem; height: 50rem; } html { font-family: "Courier New", Courier, monospace; } input { height: 1.5rem; width: 15rem; } li { padding: 0.75rem; } ul { padding: 0; list-style-type: none; text-align: center; } .add-item-button { height: 2rem; width: 15.5rem; margin-top: 0.5rem; } .close-arrow { width: 1rem; height: 1rem; } .counter { font-size: 24px; text-align: center; } .light-dark-mode { float: right; padding: 1rem; } .remove-all-items-button { width: 5.4rem; } .roulette-wheel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .menu { width: 24rem; } .menu-item-list { text-align: center; } .moon-sun { width: 3rem; height: 3rem; } .item-delete { width: 1rem; height: 1rem; float: right; } .open-close-menu { display: flex; justify-content: right; } @media screen and (max-width: 940px) { canvas{ margin-top: 5rem; height: 30rem; margin: auto; } .roulette-wheel { position: relative; top: 0; left: 0; width: 100%; transform: translate(0, 0); } }