@import url("https://use.typekit.net/krh7cqs.css");

body {
    margin:0;
    width: 100vw;
}
 
h1 {
    font-family: "gunter", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin:0;
    font-size:10rem;
    line-height: 140px;
}

h5 {
    font-family: "gunter", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin:0;
    font-size:10rem;
    line-height: 1px;
}

.top {
    text-align: right;
    color: #fffde9;
    background-color:rgb(0, 0, 0);
    display:flex;
    align-items: flex-end;
}

.top-text {
    flex: 30%;
    margin:0 30px 15px -450px;
    align-items:end;
}

.image1 {
    margin:0 0 0 20px;
}

.second-section {
    display:flex;
}

.left-text2 {
    flex:50%;
    background-color: #94445b;
    padding:5% 5% 5% 8%;
}

h2 {
    font-family: ohno-fatface, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 6rem;
    margin-top:-5px;
}

p {
    font-family: "parabolica", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size:1rem;
    color:#fffde9;
    margin-top: -75px;
}

.right-image2 {
    flex:50%;
    background-color: #75233a;
    padding:2%;
    align-content: center;
}

.guard{
    width:80%;
    margin-top:45px;
    border:5px;
    border-color: #48041b;
    border-style: solid;
}

h3 {
    font-family: ohno-fatface-compressed, serif;
    font-weight: 500;
    font-style: normal;
    font-size:7rem;
    text-align: center;
    margin: 25px 20px;
    color:#75233a
}

.proof {
    padding:2%;
    background-color: #48041b;
    background-image: url(images/actulbgg-02.png);
}

@keyframes loop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-100%);}
}

.mywork {
    color:#fffde9;
    background-color: black;
    padding-bottom:8%;
}

#scrollingby {
    display:flex;
    width:85%;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
    background-image: url(images/scrollbg-05.png);
    background-size:contain;
    padding:5%;
}

#scrollingby .scrolly {
    display:flex;
    align-items: center;
    justify-content: space-around;
    width: fit-content;
    white-space: nowrap;
    animation: loop 20s linear infinite;
}

.scimg {
    width:40%;
    padding:1%;
}

.fade {
    width:100%;
    position: absolute;
    background: linear-gradient(
        90deg,
        black,
        transparent 30%,
        transparent 60%,
        black
    );
    inset:0;
}

.inspo {
    display:flex;
    background-color: #fffde9;
}

.how {
    flex:50%;
    padding:2%;
    margin-left: 30px;
}

.why {
    flex:50%;
    padding:2%;
    margin-right:30px;
    text-align: left;
}

li {
    font-family: "parabolica", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size:1rem;
}

.bottom {
    background-color: black;
    display:flex;
}

.ten {
    color:#fffde9;
    flex:50%;
    padding: 0 5%;
    
}



.eleven {
    flex:50%;
    align-content: flex-end;
}

.last {
    width:100%;
    align-content: right;
}

.behance {
    width:10%;
}

.insta {
    width:10%;
}

button {
    background-color: #75233a;
    font-family: ohno-fatface, serif;
    font-weight: 700;
    font-style: normal;
    font-size:1.1rem;
    color:#48041b;
    padding:2%;
    border:solid #75233a 3px;
    border-radius: 10pt;

}

button:hover {
    background-color: #48041b;
    font-family: ohno-fatface, serif;
    font-weight: 700;
    font-style: normal;
    font-size:1.1rem;
    color:#75233a;
    padding:2%;
    border:solid #48041b 3px;
    border-radius: 10pt;

}
.buttons {
    display:flex;
    flex-direction: column;
    margin: 90pt 0 30pt 0;
}

.cbutton {
    flex:50%;
    margin-bottom: 30px;
}

.socials {
    flex:50%;
}

a {
    color:black;
}

#span1 {
    color:#fffde9;
    font-size:9rem;
}

#span2 {
    font-size: 4.3rem; 
    margin-left:60px;
}

#span3 {
    font-size: 2.5rem;
}

#span4 {
    color:black;
    font-style: italic;
}

#span5 {
    font-size: 2.5rem; 
    margin-bottom: -30pt;
    line-height: 70px;
}

@media screen and (max-width:700px) {
        h1 {
            font-size: 4.5rem;
            line-height:90px;
        }

        #span1 {
            font-size:4rem;
        }

        .image1 {
            margin-bottom:-70px;
        }

        h2 {
            font-size: 4rem;
        }

        p {
            margin-top:-30px;
        }

        #span2 {
            font-size: 2rem;
            margin-left:35px;
        }

        .second-section{
            flex-direction:column-reverse;
            justify-content: center;
        }

        .right-image2 {
            align-content: center;
        }

        .guard {
            margin:5% 5% 5% 8%;
        }

        .scimg {
            width:80%;
        }

        #span3 {
            font-size: 1.8rem;
            line-height: 30px;
        }

        .inspo {
            padding-bottom:10%;
        }

        #span5 {
            font-size:1.8rem;
            
        }

        .socials {
            width: 190%;
        }

        .last {
            width:150%;
            margin-left:-120px;
        }

    


}