html {
    min-height: 100vh;
    background-image: url("/images/Hintergrund/Hafen.png");
    background-position: center;
    background-size: cover;
    background-color: #8bb0ff;
    padding: 0;
}

body {
    margin: 0;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    position: relative;
}

.header {
    margin: 0;
    padding: 0.5em;
    padding-bottom: 0.4em;
    color: white;
    background-color: hsl(0, 0%, 12%);
}

.heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   }

.heading_logo {
    margin-right: 0.5em;
}

.tabs_bar {
 display: flex;
 flex-direction: column;
 align-items: center;
}


.tab_view {
    display: flex;
    flex-direction: row;
}

.tab {
    padding: 0.1em;
    padding-inline: 1em;
    margin: 0.1em;
    margin-bottom: 0;
    background-color: #2d2d2d;
    border-radius: 0.5em;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: center;
}

.tab:hover {
    background-color: hsl(0, 0%, 24%);
}

.tab_selected {
    background-color: hsl(0, 0%, 24%);
    margin-bottom: -0.4em;
    padding-bottom: 0.4em;
    border-radius: 0.5em 0.5em 0 0;
}

.tab_selected:hover {
    background-color: hsl(0, 0%, 30%);
}

.hidden {
    display:none !important;
}

.tab > * {
    margin: 0.4em;
}

.tab_logo {
    height: 2em;
    margin: 0;
}

.map_frame {
    background-color: white;
    border: 0px solid transparent;
    width: 100%;
    height: 100%;
    
}

.panel {
    margin-top: 5%;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.panel > div {
    backdrop-filter: blur(10px);
    padding: 2em;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a {
    color:white;
}

.discord_link {
    margin-bottom: 1em;
    color: #5865f2;
}

.map_frame_border {
    border: 35px solid #d6be96;
    width: 75%;
    height: 65%;
    justify-self: center;
    margin-inline: auto;

    border-image-source: url("/images/Hintergrund/map_background.png");
    border-image-slice: 4;
    border-image-repeat: round;
    border-image-width: 35px;
    image-rendering: crisp-edges;

    margin-top: 5%;
}

.image_carousel {
    
    align-content: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    padding-top: 2em;
}

.image_carousel_content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

.image_carousel::before {
    content:'';
    position: absolute;
    top: 2em;
    left: 0;
    right:0;
    height: calc(100% - 2em);
    z-index: -1000;
    background-color: black;
    overflow: auto;
}

.image_carousel:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2em;
    background-color: transparent;
    background-image: url("/images/Hintergrund/film.png");
    background-position: center;
    background-size: contain;
    background-repeat: repeat-x;
    
}

.image_carousel_content > img {
    margin: 1em;
    max-height: 25em;
}


.image_carousel_content > img:hover {
    transform: scale(1.1);
}

.hero_image_list {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.hero_image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
    color: white;
    margin: 1em;
    padding: 0.5em;
    padding-inline: 1.4em;
    flex-direction: row;
    backdrop-filter: blur(10px);
    background-color: #00000050;

    border-radius: 2em;
}

.hero_image:nth-child(even) {
  direction: rtl;
}

.hero_image > h3 {
    font-size: xx-large;
    margin: 0;
    margin-inline-end: 2em;
    justify-self: center;
    text-align: center;
}

.hero_image > img {
    border-radius: 1em;
    max-height: 25em;
}

.hero_image > img:hover {
    transform: scale(1.1);
}


.description {
    font-size: 2em;
    margin: 1em;
}

button {
    margin: 0.5em;
    background-color: hsl(0, 0%, 24%);
    color: white;
    border: 0px;
    border-radius: 0.5em;
    padding: 0.5em;
    padding-inline: 1em;
    transition: background-color 0.15s, box-shadow 0.15s;
}

button:hover {
    background-color: hsl(0, 0%, 30%);
    box-shadow: 5px, 5px, 10px, rgba(0, 0, 0, 0.15);
}

button:active {
    opacity: 0.6;
}

.image_viewer {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #00000030;
    backdrop-filter: blur(10px);
    display: flex;
}

.image_viewer_image {
    display: block;
    object-fit: contain;
    max-height:80%;
    max-width:80%;
    width: auto;
    height: auto;
    margin: auto;
}

.scroll_left {
    position: absolute;
    left: 0;
    top: 30%;
    height: 40%;    
}

.scroll_right {
    position: absolute;
    right: 0;
    top: 30%;
    height: 40%;    
}

.scroll_left, .scroll_right {
    opacity: 0.4;
}

.scroll_left:hover, .scroll_right:hover {
    opacity: 0.9;
}