html, body { margin: 0; height: 100%; } body { display: flex; align-items: center; font: large "Lucida Grande", Helvetica, Arial, sans-serif; background-color: #db970a; background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; } .card { display: flex; flex-direction: column; width: max-content; height: auto; padding: 1em; margin: auto; background-color: white; box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); } h1, h2, h3, p, label { display: block; text-align: center; } a { color: #00B7FF; cursor: pointer; text-decoration: none; } #order { margin: auto; display: flex; flex-direction: column; } .field { margin: 1em auto auto auto; width: 90%; } .field input { box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); margin: auto; width: 100%; font-size: 100%; height: 2.5vh; border-top: none; border-left: none; border-right: none; border-bottom: 1px gray solid; } .field input[type="radio"], .field input[type="checkbox"] { box-shadow: none; } .field input[type="submit"] { height: 4vh; border: none; } #order-action { display: flex; justify-content: space-around; } #add-order, #remove-order { font-weight: bold; font-size: 2em; margin: auto auto 1em auto; } .hide { display: none; } #more { display: flex; position: fixed; bottom: 0; left: 0; padding: 0.3em; background-color: white; box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); border-radius: 0.5em 0.5em 0 0; } #more a { margin: 0.1em; color: black; text-decoration: underline; } #contact .cont { display: flex; justify-content: space-between; } #contact .cont .field { margin: 0.5em; } .field.message { width: max-content; height: max-content; } .message>textarea { width: 60vw; height: 30vh; overflow: auto; resize: none; font-size: large; } .popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; height: max-content; width: max-content; max-height: 100%; max-width: 90%; } .images { display: flex; justify-content: space-around; flex-wrap: wrap; overflow-y: auto; } .images>div { display: flex; align-items: center; flex-direction: column; margin: 1em; } .images img { height: 5em; } p.before-link a::before { content: " "; } #dark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(52, 55, 55, .4); } #date-selector { position: fixed; top: 0; left: 0; border-radius: 0 0 0.5em 0.5em; } .department { box-shadow: 0.3em 0.3em 0.3em rgba(0, 0, 255, .2); } .sandwich { display: flex; margin-left: 1em; } .buttons { display: flex; justify-content: space-around; } #user { position: fixed; top: 0; right: 0; display: flex; padding: 0.3em; background-color: white; border-radius: 0 0 0.3em 0.3em; box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); } #user>p, #user>a { margin: 0.1em; } #user>a { text-decoration: underline; color: black; } #userOrderList { max-height: 90%; overflow-y: auto; } #ordersManagement, #sandwichesManagement { max-height: 90%; } #ordersManagement h2 { margin: 0.2em 0 0 0; } #ordersManagement>div, #sandwichesManagement>div { overflow-y: auto; } #ordersManagement .order { box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); } #ordersManagement .order .title, #ordersManagement .sandwich { display: flex; justify-content: center; } #ordersManagement input[value="x"] { border: none; background-color: unset; cursor: pointer; } #sandwichesManagement>a>button, #departmentsManagement>a>button, #usersManagement>a>button, #ordersManagement>a>button { width: 100%; } .give { height: min-content; width: min-content; } input[type="list"]::-webkit-calendar-picker-indicator { display: none;/* remove default arrow */ } .list_arrow:after { content: url(https://i.stack.imgur.com/i9WFO.png); margin-left: -20px; padding: .1em; pointer-events:none; } @media (hover: none) and (pointer: coarse) { body { font-size: xx-large; } .message>textarea { font-size: xx-large; } }