/* birthday.css */ /* Flip everything on the page */ /* Flip every direct child of * body > * { transform: rotate(180deg); transform-origin: center; } html, .flip-back { filter: invert(180deg) hue-rotate(180deg); transform: scaleY(-1); } /* Flip all elements that get styled in this file * img, video, iframe, object, embed, #webpage, .container, #header, .sticker, .tab, .info-box, .product-box, .big-box, footer p, a, .left-header, .right-header, #box-body-top, .box-head, input[type="search"], .tabs, .tab, .result, .p-description, .Welcome-text, .user-box, .user-box-head, hr, .Welcome-text, .user-box, .user-box-head, hr, #Welcome-text, footer, .info-box, .product-box, .big-box, .left-header, .right-header, #box-body-top, .box-head, input[type="search"], .tabs, .tab, .result, .p-description { filter: invert(1) hue-rotate(180deg); transform: scaleY(-1); }* /* Flip the element with the class "flip-back" back to normal * .flip-back { filter: invert(-1) hue-rotate(180deg) !important; transform: scaleY(1) scaleX(-1) !important; } .header, .left-header, .right-header { filter: invert(-1) hue-rotate(0deg) !important; transform: scaleY(1) !important; } */ html, body { background-color: rgb(93, 52, 105) !important; background-image: url("/Images/Background8.png") !important; } .info-box, .product-box { background-color: rgb(153, 69, 156) !important; color: white !important; text-shadow: none; } .big-box { background-color: rgb(27, 7, 139) !important; color: rgb(12, 90, 134) !important; } .big-box p { color: rgb(231, 11, 220); } footer p { color: rgb(56, 3, 52) !important; } a { color: rgb(16, 245, 16) !important; } a:hover { color: rgb(219, 216, 9) !important; } .header { display: grid; grid-template-columns: 1fr 10fr 10fr; row-gap: 12px; column-gap: 12px; flex: 1; height: 44px; padding: 12px !important; border: 1px solid rgba(7, 114, 21, 0.548); flex: 1 !important; height: 44px !important; /*position: fixed !important;*/ z-index: 100 !important; /* From https://css.glass */ background: rgba(146, 8, 151, 0.75) !important; /*border-radius: 16px;*/ box-shadow: 0 4px 30px rgba(228, 5, 161, 0.418) !important; backdrop-filter: blur(5.2px) !important; -webkit-backdrop-filter: blur(5.2px) !important; border: 1px solid rgba(0, 182, 30, 0.548) !important; border-bottom: 2px solid rgba(179, 12, 165, 0.548) !important; backdrop-filter: blur(3.2px) !important; -webkit-backdrop-filter: blur(5.2px) !important; background: rgba(24, 194, 9, 0.253) !important; background: rgba(165, 29, 158, 0.75) !important; background-color: lightgrey !important; margin-bottom: 50px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.418) !important; /*background-image: url("https://web.archive.org/web/20110221164753im_/http://wwwimages.adobe.com/homepage/include/style/default/SiteHeader/tile.png");*/ background-repeat: repeat-x; background-size: contain; } #header { position: fixed; z-index: 1000; margin-bottom: 50px; background: none !important; right: 0; left: 0; top: 0; right: 0 !important; left: 0 !important; position: fixed; animation-name: slideDown; animation-duration: 500ms; } @supports (display: flex) { .header { display: flex !important; } } @supports (backdrop-filter: blur(1px)) { .header { background-color: rgba(156, 31, 140, 0.253) !important; background: rgba(180, 34, 173, 0.75) !important; } } .left-header { display: flex; flex: 1; /*background-color: aqua;*/ justify-content: start; } .right-header { display: flex; flex: 3; /*background-color: red;*/ justify-content: end; } /* Search.css */ #box-body-top { background-color: rgb(158, 2, 80) !important; border: rgb(155, 3, 130) 2px solid !important; border-top: none; color: rgb(7, 173, 179) !important; padding: 5px; } .box-head { background-color: rgb(208, 16, 214); } input[type="search"] { outline-color: rgba(255, 255, 255, 0); border: none; margin: 2px; border-color: aliceblue; transition: outline-color 1s, border-color 1s, box-shadow linear .2s; border-radius: 20px; padding: 5px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.712); width: 100%; } input[type="search"]:hover { border: 2px #1aa0d8 solid; outline-color: #1aa0d8; margin: 0px; } .tabs { background-color: rgb(230, 52, 191); list-style: none; padding: 2px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding-right: 0px; } .tab { background-color: rgb(253, 58, 227); color: rgba(0, 0, 0, 0.712); content: ""; padding: 20px; font-size: larger; margin-bottom: 1px; } .tab:hover { background-color: rgb(207, 58, 226); margin-bottom: 0px; margin-top: -1px; box-shadow: outset 10px -10px 50px rgb(117, 2, 117); border-top: rgb(167, 2, 153) 1px solid; border-bottom: rgb(128, 1, 122) 1px solid; } .tab.active { background-color: rgb(160, 10, 165); text-shadow: none; color: white; } .tab.first { border-top-left-radius: 10px; } .tab.last { border-bottom-left-radius: 10px; } .result { margin-top: 0px !important; } .p-description { background-color: #4201448e; border-radius: 10px; padding: 10px; max-height: 300px; overflow-y: scroll; word-break: break-all; } /**/ .box-head h1, .box-head h2, .box-head h3, .box-head h4, .box-head h5, .box-head h6, .box-head h7 { color: rgb(236, 236, 236); } .Welcome-text { color: #0ca8e68e; } .user-box { display: block; background: rgb(224, 3, 158) !important; padding: 5px; border-radius: 5px; border: 2px solid rgb(224, 38, 200) !important; border-top-left-radius: 0px; border-top-right-radius: 0px; } .user-box-head { border-radius: 7px; border: 2px solid rgb(179, 18, 157); background-color: rgb(136, 9, 119); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; padding: 2px 10px; text-shadow: none; } .user-box-head h3 { color: rgb(235, 255, 236); } hr { border-color: rgb(94, 33, 109); }