*{
    margin: 0%;
    padding: 0%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
    /* background:linear-gradient(purple,blue);  */
    height: 100vh;
      overflow-x: hidden; 
    scroll-behavior: smooth;
    color: #000000;
}

header{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    width: calc(100% - 40px);
    /* background-color:rgb(6, 6, 35);   */
    color: white;
    z-index: 999;
}

menu{
    font-weight: 3em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.0em;
    color: white;
    
}
menu a{
    color: white;
    text-decoration: none;
    padding: 15px 30px ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.0em;
}
header menu a:hover,
header menu a.active{
background:white;
color: rgb(6, 6, 35);
border-radius: 27px;

}
section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;;
    
    width: 100%;
    height: 100%;

}
section::before{
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 90px;
    z-index: 96;
    background: linear-gradient(to top,#251F3B,transparent);
}
section img{
   
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section div{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index:6 ;
    font-size: m;
    color: white;
    
}
section #background{
    z-index: 5;

    height: 100%;
    
    object-position: right;
    object-fit: cover;
    backdrop-filter: blur(1010px);

}

section #backtree{
    top: 90px;
    z-index: 7;

}
section #ranakon{
   max-height: 100%
}

.notes {
    position: relative;
    padding: 100px;
    background: linear-gradient(to bottom,#251F3B,black);
    color: aliceblue;
    border: none;
    z-index: 12;
    font-size: larger;
   
    
} .notes p{
    font-size: 1em;
} 
#aa{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
    z-index: 16;
    background-color: #000000;
}
#ab{
    width: 50%;
    height: 90%;
    background-color: #000000;
    display: flex;
    flex-direction: column;;
    justify-self: auto;

}
.social{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding-left : 10px;
    width: 100%;
}
.social a{
    height: 100%;
   width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ab p{
    padding: 20px;
    color: #fff;
}
#ac{

    background-color: #000000;
    width: 50%;
    height: 90%;
    justify-self: auto;

}
#ba{
   
    height: 100vh;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    z-index: 15;
;
     


}