*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}


img {
    max-width: 100%;
    align-self: center;
    border-radius: var(--src-border-r);
   
}

video {
    max-width: 100%;
    align-self: center;
    border-radius: var(--src-border-r);
    
}

.media {
    position: relative;
    transform-style: preserve-3d;
    border-radius: 15px;
  }




:root {
    --src-border-r: 15px;
	--text: hsl(242, 37%, 83%);
    --background-02: linear-gradient(to right, hsl(209, 25%, 34%) 0%, hsl(243, 39%, 37%) 50%, hsl(273, 34%, 34%) 100%);
    --background: linear-gradient(to right, hsl(207, 100%, 24%) 0%, hsl(244, 46%, 39%) 50%, hsl(271, 40%, 31%) 100%);
    --primary: hsl(243, 27%, 66%);
    --secondary: hsl(239, 49%, 62%);
    --accent: hsl(200, 85%, 49%);
    --ff-base: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    --ff-accent: Arial, Helvetica, sans-serif;

    --max-width: 1000px;

    --reduced-max-width: 1500px;
    
    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
    --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
    --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
    --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);

    --text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    --box-shadow: var(--text-shadow);
    /*#514b88,#5a5498,#9492c1,#c5c4e4,#7071ce
      #141c26,#2e4259,#48688c,#638ebf,#7db4f2
    
    */
}   

body {
    --mask:
      radial-gradient(87.37px at 50% calc(100% + 72.00px),hsla(0, 0%, 0%, 0) calc(99% - 10px),hsla(0, 0%, 0%, 0.11) calc(101% - 10px) 99%,hsla(0, 0%, 0%, 0) 101%) calc(50% - 80px) calc(50% - 25px + .5px)/160px 50px ,
      radial-gradient(87.37px at 50% -72px,hsla(0, 0%, 0%, 0) calc(99% - 10px),hsla(0, 0%, 0%, 0.11) calc(101% - 10px) 99%,hsla(0, 100%, 50%, 0) 101%) 50% calc(50% + 25px)/160px 50px ;
    font-family: var(--ff-accent);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text);
    text-shadow: var(--text-shadow);
    background: var(--mask), var(--background);
    margin: 0;
    padding: 0;
    display: grid;
    
}

.wrapper {
    width: min(100% - 1.5rem, var(--max-width));
    margin-inline: auto;
    display: block;
    z-index: 1;

}

.header-box {
    gap: 1rem;
    padding: 2rem;
    padding-bottom: 40px;
}



.footer-box {
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4px, 2fr));
    gap: 1rem;
    padding: 2rem;
    width: 100%;

}


.footer {
    position: sticky;
    z-index: -1;
}

a:link {
    color: var(--text);
    background-color: transparent;
    text-decoration: none;
}

a:visited  {
    color: var(--text);
    background-color: transparent;
    text-decoration: none;
}

a:active a:hover {
    color: var(--text);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: var(--text);
    background-color: transparent;
    text-decoration: none;
}

a {
    color: var(--text);
    background-color: transparent;
    text-decoration: none;
}

.header {
    font-size: var(--step-5);
    font-family: var(--ff-accent);
    color: var(--accent);
    
}


  
  

.subtitle {
    font-size: var(--step-0);
    
    color: var(--text);
    text-align: right;
}


.werte-header {
    font-size: var(--step-4);
    font-family: var(--ff-accent);
    text-align: center;
    line-height: 2em;
    
}

.werte {
    margin: 0;
    text-align: center;
    line-height: 1em;
   
    
}

.werte-double-box {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(2, 1fr);

    padding-block: 2rem;
  
    margin-inline: auto;
    background-color: hsla(0, 0%, 0%, 0.288);
    backdrop-filter: blur(5px);
    border-radius: var(--src-border-r);
    text-align: center;
    line-height: 1em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
}

.werte-box {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(1, 1fr);
    padding-block: 2rem;
    
    background-color: hsla(0, 0%, 0%, 0.288);
    backdrop-filter: blur(5px);
    border-radius: var(--src-border-r);
    text-align: center;
    line-height: 1em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding: 3.5rem;
    
}

.werte-card-info {
    grid-column: span 2;
    /*background: radial-gradient(circle, rgba(255,253,251,1) 40%, rgba(231,231,231,1) 100%);*/
    background:#202344a8;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    /*margin: 0.5em;
    padding: 5px;*/
    line-height: 1.5em;
    color: rgb(255, 255, 255);
    outline-color: #191c34;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #000000;
    width: 100%;
    height: 200px;
    justify-self: center;
    transition: height 0.3s ease, transform 0.3s;
    text-shadow: 0 0 7.5px rgba(0, 0, 0, .3);
    position: relative;
    perspective: 1000px;
    
    
}



.werte-card {
    background:#202344a8;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    /*padding: 5px;
    margin: 0.5em;*/
    line-height: 1.5em;
    color: rgb(255, 255, 255);
    outline-color: #191c34;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #000;
    width: 100%;
    height: 200px;
    justify-self: center;
    transition: transform 0.3s;
    text-shadow: 0 0 7.5px rgba(0, 0, 0, .3);
}

.werte-card-admin {
    height: fit-content;
}

.werte-card-download {
    height: fit-content;
    color: rgb(255, 255, 255);
}

.werte-card-download a{
    color: rgb(255, 255, 255);
}


.werte-card:hover {
    transform: scale(1.02);
}


.werte-card-info:hover {
    transform: scale(1.02);
}

.werte-card-emoji {
    font-size: var(--step-5);
    line-height: 2rem;

    
}

.werte-card-header {
    font-size: var(--step-4);
    font-weight: bolder;
}


.media-header {
    text-align: center;
    font-size: var(--step-4);
    margin-top: 5rem;

}

.media {
    margin-top: 2.5em;
    margin-bottom: 0.5em;
    text-align: right;
    

}

.wavys {
    background-color:hsl(258, 35%, 22%);
    --mask:
      radial-gradient(87.37px at 50% calc(100% + 72.00px),#0000 calc(99% - 10px),#000 calc(101% - 10px) 99%,#0000 101%) calc(50% - 80px) calc(50% - 25px + .5px)/160px 50px ,
      radial-gradient(87.37px at 50% -72px,#0000 calc(99% - 10px),#000 calc(101% - 10px) 99%,#0000 101%) 50% calc(50% + 25px)/160px 50px ;
    -webkit-mask: var(--masks);
            mask: var(--masks);
    background: linear-gradient(to right, #004279 0%, #3c3691 50%, #513070 100%);
  }


img {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}



iframe {
    transition: transform 0.3s;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: none;
    border-style: None;
    margin: 0;
    padding: 0;
    visibility: visible;
}



.iframe {
    background: radial-gradient(circle, rgba(27,27,27,0.60) 0%, rgba(0,0,0,0.60) 100%);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    aspect-ratio: 16/9;
    visibility: visible;
    backdrop-filter: blur(5px); 
    width: 100%;
    text-shadow: none; /* BRO */
}


.graph-1 {
    background-image: url("media/graph/graph.png");
}

.graph-2 {
    background-image: url("media/graph/graph2.png");
}

video {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
    
}



.video-backgroud {
    background-image: url("media/photo/photo.jpeg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 94%;
    aspect-ratio: 16/10;
}

.aufrufzahlen {
    justify-content: right;
    justify-self: right;
}

#banner {
    display: none;
    position: fixed;
    background-color: #ffffff17;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    z-index: 1000;
    transition: transform 0.3s;
    outline-color: #fff;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #fff;
    color: rgb(255, 255, 255);
    font-size: var(--step-2);
    text-shadow: 0 0px 2px rgb(255, 255, 255);
    margin: auto;
    backdrop-filter: blur(5px);
  }

  #reloadButton,
  #closeButton {
    background-color: white;

    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
    border-radius: 5px; /* Make the buttons round */
    outline-color: #000;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #000;
    transition: background-color 100ms ease;
    font-size: var(--step--1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
    position: relative;
  }

#reloadButton {
    color: #f44336;
    
}

#closeButton {
    color: #696969;
}

#reloadBannerGrid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    align-content: center;
}

#banner:hover {
    border-width: 5px;
}
#reloadButton:hover, 
#closeButton:hover {
    background-color: rgb(220, 219, 219)
}

.info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }

 .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
  }
  .werte-card-info.flipped .card-inner {
    transform: rotateX(180deg);
  }
.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

  .card-back {
    background: radial-gradient(circle, rgba(255,253,251,1) 40%, rgba(231,231,231,1) 100%);
    color: #ffffff;
    outline-color: #191c34;
    background:#202344a8;
    transform: rotateX(180deg);
  }
  .info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }
  .back-button-alpha {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #3498db;
    color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
.bold {
    font-weight: bolder;
}


.feedback-input-st {
    border-radius: 5px;
    border: 0px;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background: #181b34;
    text-align: center;
    outline-color: #191c34;
    border-color:#191c34;
    color: White;
;
    border-radius: 15px;

}

.feedback-input {
    width: 100%;
    height: 250px;
    resize: none;
    box-sizing: border-box;
    font-size: var(--step-0);
    font-family: var(--ff-base);
}

.feedback-card {
    display: grid;
    background:#202344a8;
    backdrop-filter: blur(5px);
    border-radius: var(--src-border-r);
    text-align: center;
    line-height: 1em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding: 1.5em;
    color: #ffffff;
}

.email-input {
    text-align: center;
}

.response {
    padding: 5px;
    padding-top: 15px;
    margin-top: 15px;
}


/* Everything but the first child*/




.navbar {
    display: flex;
    justify-content: space-between;
    /*background-color: rgba(255, 255, 255, 0.01); */
    /* backdrop-filter: */
    align-items: center; /* Adjusted alignment */
    color: #FFF;
    padding: .125rem; /* Adjusted padding-top */
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 10rem;
    border-radius: 15px;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);*/
}


.navbar-links {
    margin: 0;
    padding: 0;
    display: flex;
    
}

.navbar-links li {
    list-style: none;
   
}

.navbar-spacor {
    display: grid;
    grid-auto-flow: column;
    width: 100%;
}

.navbar-links li a {
    background: #202344b8;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--ff-accent);
    font-size: var(--step-1);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding: .5rem;
    margin: .75rem;
    display: block;
    border-radius: 7px;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
    transition: transform 0.3s;
    backdrop-filter: blur(5px);
    outline-color: #191c34;
    border-color: #191c34;
}


.navbar-links-li {

    border-radius: 7px;
}


.navbar-links-li a:hover {
    transform: scale(1.05);
}

.hamburger-button {
    position: absolute;
    top: 3.25rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}
.hamburger-button .bar {
    height: 3px;
    width: 100%;
    background-color: #3498db;
    border-radius: 5px;
}

@media (max-width: 782px) {

    .navbar-spacor {
        grid-auto-flow: row;
        align-items: center;   
    }

    .navbar-links {
        width: 100%;
    }
}

@media (max-width: 1190px) {
    .hamburger-button {
        display: flex
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
        flex-direction: column;
    }

}


/* Markdown styling */

.markdown-container {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 3.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 15rem;
}

.markdown-h1 {
    font-size: var(--step-2);
    
}

.markdown-h1:not(:first-child) {
    margin-top: 2.5rem;
}

.markdown-h2:not(:first-child) {
    margin-top: 2.25rem;
}

.markdown-h:not(:first-child) {
    margin-top: 2rem;
}

.markdown-li a {
    color: #6f26b4;
}

.markdown-li a:hover {
    color: #233dd8
}

pre {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 7px;
    padding: .75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.markdown-hr {
    margin-bottom: 1rem;
}


blockquote {
    border-left: hsl(0, 1%, 65%);
    border-left-width: 5px;
    border-left-style: solid;
    padding: .75rem;
    color:hsl(0, 1%, 65%);
    margin: 2rem;
    border-radius: 5px;
}

.form-button {
    background-color: white;
    color: #000000;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
    border-radius: 5px;
    outline-color: #000;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #000;
    transition: background-color 100ms ease;
    font-size: var(--step--1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.form-input {
    border-radius: 5px;
    border: 0px;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.8);
}

.login-h1 {
    line-height: 2;
}

.form-spacer {
    margin: 5px;
}

.admin-spaceholder {
    margin: 15px;
    padding: 5px;
}

.feedback-input-md {
    text-align: left;
}

.werte-card-button:hover {
    cursor: pointer;
}

.really-spacy {
    padding: 10rem;
    color:hsla(0, 0%, 0%, 0);
    margin: 5rem;
}

.feedback-text {
    background: rgba(158, 139, 96, 0.2);
    border-style: solid;
    border-width: 1px;
    border-color:#000;
    border-radius: 5px;
    align-content: left;
    text-align: left;
    padding: 1.25rem;
}

.delete-button {
    color: red;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    background: white;
    border-radius: 5px;
}

.delete-button:hover {
    background-color: darkred;
    border-color: darkred;
    cursor:not-allowed;

}

.user-score {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 5fr;
    width: 550px;
    text-align: center;
    gap: 5px;
    padding: 8px;
    border-radius: 8px;
    background-color: hsla(0, 0%, 0%, 0.288);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    
}





.user-score-up-vote {
    color: #f73821;
    border-top-left-radius: 25% 40%;
    border-bottom-left-radius: 25% 40%;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}

.user-score-down-vote {
    color: #3f6fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 25% 40%;
    border-top-right-radius: 25% 40%;
}

.user-score-score {
    color: black;
    border-radius: 1.5px;
}

.user-score-up-vote, .user-score-down-vote, .user-score-score {
    background-color: #202344ae;
    transition: height 0.3s ease, transform 0.3s;
    border-style: solid;
    border-width: 2px;
    border-color: #191c34;
    outline-color: #191c34;
    backdrop-filter: blur(5px);
}

.user-score-up-vote:hover, .user-score-down-vote:hover  {
    cursor: pointer;
    transform: scale(1.1);
}

.picture-gallery {
    width: min(100% - 1.5rem, var(--reduced-max-width));
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(5, 1fr);
    padding-block: .5rem;
    align-items: center;
    align-self: center;
    background-color: hsla(0, 0%, 0%, 0.288);
    backdrop-filter: blur(5px);
    border-radius: var(--src-border-r);
    text-align: center;
    line-height: 1em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    margin-inline: auto;
}

.picture-gallery-buttons {
    grid-template-columns: 1fr repeat(5, 5fr) 1fr;
}

.gallery-item {
    transition: height 0.3s ease, transform 0.3s;
}

.gallery-item:hover {
    transform: scale(1.02);
    cursor: pointer;
}
.gallery-scroll {
    cursor: pointer;
    font-size: 3rem;
}

.image-display {
    width: 100%;
    height: 100%;
    align-items: center;
    background-color: #00000060;
    position: fixed;
    display: block;
    visibility: visible;
    top: 0;
    left: 0;
}

#imageContainer, #bannerContainer{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  #imageContainer img {
    max-width: 80%;
    max-height: 80%;
    display: block;
    margin: auto;
  }

  #closeButton2 {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

  @media (max-width: 1030px) {
    
    .user-score {
        width: 100%;
        font-size: var(--step-2);
    }

 }


 .feedback-submit-button {
    color: white;
    background: #202344b8;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
    border-radius: 5px;
    outline-color: #000;
    outline-width: 1.5px;
    outline-style: solid;
    border-color: #000;
    transition: background-color 100ms ease;
    font-size: var(--step--1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
    position: relative;
 }

 .feedback-submit-button:hover {
    background: #2e3261b8;
 }