:root {
    --basic-color-bg:rgb(225, 232, 246);
    --basic-color-font:rgb(27, 29, 32);
    --basic-color-hover: #202f44;
    --basic-color-alter:#aab0b8;
    --color-nav-bg:#1b1d20;
    --color-nav-font:#e1e8f6;
    --bg-alter-bright-rgba:rgba(225, 232, 246, 0.9);
    --bg-alter-dark-rgba:rgba(146, 151, 158, 0.9);
}
@font-face
{
    font-family: "Caladea"; 
    src: local("Caladea"),
    url("Caladea-Regular.ttf"),
    format("TrueType");
}
* {
    box-sizing: border-box;
    padding:0;
    margin:0;
}

html {
    height:100%
}

body {
    font-family: 'Caladea',Verdana;
    font-size: 20px;
    background-color: var(--basic-color-bg);
    color: var(--basic-color-font);

    display:flex;
    flex-direction: column;

    width:100%;
    min-width: 340px;
    height:100%;
}

div#background-image {
    position:fixed;
    z-index:-1;
    width:100%;
    height:100%;
    display:flex;
    background: url(../assets/background-xs.jpg) no-repeat center;
    background-size: cover;
    background-position-y: 0px;
}
.bg-alter-bright {
    background-color: var(--bg-alter-bright-rgba);
}
.bg-alter-dark {
    background-color: var(--bg-alter-dark-rgba);
}
div#background-image.withcontent {
    opacity: 0.4;
}
@media only screen and (min-width:768px) {
    div#background-image {
        background: url(../assets/background-m.jpg) no-repeat center;
        background-size: cover;
        background-position-y: 0px;
    }
}
@media only screen and (min-width:1024px) {
    div#background-image {
        background: url(../assets/background-xxl.jpg) no-repeat center;
        background-size: cover;
        background-position-y: 0px;
    }
}
header {
    height:80%;
    display:flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
}
header span#title-text {
    margin-top:100px;
    min-width:320px;
    max-width: 800px;
}
header span#title-text img {
    width: 100%;
}
div#title-shortcuts {
    color:var(--color-nav-bg);
    background-color: rgba(255, 255, 255, 0.2);
    margin-top: auto;
    width:100%;
    min-height:3em;
    padding: 10px 10px;
}
@media only screen and (min-width:768px) {
    div#title-shortcuts {
        color:var(--color-nav-font); 
        background-color: rgba(0, 0, 0, 0.2);
    }
}
@media only screen and (min-width:1024px) {
    div#title-shortcuts {
        color:var(--color-nav-font); 
        background-color: rgba(0, 0, 0, 0.5);
    }
}
div#topnav-placeholder {
    display:flex;
    flex-shrink: 0;
    background-color: var(--bg-alter-bright-rgba);
    height:3.8em;
}
ul#shortcut-list {
    width:100%;
    list-style: none;
    display:flex;
    flex-direction: row wrap;
    justify-content: flex-end;
}
ul#shortcut-list li {
    padding: 0 5px;
}

 

.concenter {
    max-width:1024px;
    margin:auto;
}
episodes {
    padding:20px;
    padding-top:2em;
}

/* Contact us & Formular part */
contactus {
    padding:20px;
    padding-top:2em;
}
#contact div p.txt {
    padding:20px;
}
form {
    border: 2px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  input[type="text"], textarea {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 16px;
  }
  textarea {
    height: 5em;
  }
  
  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.2em;
  }
  
  input[type="submit"]:hover {
    background-color: #3e8e41;
  }


aboutus {
    padding:20px;
    padding-top:2em;

}
donateus {
    padding:20px;
    padding-top:2em;
    display:flex;

}

footer {
    background-color: var(--basic-color-font);
    color: var(--basic-color-bg);
    font-size:0.8em;
    padding:10px;
    padding-top:2em;
}

.ico {
    height:1.2em;
}
.ico-shortcut {
    height:2em;

}
@media only screen and (max-width:690px) {
    .ico-shortcut { 
        width: 2em; 
        height:2em; 
        object-fit: cover;
        object-position: 0%
    }
}
span.donate-paypal {
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:30px;
	border:2px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:1.0em;
	font-weight:bold;
	padding: 0.8em 0.8em;
	text-decoration:none;
    margin: auto;
}
#donate div p.txt {
    padding:20px;
}

.linklist-darkbg {
    list-style: none;
    padding:5px;
}
.linklist-darkbg li a, .linklist-darkbg li a:active, .linklist-darkbg li a:visited {
    color:var(--basic-color-bg);
}
.linklist-darkbg li a:hover {
    color:var(--basic-color-bg);
    background-color: var(--basic-color-hover);
}
#pagetree {
    margin-top:1em;
    display:flex;
    flex-direction: column;
    justify-content:right;
    flex-shrink: 0;
    align-items: center;
    padding: auto;
}
#pagetree ul {
    display:flex;
}
#pagetree ul li {
    margin:5px;
}
footer .creds {
    margin:2em 1em;
}
div.notice-ready {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border:2px solid #285a2a;
    border-radius: 15px;
    font-size: 1.2em;
    max-width: 600px;
}
div.notice-error {
    background-color: #af4c4c;
    color: white;
    padding: 10px 20px;
    border:2px solid #692e2e;
    border-radius: 15px;
    font-size: 1.2em;
    max-width: 600px;
}

.anker-div {
    width:100%;
    min-height:2em;
}

.hidden-side-div {
    z-index:900;
    overflow: auto;
    display:none;
    position: fixed;
    top:0;
    right:0;
    height: 100%;
    padding:10px;
    background-color: rgb(225, 232, 246);
    color:  rgb(27, 29, 32);
    box-shadow: inset 10px 0px 10px -5px rgba(0,0,0,0.95);
}
@media only screen and (max-width:1023px) {
    .hidden-side-div {
        width:95%;
    }
}
@media only screen and (min-width:1024px) {
    .hidden-side-div {
        width:95%;
        max-width:1075px;
    }
}
.hidden-close-button {
    margin:5px;
    border:3px solid rgb(27, 29, 32);
    border-radius: 10px;
    width: var(--btn-size);
    height: var(--btn-size);
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.hidden-close-button:hover {
    opacity: 1;
}