@font-face {
    font-family: "Alegreya";
    src: url("WSV-Schriften/Alegreya Sans");
    src: url("WSV-Schriften/Alegreya Sans/AlegreyaSans-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Montserrat";
    src: url("WSV-Schriften/Montserrat");
    src: url("WSV-Schriften/Montserrat/Montserrat-Medium.ttf") format("truetype");
}

body{
    background-color: #161748;
    /*Green Treeline: #478559
    Purple baseline: #161748
    Pink highlight: #f95d9b
    Blue water lowlight: #39a0ca*/
    margin: 0;
    font-family: Alegreya, Graphik-Regular-Web, sans-serif;
}
p{
    color: white;
    margin: 0 2%;
    padding-bottom: .5%;
    line-height: 1.5rem;
}
h1, h2, h3, h4, h5, h6{
    color: #39a0ca;
    margin-left: 1%;
    font-family: Montserrat, Graphik-Regular-Web, sans-serif;
}
h1{
    font-size: xxx-large;
}
header{
    font-family: Graphik-Regular-Web, sans-serif;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 75px;
     background: #39a0ca;
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
     padding: 16px 16px 0 140px;
     align-items: center;
     filter: drop-shadow(0 2px 6px transparent);
     transition: background .2s, filter .2s;
     z-index: 100;
}
header a{
    color: #161748;
}
header a:hover{
    color: #361647;
    text-decoration: none;
}
nav {
    display: block;
    unicode-bidi: isolate;
}
nav a{
    font-size: x-large;
    font-weight: 900;
    text-decoration: none;
    display: block;
    padding: 8px;
    position: relative;
}
.main_nav{
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 8px;
}
aside{
    display: flex;
    gap: 16px;
    align-items: center;
    unicode-bidi: isolate;
}
aside ul{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
aside li{
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}
aside a{
    display: block;
    padding: 8px;
    transition: .15s color;
    color: black;
}
.manage2sail:hover{
    color: #5865f2;
}
.youtube:hover{
    color: #ff0000;
}
.facebook:hover{
    color: #3b5998;
}
.instagram:hover{
    color: #e56969;
}
aside svg{
    width: 24px;
    height: 24px;/*
    fill: none;/*
    stroke: none;*/
}
main{
    margin-top: 75px;
}
main a{
    color: #f95d9b;
}
main a:hover{
    color: #FA665C;
    text-decoration: underline;
}

div.textBody{
    margin: 0 clamp(0%, 20% - 200px, 30%);
}
div.container {
    display: flex;
}
div{
    box-sizing: border-box;
}
div.header{
    display: flex;
    justify-content: center;
    align-items: center;
}
.center{
    display: flex;
    justify-content: center;
}
img.center{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.scaling_image{
    max-width: 100%;
    height: auto;
}
.socials{
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

nav.navigation{
    display: flex;
    margin: 2%;
    justify-content: center;
}
nav.navigation a{
    margin-left: 1%;
    margin-right: 1%;
}
div.logo{
    position: absolute;
    top: 7px;
    left: 20px;
}
div.logo img{
    width: 100px;
}
div.banner{
    margin-bottom: 20px;
}
div.banner img{
    width: 100%;
}
div.title{
    display: flex;
    justify-content: center;
    margin: 1% 0 3%;
}

/*source: https://www.w3schools.com/howto/howto_css_timeline.asp*/
div.Veranstaltungskalender{
    position: relative;
    width: 95%;
    min-width: 600px;
    /*max-width: 1200px;*/
    margin: 0 auto;
}
div.Veranstaltungskalender p{
    color: white;
    margin: 0;
}
div.Veranstaltungskalender h3{
    color: black;
    margin: 0;
}
div.Veranstaltungskalender::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #39a0ca;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
.VAcontainer {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
.VAcontainer::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #e3000f;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
.VAleft {
    padding-left: 0;
    left: 0;
}
.VAright {
    padding-right: 0;
    left: 50%;
}
.VAleft::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid #39a0ca;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #39a0ca;
}
.VAright::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid #39a0ca;
    border-width: 10px 10px 10px 0;
    border-color: transparent #39a0ca transparent transparent;
}
.VAright::after {
    left: -16px;
}
.VAcontent {
    padding: 20px 30px;
    background-color: #39a0ca;
    position: relative;
    border-radius: 6px;
}

footer{
    padding: 20px 0;
    background-color:black;
    color:#4b4c4d;
    font-family: Alegreya, Graphik-Regular-Web, sans-serif;
}
footer ul {
    padding:0;
    list-style:none;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    margin-bottom:0;
}
footer li {
    padding:0 10px;
}
footer ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
}
footer ul a:hover {
    opacity:1;
}
footer .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:#aaa;
    margin-bottom:0;
}
.list-inline {
    padding-left: 0;
    list-style: none;
}
.list-inline-item {
    display: inline-block;
}
.list-inline-item:not(:last-child) {
    margin-right: 0.5rem;
}