* {
    box-sizing: border-box;
}

body {
    display:block;
    /* margin:0 auto; */
    background-color: #e7d2c6;
    transition:.5s;
 }

.main{
    margin:0 auto;
}

.container{
    padding:0, 30;
    max-width:1000px;
    background-color: rgb(249, 246, 244);
    margin: 0 auto;
    position:absolute;

}

.changeColor {
    background-color: #a37860;
 }

 



.name{
    /* position:absolute; */
    width:50%;
    display:block;
    margin:auto;
    padding-top:200px;
    margin-bottom:250px;
}

.about{
    /* position:absolute; */
    top:230px;
    width: 600px;
    margin:30px;
    margin-bottom: 200px;
    text-wrap:wrap;
    font-family: forma-djr-text, sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 20px;
    color:black;
    display:block;
}

.projects{
    
    margin:auto;
    margin-top:300px;
    

    width: 100px;
    font-family: "forma-djr-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 90px;
    line-height: 110px;
    color:black;
    display:block;
    width:100%;
    text-align:center;
    
}

.menu-btn{
    display:none;
}

.projectsdarkmode{
    color:rgb(249, 246, 244)
}

.nav{
    background-color:#732a00;
    width:100%;
    height:60px;
    /* position: fixed; */
    top:0;
    right:0;
    display:flex;
    z-index:10;
    align-items:flex-end;
}

.about-btn{
    background-color:#732a00;
    width:50%;
    height:85%;
    text-align: left;
    
    color:#e7d2c6;
    transition: .5s;
    font-family: forma-djr-text, sans-serif;
font-weight: 400;
font-style: normal;
padding:10px;
    padding-left: 40px;
    font-size:26px;
    /* position:; */
}

.about-btn:hover{
    border-radius: 50px;
    color:#e7d2c6;
    text-decoration:underline;
}

.work-btn{
    background-color:#e7d2c6;
    width:50%;
    height:85%;
    text-align: left;
    padding:10px;
    padding-left: 40px;
    color:#33311b;
    transition: .5s;
    position:relative;
    border-radius: 50px;
    font-size:26px;
    font-family: forma-djr-text, sans-serif;
font-weight: 400;
font-style: normal;
border-radius: 30px 30px 0 0;
text-decoration: underline;
}

.work-btn:hover{
    
    color:#33311b;
    
}

.btndarkmode{
    background-color:rgb(249, 246, 244);
    color:black;
}

.contact-btn{
    background-color:black;
    width:33%;
    height:100%;
    text-align: center;
    padding:8px;
    color:white;
    transition: .5s;
    position:relative;
}

.contact-btn:hover{
    border-radius: 50px;
}


.title1{
    
    /* position: absolute;
    bottom:5px; */
    color:#33311b;
    font-family: "forma-djr-text", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 0 auto;
    margin-top:10px;
    display:block;
    max-width:640px;
    font-size:32px;
}

.descrip1{
    /* position:absolute;
    top:1140px; */
    max-width:640px;
    color:#33311b;
    font-family: "forma-djr-text", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 20px auto;
    /* margin-bottom:100px; */
    display: block;
    
}


.carousel-bg-pink{
    width:100%;
    height:700px;
    background-color:#a37860;
    padding:50px;
}

.carousel-bg-green{
    width:100%;
    height:700px;
    background-color:#7d7f65;
    padding:50px;
}

.carousel-bg-white{
    width:100%;
    height:700px;
    background-color:#e7d2c6;
    padding:50px;
}

.carousel {
    background: transparent;
    
    /* position:relative;
    top:0; */
    margin: 0 auto;
    max-width:840px;
    
  }
  
.org{
    /* top:720px; */
}

  .carousel img {
    height: 400px;
    margin-left: 200px;
    margin-right:200px;
  }

  .flickity-button {
    background: transparent;
  }

  .flickity-button:hover{
    background: transparent;
    opacity: 70%;
  }

  .flickity-prev-next-button {
    width: 100px;
    height:100px;
    
  }



  .bynumber{
   
    /* top:1020px; */

  }

  .mightygreen{

  }

  .aboutme{
    margin:30px;
    width: 800px;
    font-family: forma-djr-text, sans-serif;
font-weight: 400;
font-style: normal;
  }

  .column{
    display:inline-block;
    width: 30%;
    margin:30px;
    font-family: forma-djr-text, sans-serif;
font-weight: 400;
font-style: normal;
    
  }
  

@media screen and (max-width:900px) {

    .nav{
        flex-direction: column;
        width: 100px;
        height: 80px;
    }

    .work-btn{
        height:50%;
        width:100%;
    }

    .about-btn{
        height:50%;
        width:100%;
    }

    .name{
        font-size:100px;
        line-height: 80px;
        padding-bottom: 0px;
    }

    .about{
        width:400px;
        margin-top:0px;
    }

    .projects{
        font-size:100px;
        margin-top: 300px;
        margin-bottom:0px;
    }

    .title1{
        margin-top:10px;
    }

    .descrip1{
        margin-bottom:50px;
    }


}

@media screen and (max-width:400px) {
   body{
    height:100vh;
   }

   
    .menu-btn{
        background-color: black;
        width:100px;
        height:40px;
        display:block;
        color:rgb(249, 246, 244);
        padding:8px;
        left:10px;
        top:10px;
        text-align:center;
        position:absolute;
        z-index:11;
        transition:.5s;
        margin-top:25px;
    }
   
    .menu-btn.active{
        border-radius: 50px;
    }

    .nav{
    top:10px;
    left:10px;
    width:90px;
    height:40px;
    flex-direction:row;
    transition:.5s;
    position:absolute;
   }

   .nav.active{
    width:200px;
    left:110px;
   }

   .about-btn{
    width:50%;
    height:100%;
    margin-top:25px
   }

   .work-btn{
    width:50%;
    height:100%;
    margin-top:25px;
   }
   
    .name{
        margin:auto;
        margin-top:200px;
        margin-bottom: 300px;
        
    }

    .about{
        margin:10px;
    }

    .projects{
        padding:0px;
        margin:10px;
        margin-top:450px;
        font-size:80px;
    }
    
    .carousel{
        margin:10px;
    }

   .title1{
    margin:10px;
   }

   .descrip1{
    margin:10px;
    margin-bottom:100px;
   }
    .flickity-prev-next-button {
        width: 50px;
        height: 50px;
      }
}