/*photo gallery*/
   div.beschreibung {
        text-align: left;
        max-width: 700px;
        min-width: 400px;
        margin: 144px 20px 44px 30px;
       display: flex;
       flex-direction: column;
    }

  
            
/*photo gallery*/
        .slider {
            justify-self: center;
            margin-top: 0px;
            width: 500px;
            height: 500px;

            overflow: hidden;
            text-align: center;

            padding-bottom: 50px;
            min-width: 500px;
        }

            .image-container {
                width: 1500px;
                background-color: pink;
                height: 500px;
                clear: both;
                position: relative;
                -webkit-transition: left 2s;
                -moz-transition: left 2s;
                -o-transition: left 2s;
            transition: left 2s;
              }
            .slide {
                float: left;
                margin: 0px;
                padding: 0px;
                position: relative;
            }
                  #slide-1:target ~ .image-container {
                    left: 0px;
                  }
                  #slide-2:target ~ .image-container {
                    left: -500px;
                  }
                  #slide-3:target ~ .image-container {
                    left: -1000px;
                    }

            .buttons {
                position: relative;
                top: 15px;
              }
                .buttons a {
                    display: inline-block;
                    height: 15px;
                    width: 15px;
                    border-radius: 10px;
                    margin-left: 5px;
                    background-color: darkgreen;
                  }

     h3 {
        margin: auto;
        margin-top: 80px;
        margin-bottom: 20px;
        text-align: center;
        font-weight: 900;
        font-size: 20pt;
        font-style: normal;
        letter-spacing: 4px; 
    }

.charakter{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
        .img_charakter {
            width: 150px;
            height: 150px;
            text-align: center;
            background-color: #1D2B53;
            margin: 20px;
            
            overflow: hidden;
            position: relative;
        }
        
        .img_charakter:hover .name {
                margin-left: initial;
            }

        div.name {
            position: absolute;
            top: 0;
            margin-left: -100%;
            width: 100%;
            height: 150px;
            
            background-color: rgba(255, 255, 255, 0.8);
            transition: 0.7s;
            
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
        }

            div.name figcaption {
                bottom: 0px;
                left: 0px;
                font-weight: 300;
                font-size: 12px;
                font-style: normal;
                color: black;
                letter-spacing: 2px;
                outline: 1px solid black;
                padding: 10px;
                line-height: normal;
            }