.topcard { padding-top: 1%; } .topButtons { margin-top: 2%; } .topButtonsRow { display: flex; align-items: center; justify-content: center; } .app-title { font-size: 24px; } .box-title { font-size: 20px; } .box-container { /*display: none;*/ /*position: fixed;*/ box-sizing: border-box; /*margin-left: 2%;*/ border-radius: 4px; opacity: 0.7; color: #555; background-color: #eee; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 6px 6px rgba(0, 0, 0, 0.25); } .info-container { padding: 12px 16px; line-height: 24px; } .action-container, .dropzone { position: relative; overflow: auto; height: 75%; min-height: 0; padding: 16px; margin: 8px 16px; border-radius: 4px; background-color: #fff; } .action-button { box-sizing: border-box; width: calc(100% - 16px); min-height: 35px; padding: 4px 16px; margin: 8px; border: 1px solid #555; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 14px; text-align: center; } .action-button:hover { color: #fff; background-color: #555; } .dropzone-container { height: 100%; } *::after, *::before { margin: 0; padding: 0; box-sizing: border-box } html, body { font: 100% 'Arimo', sans-serif; } .filter-wrapper, .keyword-wrapper { display: flex; justify-content: center; } .filter-wrapper { min-height: 100%; flex-flow: column wrap;; position: relative } .keyword-wrapper { width: 100%; position: relative; } #keyword { border: 1px solid #ccc; padding: 10px; font: 1.5em 'Arimo', sans-serif; width: 50%; outline: none; transition: border 0.5s ease-in-out } #keyword:focus { border-color : rgba(81, 203, 238, 1);; } #keyword-button { position: absolute; right: 26%; top: 50%; transform: translateY(-50%); font-size: 1.7em; color: #8DB9ED } #keyword-button:hover { color: #ccc } .filter-select { width: 50%; list-style: none; font-size: 1.1em; color: rgb(105, 105, 105); border: 1px solid #ccc; border-top: none; /*so things don't jump around*/ position: absolute; left: 25%; top: calc(50% + 25px); max-height: calc(50% - 15px); overflow-y: auto; background: #fff } .filter-select-list img { margin-right: 30px; } .tags { font-size: 12px; font-style: italic; color: #c6c6c6; margin-right: 10px; position: relative; top: -10px; } .filter-select-list:hover .tags { color: #fff; } .filter-select-list { cursor: pointer; padding: 5px 10px; } .artist-name { display: inline-block; position: absolute; } .filter-select-list:hover { background: #C0C0C0; color: #fff } .list-highlight, .list-highlight:hover { background: rgb(55, 55, 55); color: #fff } @media only screen and (max-width: 768px) { .filter-select, #keyword { width: 80%; } #keyword { font-size: 1.3em } .filter-select { font-size: 0.9em; left: 10%; top: calc(50% + 23px); } #keyword-button { right: 11% } } @media only screen and (max-width: 480px) { .filter-select, #keyword { width: 95%; } .filter-select { left: 2.5%; } #keyword-button { right: 3.5% } } #cookiesModal { display: flex; justify-content: center; align-items: center; }