:root {
  --almost-white: #fff8fe;
  --very-light:   #ffd2ff;
  --light:        #fdb1fa;
  --medium-light: #dc97dd;
  --medium-dark:  #ae8ac3;
  --dark:	      #867ba9;
  --very-dark:    #6b6d8b;
}

body {
    font-family: Poppins, Arial, sans-serif;
    background: url(/content/resources/background.jpg);
    font-size: 20px;
}

div.page {
    box-sizing: border-box;
    width: min(1100px, 100%);
    margin-left: auto;
    margin-right: auto;
    container: page / inline-size;
    background: white;
}

div.header {
    display: grid;
    width: 100%;
}

div.content, div.footer {
    padding: 5px;
}

@media (orientation: landscape) {

div.header {
    grid-template-rows: 50px 1fr;
    grid-template-columns: 40cqw 1fr 50px;
    grid-template-areas:
        "symbol x menu"
        "symbol subtitle subtitle";
}

#subtitle {
    grid-area: subtitle;
    background: right bottom no-repeat url('/content/resources/desolate.jpg');
    color: var(--almost-white);
    padding: 20px;
    display: flex;
    align-items: flex-end;
}

}       /* End orientation: landscape */

@media (orientation: portrait) {

div.header {
    grid-template-rows: 50px auto 1fr;
    grid-template-columns: auto 1fr;
    grid-template-areas: "symbol menu"
                         "symbol bkgnd"
                         "subtitle subtitle";
}

#bkgnd {
    background-image: url('/content/resources/desolate.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#bkgnd > img {
    object-fit: cover;
}

#subtitle {
    grid-area: subtitle;
    color: black */var(--dark)*/;
    background-color: var(--light);
    padding: 20px;
}

}       /* End orientation: portrait */

#subtitle {
    font-family: Quintessential, Garamond, serif;
    font-size: 4cqw;
    font-weight: 500;
    line-height: 100%;
}

#symbol {
    grid-area: symbol;
}

#symbol > img {
    width: 40cqw;
}

#menu-button {
    width: 40px;
    height: 40px;
    background: url('/content/resources/menu-icon.png') no-repeat center;
    background-size: contain;
    margin-right: 5px;
    margin-left: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.main-menu {
    position: absolute;
    left: calc(40px - 30cqw);
    width: 30cqw;
    z-index: 2;
    background-color: white;
    border: 4px solid var(--very-dark);
    color: var(--very-dark);
    font-size: 2cqw;
    font-weight: 600;
    padding: 4px;
}

div.menu-item {
    padding-left: 1cqw;
    height: 3cqw;
    padding-top: .5cqw;
    border-radius: 8px;
}

div.menu-item:hover {
    background-color: var(--dark);
    color: var(--almost-white);
    cursor: pointer;
    background: linear-gradient(darkgray 0%, gray 25%, black 50%);
    background-size: 3cqw;
}

div.menu-item:hover::before {
    content: "\2764";
    margin-right: 5px;
}

div.headline {
    border-top: 3px solid var(--medium-light);
    border-bottom: 3px solid var(--medium-light);
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
}

div.headline > h1 {
    font-size: max(2.5cqw, 20px);
    margin-bottom: 3px;
}

div.headline > h2 {
    font-size: max(1.5cqw, 14px);
    font-weight: bold;
    margin: 0;
}

div.headline > p {
    font-size: max(2cqw, 16px);
}

div.content h1 {
    color: var(--dark);
}

div.content h1.title {
    color: var(--dark);
    text-align: center;
    font-size: 50px;
    font-weight: 300;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-gap: 20px;
    align-items: center;
}

div.content h2.title {
    color: var(--very-dark);
    text-align: center;
    font-size:40px;
    font-weight: 300;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: max-content;
    align-items: center;
}

div.content h3.title {
    color: var(--very-dark);
    text-align: center;
    font-size:30px;
    font-weight: 300;
    letter-spacing: 1px;
    display: grid;
    align-items: center;
}

div.content h1.title::before, div.content h1.title::after {
    content: " ";
    display: block;
    border-bottom: 1px solid var(--very-dark);
    border-top: 1px solid var(--very-dark);
    height: 5px;
}

div.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    justify-content: center;
    align-items: center;
    background-color: var(--almost-white);
    box-shadow: 5px 5px 10px black;
    min-width: 33cqw;
    z-index: 1;
}

div.grid {
    display: grid;
}

div.modal > div:first-child {
    height: 45px;
}

div.modal > *:first-child {
    background-image: linear-gradient(black, var(--very-dark));
    color: var(--light);
    text-align: center;
}

div.modal > *:first-child > button.close {
    background-image: url('/content/resources/close-button.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 10px;
    left: calc(100% - 40px);
}

div.modal > div:nth-child(2) {
    border: 5px solid var(--very-dark);
}

div.modal h1 {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 0;
}

div.modal button.close {
    cursor: pointer;
}

div.modal form {
    margin: 15px;
}

div.action {
    margin-top: 20px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    grid-template-rows: 1fr;
}

form button, form input[type=submit], div.see-more button {
/*    min-width: max(15cqw, 150px);*/
    padding-left: 15px;
    padding-right: 15px;
/*    height: max(4.3cqw, 40px);*/
    height: 36px;
    width: 140px;
    position: relative;
    border-radius: 16px;
    border: 4px transparent;
    background-image: url('/content/resources/gradient-button.png');
/*    background-image:*/
    background-size: contain, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
/*    font-size: max(1.8cqw, 18px);*/
    font-size: 18px;
    font-weight: 600;
    color: var(--almost-white);
    cursor: pointer;
    margin-right: 15px;
    background-clip: padding-box;
}

form button[disabled]{
    background-image: none;
    background-color: silver;
    cursor: default;
}

.spaced-above {
    margin-top: 10px !important;
}

img.status-marker {
    margin-left: 20px;
}

@keyframes continuous-rotation {
	from {
		transform: rotate(0deg);
	}
	to {
    transform: rotate(359deg);
	}
}

img.spin {
  	animation: continuous-rotation 1s linear infinite;
}

form input, form p, form select, form textarea {
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}

form p.input-details {
    margin-top: 0;
    font-size: 85%;
}

form input:has(+ p.input-details), form input:has(+ * + p.input-details){
    margin-bottom: 2px;
}

.alert {
    font-weight: bold;
    color: red;
}

#oops-text {
    padding: 10px;
}

div.split {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 315px;
}

@media (max-width: 1000px) {
div.split {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    grid-template-columns: none;
    grid-template-rows: auto auto;
}
}

div.body-text {
    margin-top: 15px;
}

article {
    padding-bottom: 30px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--dark);
}

div.tagline {
    border-top: 1px solid var(--dark);
    border-bottom: 1px solid var(--dark);
    font-size: 110%;
    font-weight: 500;
    font-style: italic;
    color: var(--dark);
    margin-top: 5px;
}

div.faded {
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    max-height: 500px;
}

div.see-more {
    text-align: center;
    position: relative;
    top: -30px;
}

div.sub-block {
    font-size: 90%;
    font-weight: bold;
    color: var(--dark);
    border: 4px solid var(--very-dark);
    border-radius: 10px;
    padding-bottom: 8px;
    margin-bottom: 15px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    box-sizing: border-box;
}

div.sub-block form {
    padding-left: 5px;
    padding-right: 5px;
}

div.sub-block form p {
    font-size: 110%;
    font-weight: 400;
    color: black;
}

div.sub-block.padded *:not(h1) {
    margin: 0 5px 2px 5px;
}

div.sub-block input {
    font-size: 110%;
}

div.victim-header {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-areas:
        "a a"
        "b c";
    margin-top: 1cqw;
    gap: 5px;
}

div.victim-header > div:first-child {
    grid-area: a;
    display: grid;
    grid-template-columns: 325px 325px 1fr;
    grid-gap: 20px;
}

div.victim-header > div:first-child > div {
    margin-left: 0;
    margin-right: 0;
}

div.victim-header > div:first-child img {
    width: 150px;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
}

div.victim-header > div:nth-child(2) {
    width: 250px;
    grid-area: b;
}

div.victim-header > div:nth-child(2) > img {
    width: 250px;
}

div.victim-header > div:nth-child(3) {
    grid-area: c;
    padding-left: 2cqw;
    padding-right: 2cqw;
}

div.victim-header p > span {
    font-size: 105%;
    font-weight: 700;
    color: car(--dark);
}

div.victim-header p {
    font-size: 120%;
    font-weight: 500;
    color: var(--very-dark);
    margin-right: 6px;
    margin: 2px 5px 2px 5px;
    text-wrap: nowrap;
}

div.references ul {
    list-style-type: circle;
    list-style-position: outside;
}

div.sub-block h1 {
    font-size: 130%;
    font-weight: 500;
    color: var(--almost-white);
    background-color: var(--very-dark);
    padding: 3px;
    margin-top: 0;
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-top: 3px;
    text-align: center;
    border-radius: 5px 5px 0 0;
}

div.news-item {
    padding-left: 1cqw;
    padding-top: .5cqw;
    border-radius: 8px;
    margin: 1px 5px 1px 5px;
}

div.news-item:hover {
    background-color: var(--dark);
    color: var(--almost-white);
    cursor: pointer;
}

div.news-item > p {
    margin-top: 1px;
    margin-bottom: 1px;
}

div.sidebar {
    background-color: var(--almost-white);
    padding: 10px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 80%;
    margin-bottom: 10px;
}

div.sidebar > h1 {
    font-size: 130%;
    margin: -10px -10px 10px -10px;
    border-radius: 5px 5px 0px 0px;
    width: auto;
    background-color: var(--medium-dark);
    color: white;
    padding: 6px;
}

div.sidebar ul {
    padding-left: 10px;
}

div#gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    max-height: 750px;
    overflow: auto;
}

div#gallery img {
    max-width: 100px;
    max-height: 100px;
    position: relative;
    top: -2px;
    left: -2px;
    box-shadow: 4px 4px 4px #666666;
    cursor: pointer;
}

div.image-gallery button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

div.post-title {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 50px 1fr min-content;
    min-height: 50px;
    grid-column-gap: 0px;
}

div.post-title > div:nth-child(1) {
    padding: 2px;
    background-color: var(--light);
    background-size: cover;
    width: 50px;
    text-align: center;
}

div.post-title > div:nth-child(2) {
    margin: 0;
    padding-left: 10px;
}

div.post-title h2 {
    margin-top: 0;
    color: var(--medium-dark);
    font-style: italic;
    font-size: 2.5cqw;
}

p.date-year {
    padding: 0;
    margin: 0;
    font-size: 75%;
    font-weight: 600;
}

p.date-month {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0;
    font-variant: small-caps;
    font-size: 90%;
    font-weight: 800;
}

p.date-dom {
    padding: 0;
    margin-top: 0px;
    font-size: 180%;
    color: #BB00BB;
    font-weight: 500;
    line-height: 95%;
}

p.author {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 1.5cqw;
}

div.control-bar button {
    width: 46px;
    height: 46px;
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
}

div.control-bar button.approve[data-approved='on'] {
    background-image: url(/content/resources/green-check.png);
}

div.control-bar button.approve[data-approved='off'] {
    background-image: url(/content/resources/red-x.png);
}

div.control-bar button.edit {
    background-image: url(/content/resources/icon-edit.png);
}

div.control-bar button.copy-link {
    background-image: url(/content/resources/copy-link.png);
}

form .validate-indicator {
    display: inline-block;
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    margin: 0 -4px 0 5px;
    background-image: url(/content/resources/green-check.png);
    border: 0px;
}

form .validate-indicator:not([data-isok=true]) {
    background-image: url(/content/resources/red-x.png);
}