styles.css

body{
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color:aliceblue;
    height: 100vh;

}
.main {
    display: flex;
    height: 85vh;
    justify-content: center;
    align-items: center;

}

button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 50px;
    border-radius: 25px;
    background-color: lightblue;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s ease;
    /* font-family: Arial, sans-serif;
    background: linear-gradient(to right, aliceblue 25%, lightblue 25%, lightblue 50%, white 50%, white 75%, pink 75%); */
}


button:hover{
   
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.5s ease;
    background-color: lightcoral;
}
.content{
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
}
.menu-container {
    width: 50%;
    display: flex;
    justify-content: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-out;

}
p.detail{
    padding: 100px;
}
.button-container{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 20px;
}


.container{
    padding: 20px;
    display: flex;
    align-items: start;
    gap: 20px;
}

.header {
    font-size: xx-large;
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 20px;
    
}
.header, .detail {
    transition: color 0.5s ease;
}

body {
    transition: background-color 0.5s ease;
}
.image{
    display: flexbox;
    
    border-radius: 50%;
  box-shadow: 0 0 30px 0 rgb(0, 0, 0);
}
@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}