h1 {
    font-family: Comic Sans MS;
    font-size:12vh;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6em;
    height: 6em;
    margin-left: -0.2em;
    margin-top: -3.5em;
    transform: rotate(270deg);
    background-image: linear-gradient(195deg,green,yellow,purple,red,green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.25;
}

h2 {
    color: green;
    font-size: 2.5em;
    font-weight: bold;
    margin-top: -5vh;
}

h3 {
    color: green;
    font-size: 2.5em;
    font-weight: bold;
}


/*Auswahlbox 1*/

.myProducts-gallery_1 img {
    height: 8vh;
    margin: 15px 10px;
    cursor: pointer;
    display: block;
    opacity: 0.5;
    border-color: green;
    border-width: 5px;
    border-style: solid;
}

.myProducts-gallery_1 img:hover {
        opacity: 1;
 }

.myProducts-gallery_1 {
    float: left;
}

.myProducts-gallery_2 img{
    height: 8vh;
    margin: 15px 10px;
    cursor: pointer;
    display: block;
    opacity: 0.5;
    border-color: green;
    border-width: 5px;
    border-style: solid;
}

.myProducts-gallery_2 img:hover {
        opacity: 1;
    }

.myProducts-gallery_2 {
    float: right;
}

.myProducts_1 { 
    top: 33%;
    left: 25%;
    transform: translate(-50%, -50%);
    position: absolute;    
}


.image-container_1 img {
    height:35vh;
    transition: transform 1s;
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
}

.image-container_1 img:hover {
    transform: matrix(2.7,0,0,2.7,300,180);
    cursor: zoom-in;   
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
}
  
.image-container_1{
    float: right;
    padding: 10px;
    border-color: green;
    border-width: 5px;
    border-style: solid;
}

   /*Auswahlbox 2*/
.myProducts-gallery_3 img {
    height: 8vh;
    margin: 15px 10px;
    cursor: pointer;
    display: block;
    opacity: 0.5;
    border-color: green;
    border-width: 5px;
    border-style: solid;
} 

.myProducts-gallery_3 img:hover {
        opacity: 1;
    }



.myProducts-gallery_3 {
    float: left;
} 

.myProducts-gallery_4 img {
    height: 8vh;
    margin: 15px 10px;
    cursor: pointer;
    display: block;
    opacity: 0.5;
    border-color: green;
    border-width: 5px;
    border-style: solid;
} 

.myProducts-gallery_4 img:hover {
        opacity: 1;
    } 

.myProducts-gallery_4 {
    float: right;
}


.myProducts_2 {
    top: 75%;
    left: 25%;
    transform: translate(-50%, -50%);
    position: absolute;
}


.image-container_2 img {
    height: 35vh;
    transition: transform 1s;
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
 
}

.image-container_2 img:hover {
        transform: matrix(2.7,0,0,2.7,300,-200);
        cursor: zoom-in;
        border-color: yellow;
        border-width: 5px;
        border-style: solid;
    } 

.image-container_2 {
    float: right;
    padding: 10px;
    border-color: green;
    border-width: 5px;
    border-style: solid;
}

@keyframes fadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoom-in-zoom-out {

    0% {
        transform: matrix(1,0,0,1,0,0);
    }
    50% {
        transform: matrix(2,0,0,2,200,-180);
    }

    100% {
        transform: matrix(1,0,0,1,0,0);
    }
}

/*Lebenslauf*/
.bewerbung {
    height: 90vh;
    width: 60vh;
    /*perspective:1500px; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
    float: right;
    position:fixed;
    left: 63%;
    top: 7%;
} .bewerbung:hover .turnaround {
        transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */
       
    }
    .bewerbung .front {
        aspect-ratio: 4 / 3; /* Platz reservieren */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* Bildquelle getrennt, besser lesbar: */
        background-image: url("/css/jpeg/lebenslauf.webp");
    }
    .bewerbung .back {
        aspect-ratio: 4 / 3; /* Platz reservieren */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* Bildquelle getrennt, besser lesbar: */
        background-image: url("/css/jpeg/bewerbungsanschreiben.webp");
    }.turnaround {
    transition: 2s /* Die Drehung soll 2 Sekunden dauern */;
    transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
    position: relative;
    height: 86%;
    
} .front, .back {
    backface-visibility: hidden; /* Die R�ckseite von Elementen soll unsichtbar sein */
    position: fixed;
    width: 100%;
    height:100%;
    border-color: green;
    border-width: 5px;
    border-style: solid;
} .front {
    z-index: 2;
} .back {
    transform: rotateY(180deg) /* Die R�ckseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
    z-index: 1;
}