html{
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: rgb(226, 232, 245);
    background-color: rgba(0, 50, 41);
}
html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }

html,body{
    height: 100%;
}


/*   home   */

header::before{
    background-color: rgb(11, 125, 131);
    content:'';
    display: block;
    height:50px;
}

#flowers{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    content: normal;
    border-bottom: 3px solid rgb(2, 68, 68);
  }

.stylebg{
    text-shadow: 2px 1px rgb(7, 112, 115);
    color: #fdf9f9;
    padding: 20px;
    margin: 20px;
}

h1{
    margin: 0px;
    margin-top: 150px;
    font-family:Arial, Helvetica, sans-serif;
    padding: 5px;
    font-size: 30px;
    text-align: center;
}
h3{
    text-align: center;
}
h2{
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    padding: 10px;
    margin: 10px;
    font-size: 25px;
    
}
hr{
    background-color: #129fa1;
    height: 4px;
    
    
}
.navbar {
    background-color:rgb(11, 125, 131);
    color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 0;
    z-index: 300;
    
}

/* Style for the unordered list within the navigation bar */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

   
nav a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 15px;
    display:block;
    font-size: large;
    
}

nav li:hover{
    background-color: rgb(124, 227, 255);
    
}



/* profile */

#myself{
    height:250px;
    border-radius: 25px;
    margin-right: 35px;
    float:left;
    border: 5px double rgb(21, 141, 175)
}
#about{
    margin-top: 100px;
}


.backdrop{
    background-color: #f3fdfd;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    padding: 20px;
}
.box{
    width: 350px;
    height: 285px;
    border: none;
    background-color: rgb(4, 60, 103);
    margin: 0;
    border: 1px solid rgb(21, 141, 175);
}

.box{
    display: inline-block;
}

.box:hover{
    box-shadow:4px 4px 6px rgb(141, 230, 222);
}
.box:active{
    box-shadow: 5px 5px 7px rgb(6, 99, 131);
}

.content-wrapper{
    margin: 0 auto;
    max-width:1200px;
    padding: 20px;
}

/*  resume  */

#download{
    background-color: #129fa1;
    padding: 10px;
    text-decoration: none;
    margin: 25px;
    border-radius: 20px;
}

/* projects */
#projects{
    margin: 20px;
}
.reel{
    height: 420px;
    float: left;
    margin: 35px;
    border: 4px dashed darkcyan;
    border-radius: 45px;
}
.projectlink{
    background-color: #129fa1;
    color: #eee9f9;
    padding: 10px;
    text-decoration: none;
    margin: 45px;
    border-radius: 20px;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/*   footer   */
footer { 
    background: rgb(97, 164, 161) ;
   color: rgb(3, 59, 3);
   width: 100%;
}

.socials {
    list-style-type: none;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
   
}    
.socials li {
    display:inline-block; 
    margin: 5px;
    
    
}
.socials img {
    width: 25px;
}