#home {
    height: 100%;
    width: 100%;
    overflow: hidden;
}


.navText {
    font-family: "Segoe UI Semibold", serif;
    font-size: 2vw;
    color: white;
    padding: 0.5vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.topnav {
    overflow: hidden;
    padding: 0;
    background-color: #06616F;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 1.4vw 1.5vw;
    text-decoration: none;
    font-size: 1.4vw;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #06616F;
    color: gray;
}

.link {
    overflow: hidden;
    float: right;
    font-family: "Segoe UI Semibold", serif;
    font-size: 1.4vw;
    color: white;
    padding: 1vw;
    padding-left: 10.5vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.addText {
    display: inline-block; /* inline-block so we can set a width */
    font-size: 0.8vw;
    width: 0;
    white-space: nowrap; /* keep text one line */
    direction: rtl; /* change direction so the text overflow on the left */
    unicode-bidi: plaintext;
    color: rgba(255, 255, 255, 0);
    transition: .5s;
    transform: translateX(5vw); /* put the value you want here */
    pointer-events: none; /* to avoid the hover on the text, remove to see the difference */
}

.link:hover .addText {
    color: white;
    transform: translateX(-10.5vw);
}

.coloredText {
    color: #06616F;
}

#mainContent {
    display: grid;
    grid-template-columns: 50vw 30vw;
    grid-gap: 5vw;
}

#introText {
    margin-top: 10vw;
    margin-bottom: 50%;
    margin-left: 10vw;
    font-family: "Segoe UI Semibold", serif;
    font-size: 5vw;
    color: black;
    padding: 0.5vw;

}

#mainContentImage {
    margin-top: 5vw;
    margin-bottom: 50%;
    font-family: "Segoe UI Semibold", serif;
    color: black;
    padding: 0.5vw;
}

h2 {
    font-family: "Segoe UI Semibold", serif;
    font-size: 3.75vw;
    margin-left: 2vw;
    margin-top: 0.25vw;
    color: #06616F;
}

#ToolDiv {
    display: grid;
    grid-template-columns: 30% 30%;
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    position: relative;
    align-items: center;
    margin-left: 25vw;
    text-align: center;
}

.displayTextHover img {
    display: inline;
    height: 10vw;
    width: 10vw;
}

.displayTextHover span {
    display: inline;
    font-family: "Segoe UI Semibold", serif;
    font-size: 1.9vw;
    opacity: 0;
    position: relative;

}

.displayTextHover:hover img {
    display: inline;
    opacity: 0.5;
}

.displayTextHover:hover span {
    display: inline;
    opacity: 1;
    font-family: "Segoe UI Semibold", serif;
    font-size: 1.75vw;
    color: #000000;
}



.schulDivs img {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0.25vw solid #575757;
    border-radius: 1vw;
}

.schulDivs p {
    color: #575757;
    font-family: "Segoe UI Semibold", serif;
    font-size: 2vw;
}
#AusbildungDiv {
    display: grid;
    grid-template-columns: 70%;
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    position: relative;
    align-items: center;
    margin-left: 25vw;
    text-align: center;
}

#interessen {
    display: grid;
    grid-template-columns: 70%;
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    align-items: center;
    text-align: center;
    position: relative;
    margin-left: 25vw;
}


@media (min-width: 1080px){
#interessen {
    display: grid;
    grid-template-columns: 40% 40%;
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    align-items: center;
    text-align: center;
    position: relative;
    margin-left: 10vw;
}
    #AusbildungDiv {
        display: grid;
        grid-template-columns: 29% 29% 29%;
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        position: relative;
        align-items: center;
        margin-left: 3vw;
        text-align: center;
    }
    #ToolDiv {
        display: grid;
        grid-template-columns: 15% 15% 15% 15% 15%;
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        position: relative;
        align-items: center;
        margin-left: 5vw;
        text-align: center;
    }
    #textures{
        display: grid;
        grid-template-columns: 10% 10% 10% 10% 10%;
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        align-items: center;
        text-align: center;
        position: relative;
        margin-left: 10vw;
    }

}

.interessenDiv img {
    width: 70%;
    height: 70%;
    padding: 0;
    border: 0.25vw solid #575757;
    border-radius: 1vw;
}

.interessenDiv p {
    color: #575757;
    font-family: "Segoe UI Semibold", serif;
    font-size: 2vw;
}

#PodcastTrailer {
    margin-top: 1vw;
    margin-bottom: 3vw;
    margin-left: 5vw;
    width: 25vw;
    height: 5vw;
}

#Podcast h2{
    margin-bottom: 1vw;
}
audio::-webkit-media-controls-panel{
    background-color: #06616F;

}
@media (max-width:1080px ) {
    #textures{
        display: grid;
        grid-template-columns: 30% 30%;
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        align-items: center;
        text-align: center;
        position: relative;
        margin-left: 10vw;
    }
}


.texture{
    width: 10vw;
    height: 10vw;
}

#zombie{
    width: 10vw;
    height: 18vw;
    margin-bottom: 2vw;
}

.projectsDiv{
    border: 0.3vw solid #06616F;
    border-radius: 2vw;
    margin: 2vw;
}

#Visitenkarte img{
    width: 80%;
    height: 80%;
    margin-left: 2.5vw;
    margin-bottom: 3vw;
    border: 0.3vw solid #06616F;
}

#Plakat{
 height: 80vw;
}

#Plakat iframe{
    height: 80%;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;;
}

#anchor{
    border: 0.3vw solid #06616F;
    border-radius: 1vw;
    margin: 2vw;
}

#anchor a{
    font-family: "Segoe UI Semibold", serif;
    font-size: 2vw;
    color: #06616F;
    margin-top: 1vw;
    margin-left: 70%;
}