@import "_reset.css";

/* * {
 outline: 1px solid red;
} */

/* Navigation ________________________________ */

.emoji {
    color: black; 
    filter: invert(100%) sepia(1) hue-rotate(200deg) saturate(5);
    display: inline-block;
    background-color:black;

}

nav div img {
    display: flexbox;
    justify-content: center;
    height: 18vw;
}

.icons {
    text-align: center;
    padding-top: 30vh;
    position: relative;
    justify-content: center;
}

ul {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40vh;
    text-align: center;
    padding-left: 8%;
    padding-right: 1.7%;
    
}

li {
    width: 16.6%;    
    list-style-type: none;
    text-align: center;
}


nav {
    font-family: Helvetica, sans-serif;
    font-size: 0.9em;
    color: #001AFF;
    justify-content: center;
}



/* Navigation ________________________________ */
/* Body Text ________________________________ */


.tab {
    display: inline-block;
    margin-left: 40px;
}

p {
    -webkit-transform: translate3d(-0%, -0%, 0);
    transform: translate3d(-0%, -0%, 0);
    color: #001AFF;
    font-family: Helvetica, sans-serif;
    line-height: 1.1em;
    font-weight: 400;
    font-size:  0.9em;
    position: sticky;
    top: 0;
    width: 375px;
    padding-left: 1em;
    padding-right: 1em;

        /* text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
        4px horizontal offset, 4px vertical offset, no blur, semi-transparent black color */

    background-color: white;
    background-clip: text;
    -webkit-text-stroke-color: transparent;
    -webkit-text-stroke-width: 8px;
    -webkit-background-clip: text;
    -webkit-line-clamp: round;

}

/* p:before {
    content: attr(title);
    position: absolute;
    -webkit-text-stroke: 0.18em #000;
    left: 0;
    top: 0;
    z-index: -1;}

 p:after {
    left: 0;
    top: 0;
    position: absolute;
    content: attr(title);
    z-index: 1;
    background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 0, 0, 0)), to(rgba(255, 0, 0, 0.12)));
    background: linear-gradient(left top, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.12) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: -0.02em -0.04em 1px rgba(255, 0, 0, 0.1);
      } */




.number {
    display: block;
    padding-bottom: 1em;
}

.project-description {
    padding-top: 1em;
}

/* Body Text ________________________________ */
/* Body Slideshows ________________________________ */

div img {
    height: 70vh;
    top:0;
    margin: 0;
    padding: 0;
    gap: 0;
}

::-webkit-scrollbar {
    display: none;
}

/* .paddingleft {
    padding-left: 400px;
}

.paddingright {
    padding-right: 400px;
} */

section {
    position: sticky;
    top: 0;
}

.slideshow {
    white-space: nowrap;
    scroll-behavior: smooth;
    top: 0;
    padding-left: 400px;
    overflow: auto;
    display: flex;
    padding-bottom: 3em;
}

.project-inner {
    display: flex;
    position: relative;
}

.project-text {
    position: absolute;
    width: 400px;
}


.right-align .slideshow {
    padding-left: 0px;
    padding-right: 400px;
}

.right-align .project-text {
    right: 0; 
}



/* Body Slideshows ________________________________ */
/* Footer ________________________________ */

footer p {
    color: #001AFF;
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-size:  0.9em;
    display: flex;
    width: 20%;
    padding: 0.5em;
}

footer{
    padding-top: 14%;
    display: flex;
    width:auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;

}

a {
    text-decoration: none;
    color: #001AFF;
    font-size: 1em;
}

#footer-cont-inst{
    display:none;
}

#footer-about-winti {
    display: none;
}

/* Footer ________________________________ */


/* //////////////////////////////////////////////////*/

/* z index Ebenen */

/* z-index Ebenen */


/* //////////////////////////////////////////////////*/

@media (max-width: 800px) {

    body {
        width: 100vw;
        font-size: 1em;
    }

    .icons {
        padding-top: 40vh;    
    }

    ul {
        font-size: 0.8em;
        padding-bottom: 50vh;
    }
   

    .project-text {
        justify-content:left;
        position: sticky;
        width: 90vw;
        padding-bottom: 0.85em;
        font-size: 0.8em;
    }

    

    .number {
        padding-top: 0;
        top: 0;
    }


    section {
        position: static;
        padding-bottom: 1.5em;
    }

    
    .slideshow {
        height: 38vh;
        width: 100vw;
        padding: 0%;
        position: sticky;
        font-size: 0.8em;
    }

    .slideshow img {
        height: 36vh;
        position: sticky;
    }

    p {
        font-size: 0.9em;
        line-height: 1.1em;
        padding-left: 1em;
    }


    .right-align .slideshow {
        padding-left: 0;
        padding-top: 0;
        padding-right: 1em;
        position: relative;
    }

    .left-align .slideshow {
        padding-right: 0;
        padding-top: 0;
        padding-left: 1em;
        position: relative;
    }

    .project-inner {
        display: inline;
        position: relative;
    }

    footer {
        font-size: 0.8em;
        width: auto;   


        footer p {
            width: 25%;
        }
 }

   


}


@media (max-width: 450px) {

    .project-text {
        word-wrap: break-word;
        width: 90vw;

    }

    p{
        word-wrap: break-word;
        width: 100vw;
    }

    .slideshow img {
        height: 30vh;
        position: sticky;}

    .slideshow {
        height: 30vh;
    }

    #footer-contact, #footer-instagram{
        display:none;
    }

    #footer-cont-inst{
        display:flex;
        flex-direction: column;
    }

    footer {
    width: auto;
    }

    footer p {
        width: 25%;
    }

    }


    @media (max-width: 335px) {

      

        footer p {
            width: auto;
            padding: 0;
            display: flex;
            flex-direction: 33%;
            padding: 0.5em;
        }

        footer {
            padding-left: 0.5em;
            padding-right: 0.5em;
            width: auto;
        }

        #footer-about-winti {
            display: block;
            padding-bottom: 0;
    
        }

        #footer-about {
            display: none;
        }

        #footer-winti {
            display: none;
        }

        #footer-cont {
            display: none;
        }

        .squeeze {
            padding-top: 0;
        }

        
    }
    

   











/* 
    h1 {
        -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
        font-size: 14vw;
        width: 90%;
        position: absolute;
        z-index: 0;
        left: 55%;
        top: 50%;
        color: #c35037;
      }
      h1:before {
        content: attr(title);
        position: absolute;
        -webkit-text-stroke: 0.18em #000;
        left: 0;
        top: 0;
        z-index: -1;
      }
      h1:after {
        left: 0;
        top: 0;
        position: absolute;
        content: attr(title);
        z-index: 1;
        background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 0, 0, 0)), to(rgba(255, 0, 0, 0.12)));
        background: linear-gradient(left top, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.12) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: -0.02em -0.04em 1px rgba(255, 0, 0, 0.1);
      } */