#title { padding: 20px 0px; width: 110%; font-family: 'adidas_half_block_2016regular'; color: #ffffff; align-items: center; justify-content: center; text-shadow: 0 0 6px rgb(255, 255, 255); } h1{ font-size: 36px; font-weight: normal; font-style: normal; margin-bottom: 20px; margin-top: 12px; } h4{ font-size: 20x; font-weight: bold; font-style: normal; margin-bottom: 10px; margin-top: 5px; } .size48{ font-size: 48px; } .size48 span { color: #00fff2; align-items: center; justify-content: center; } /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 29, 2019 */ @font-face { font-family: 'adidas_half_block_2016regular'; src: url('adidas_half_block_2016-webfont.woff2') format('woff2'), url('adidas_half_block_2016-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .heading span { color: #00fff2; align-items: center; justify-content: center; } body { margin: 20px; font-family: 'Raleway', sans-serif; font-size: 18px; color: #ffffff; background-image: linear-gradient(to bottom right, rgb(128, 0, 128), rgb(77, 24, 161), rgb(97, 165, 197)); background-repeat: no-repeat; background-size: 500px 740px; position: fixed; top: 0; left: 0; bottom: 0; right: 0; } #question { width: 100%; } input[type=button] { font-family: 'Raleway'; font-weight: bold; font-size: 16px; text-transform: uppercase; vertical-align: top; text-align: center; height: 40px; min-width: 44.25%; padding: 0px 12px; margin-right: 20px; border-radius: 3px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; } input[type=button].green { color: #121212; background: linear-gradient(#9dff00 20%, #ffee00 100%); } input[type=button].red { color: #121212; background: linear-gradient(#ff6600 20%, #ca0000 100%); } input[type=button].blue { margin-right: 10px; height: 32px; min-width: 20%; color: #121212; background: linear-gradient(#00aeff 20%, #b9f2fa 100%); } input[type=button].red:enabled:hover { background: linear-gradient(#fff, #fff); border: none; } input[type=button].blue:enabled:hover { background: linear-gradient(#fff, #fff); border: none; } input[type=button].green:enabled:hover { background: linear-gradient(#fff, #fff); border: none; } input[type=button]:active { background: linear-gradient(#343434, #343434); } input[type=button].green:active { background: linear-gradient(#afafaf, #afafaf); } input[type=button]:disabled { color: #1f1f1f; background: linear-gradient(rgba(212, 212, 212, 0.466),rgba(51, 51, 51, 0.425)); } input[type=button][pressed=pressed] { color: #fbff00; } .correct { color: #ef9b00; font-weight: bold; } .dropdown { font-family: 'Raleway', sans-serif; font-weight: bold; font-size: 13px; position: relative; width: 100%; } .dropdown:focus { border: none; outline: none; } .dropdown li { list-style-type: none; padding: 3px 0 1px 12px; width: 120px; height: auto; font-size: 15px; color: #404040; background-color: #d4d4d4; z-index: 999; } .dropdown li:hover { background-color: #e6eaeb; } .styled-select { height: 50px; overflow: hidden; width: 290px; } .dropdown-items { display: none; position: absolute; background-color: #dddcdc; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } #typedropdown { left: 0%; width: 100%; } #difficultydropdown { left: 0%; width: 100%; } #categorydropdown { left: 0%; width: 100%; } #databasedropdown { left: 0%; width: 100%; } .dropdown-items a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-items a:hover { background-color: #f1f1f1 } .dropdown-type { margin:0; padding: 0 } .dropdown-database { margin:0; padding: 0 } .dropdown-difficulty { margin:0; padding: 0 } .dropdown ul { display: inline; } .dropdown-category { margin:0; padding: 0; } #categorydropdown li{ width: 100% } #databasedropdown li{ width: 100% } #typedropdown li{ width: 100% } #difficultydropdown li{ width: 100% } .show { display:block; }