body {

    background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}





h1 {

    color: #ddadbe;

}

.topbar a {
text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    
}

.main-menu {

  display: flex;
  flex-direction: column-reverse;
  justify-content: center; 
  align-items: center;     
  height: 70vh;           
}

.main-menu .box {
    width: 1500px;          
    height: 800px;          
    background-color: #faf6f7 ; 
    border: 2px solid #f7d1de ;

    padding: 20px;   
    margin: -140px;                 
    box-sizing: border-box; 
    text-align: center;
    user-select: none;
    
}

.main-menu .box a {
    color: #ddadbe;
    user-select: none;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    

}

.main-menu .box a:hover {
    
    font-size: 50px ;

}
.main-menu .box ul
{
    text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    user-select: none;
    list-style: none;

}

.main-menu .box p {

 text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    user-select: none;

}


.main-menu .box2 {

    width: 1500px;          
    height: 1000px;          
    background-color: #faf6f7 ; 
    border: 2px solid #f7d1de ;
    border-radius: 40px;                 
    box-sizing: border-box; 
    display: flex;
    flex-direction: row;
    overflow: hidden;
    
}


.main-menu .box2 p{

    text-decoration: none;
    color: #ddadbe;
    margin: 10px;
    font-size: 40px;
    user-select: none;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-menu .box2 a{

    text-decoration: none;
    margin: 30px;
    color: #ddadbe;
    font-size: 30px;
    user-select: none;
    text-align: center;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-menu .box2 a:hover{

    font-size: 50px;
}

.main-menu .banner {

    border-left: 2px solid #f7d1de;
    border-radius: 200px 0 0 38px; 
    width: 900px;
    height: auto;
    object-fit: cover;
    
    
}

.main-menu .boxp {
    width: 1500px;          
    height: 800px;          
    background-color: #faf6f7 ; 
    border: 2px solid #f7d1de ;
    padding: 20px;   
    margin: -140px;                 
    box-sizing: border-box; 
    user-select: none;
    
}

.main-menu .boxp a {
    color: #ddadbe;
    user-select: none;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-menu .boxp a:hover {
    
    font-size: 50px ;

}
.main-menu .boxp ul
{
    text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    user-select: none;
    list-style: none;

}

.main-menu .boxp p {

 text-decoration: none;
    color: #ddadbe;
    font-size: 30px;
    user-select: none;
    

}


.main-menu .boxp2 p {
    color: #ddadbe;
    user-select: none;
    transition: font-size .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-menu .boxp1 {
    font-size: 30px;
    position: absolute; 
    top: 425px;         
    left: 400px;       
    text-align: left;
}

.main-menu .boxp1 ul
{
    text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    user-select: none;
    list-style: none;

}

.main-menu .boxp2 {
    font-size: 30px;
    position: absolute; 
    top: 425px;         
    right: 400px;       
    text-align: right;
}

.main-menu .boxp2 ul
{
    text-decoration: none;
    color: #ddadbe;
    font-size: 20px;
    user-select: none;
    list-style: none;

}

body {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start with 0 opacity */
    }
    to {
        opacity: 1; /* End with 1 opacity (fully opaque) */
    }
}