/* Ein paar link zu coolen Seiten die Path's zu img-divs geben  */
     /* https://css-tricks.com/the-shapes-of-css/ */
     /* https://css-tricks.com/css-grid-and-custom-shapes-part-1/ */
     /* https://www.mediaevent.de/css/clip-path-2.html */


/* 
    <img src="assets/flags/w160/de.png" style="width:135px; height:125px; position: relative;top:0%;left:50%;transform: translate(-110%, -105%);" alt="" />
    <img src="assets/flags/w160/fr.png" class="imgR" style="width:135px;  height:125px; position: relative;top:0%;left:50%;transform: translate(10%, -205%);" alt="" />
 
     */
    .gallery {
        /* display: grid; */
        /* gap: -200px;  */
        /* grid-template-columns: 175px 175px; */
        /* grid-template-columns: auto auto; */
        /* place-items: center; */
    }
    /* .gallery > img {
        /*min-width: 115px;/*70px;/*2.5px; /*7.5px; /* controls the size */
        /* height: 145px; */
        /* aspect-ratio: 1; */
        /* object-fit: cover; */
        /* clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%); */
        /* clip-path: inset(0% 0% 0% 0% round 50% 20%); */
        /* clip-path: ellipse(50% 35% at center); */
        /* clip-path: ellipse(50% 45% at center); */
        /* clip-path: ellipse(75% 55% at center); */
        /* clip-path: ellipse(75% 35% at center); */

    /* } */

    .imgL {
        /* height: 200px;
        width: 200px;
        width: 0px; */
        max-width:135px; 
        height:125px; 
        position: relative;
        top:0%;left:50%;
        transform: translate(-110%, -105%);
        /* mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); */
        clip-path: ellipse(75% 35% at center);

    } 




   .imgR {
       /* height: 145px;
       width: 0px; */
       max-width:135px;  height:125px; position: relative;top:0%;left:50%;transform: translate(10%, -205%);
       /* mask-image: linear-gradient(to left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%);
       -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); */



       clip-path: ellipse(75% 35% at center);
   }
    /* the clip-path values */
    /* .gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); } */
    /* .gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 75%, 50% 50%); } */
    /* .gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 0 0); } */
    /* .gallery > img:nth-child(1) { clip-path: inset(0% 0% 0% 0% round 20% 50%); }
    .gallery > img:nth-child(2) { clip-path: inset(0% 0% 0% 0% round 50% 20%); }  */

    /*     
    .green{
        /* background-color:rgba(200,100,50,0.5);
        /* background-color:rgba(200,100,50,0.5);
        color: rgba(200,100,50,0.5);
    } */
    input[type="text"].green {
        text-align:center; 
        /* text-align:center;  */
        /* background-color : #120012;  */
        background-color: rgba(83, 198, 255, 0.5);
        height:10%; font-size:200%;
        /* maxlength:3; */
    }
    input[type="text"].red {
        text-align:center; 
        /* background-color : #120012;  */
        /* background-color:rgba(100,100,50,0.5); */
        background-color:rgba(200,100,50,0.5);
        height:10%; font-size:200%;
        /* color: black; */
    }

    .box > h3 {
        position: relative;transform:translate(0%, -20%);
    }

    .tipp_spielzeit{
        padding-top:-100px;transform:translate(0%, -60%);
    }
    .tipp_tipp{
        transform:translate(0%, -20%);
    }