@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    box-sizing: border-box;
}

body{
    font-family: "Roboto", serif;
    background:linear-gradient(to left  , rgba(255,255,255,0) , white);
    position: relative;
    line-height:1.5em;
}
.carousel-indicators{
    position: absolute;
    bottom: -70px !important;
}
.carousel-inner {
    transition: transform 5s ease-in-out !important; /* 1.5 seconds duration */
  }
.boot{
    overflow: hidden;
    width:400px;
    padding:20px;
    background:linear-gradient(to  left  , rgba(255,255,255,0) , rgb(118, 100, 223),rgb(80, 138, 233));
    border-right:none;
}
.doot{
    overflow: hidden;
    width:400px;
    padding:20px;
    background:linear-gradient(to  left  , rgba(255,255,255,0) ,rgb(226, 245, 83), rgb(80, 138, 233));
    border-right:none;
}
.boot:hover{
    opacity:0.6;
    color:white;
}

.design{
    overflow:hidden;
    position:relative;
    top:0;
    left:0;
    height:23px;
    color:rgb(76, 16, 219);
    animation:2s direction ease-in-out infinite;
}

@keyframes direction {
    from{
        width:0;
    }
    to{
        width:70%;
    }
}
.picture{
    background:url("man.png") no-repeat center center/cover ;
    margin-top:80px;
    margin-left:200px;
    overflow:hidden;
    height:80vh;
    width:80%;
    
}
@media (max-width:700px) {
    body{
        font-family: "Roboto", serif;
        background:linear-gradient(to left  , rgba(255,255,255,0) , white);
        position: relative;
        font-size:7px;
        line-height:1.5em;
    }
    .doot{
        overflow: hidden;
        width:350px;
        padding:20px;
        background:linear-gradient(to  right  , rgba(255,255,255,0) ,rgb(226, 245, 83), rgb(80, 138, 233));
        border-left:none;
    }
    .boot{
        overflow: hidden;
        width:350px;
        padding:20px;
        background:linear-gradient(to  right , rgba(255,255,255,0) , rgb(206, 201, 232),rgb(119, 234, 245));
        border-left:none;
    }
    .picture{
        background:url("man.png") no-repeat center center/cover ;
        margin-top:130px;
        margin-bottom:130px;
        margin-left:50px;
        width:80%;
        height:100vh;  
        z-index:2;  
    }
    .pine{
        position:relative;
        border:none;
        top: 0;
        z-index:3;
        box-shadow:-30px 30px 30px rgba(0,0,0,6);
    }
    .design{
        position:relative;
        top:0;
        color:rgb(10, 2, 82);
        animation:5s direction ease-in-out infinite;
    }
    @keyframes direction {
        from{
            width:0;
        }
        to{
            width:70%;
        }
}
}
@media (max-height:300px) {
    .picture{
        background:url("man.png") no-repeat center center/cover ;
        margin-top:130px;
        margin-bottom:130px;
        margin-left:50px;
        overflow: hidden;
        width:80%;
        height:150vh;  
        z-index:2;  
    }
}