/* Shortcuts */ .shortcuts button { margin: 0 0 1rem 1rem; width: 12rem; max-height: 5.3rem; padding: 1rem; color: white; background-color: #363840; border: #363840 0px solid; border-radius: .5rem; display: inline-block; transition: background-color .5s, border .5s; } .shortcuts button::-webkit-scrollbar { display: hidden; } .shortcuts button:hover { background-color: #3d3e47; border-color: #3d3e47; } .shortcuts button:hover .removeShortcut { display: inline; } .shortcuts button:focus { outline: none; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset; } .shortcuts img { width: 3rem; margin-right: 1rem; height: 3rem; } /* Shortcut creation menu */ .hidden { opacity: 0!important; } .menu { transition: opacity .5s; } #addShortcutMenu { display: inline-block; z-index: 2; border-radius: .75rem; position: absolute; left: calc(50% - 25rem); height: 27rem; width: 50rem; top: 15%; } #addShortcutMenu h1 { margin: 1rem 0 0 1rem; } #addShortcutMenu input { width: 96%; height: 2.5rem; margin-left: 1rem!important; } #addShortcutMenu h4 { margin: 2rem 0 0 1rem; } #addShortcutMenu button { float: right; margin: 4rem 1rem 0 0; padding: .5rem; } @media screen and (min-width:0px) and (max-width:1000px) { #addShortcutMenu { width: 94%!important; left: 1rem!important; margin-left: 0px!important; } section span button { width: 9rem!important; height: 8rem!important; color: transparent!important; } }