@font-face { font-family: "Trebuchet MS"; src: url(trebuchet.ttf); font-display: swap; } @font-face { font-family: "Tahoma"; src: url(tahoma.ttf); font-display: swap; } .container { display: flex; min-height: 95vh; margin: 0; flex-direction: column; background: #0157e8; border-top-left-radius: 8px; border-top-right-radius: 8px; background-image: linear-gradient(to bottom, #2b90ff, #004de3 8.5%); } body { margin: 1em; background: url(bliss.jpg); background-repeat: no-repeat; background-size: cover; } .header { padding: 0; margin: 0; margin-top: 5px; margin-left: 8px; margin-right: 3px; color: #fff; } .header h1 { font-family: "Trebuchet MS"; float: left; display: inline; margin: 0; margin-left: 0.15em; margin-top: 0.2em; } .header .header-button { background: #025af0; display: inline; float: right; margin: 0; padding: 2px; width: 2em; margin-right: 0.2em; border: 2px solid white; text-align: center; border-radius: 3px; background-image: linear-gradient(160deg, #90aff9, #025af0 70%); } .header .header-button #minimise { transform: translateY(0.5em); } .header .header-button #maximise { transform: translateY(0.2em); } .header .header-button #close { transform: translateY(0.1em); } .header .header-button p { font-family: "Trebuchet MS"; margin: 0; font-size: 140%; } .header .header-button img { margin: 0; min-height: 100%; align: center; min-width: 100%; } #red { background: #e03802; background-image: linear-gradient(160deg, #f1ac9a, #e03802 70%); } .formarea { display: flex; flex-direction: column; flex: 1; background: #fff; padding-top: 0; margin: 0.2em; } .content { padding-left: 0.5em; padding-right: 0.5em; margin: 0; font-family: "Tahoma"; } .ribbon { padding-top: 3px; padding-bottom: 3px; font-size: 110%; font-family: "Tahoma"; min-width: 1%; max-height: 3.2em; background: #ece9d8; border: 1px solid #fff; border-right: 1px solid #aca899; border-bottom: 2px solid #aca899; } .ribbon .link { display: inline; margin: 0; } .ribbon .bar { color: #aca899; display: inline; margin: 0; } .ribbon #first { padding-left: 0.5em; }