body{
    background-color: rgb(255, 236, 142);
    text-align: center;
}

h1{
    font-family:"super meatball";
    font-size: 3rem;
    outline-width: 12px;
    outline-color: white;
    outline-style: dotted; 
    outline-offset: 2px;
}

p{
    font-family: "super meatball";
    font-size: 1.25rem;
    text-align: center;

}

.button-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;

}

.btn-profile {
    /* shape and size*/
    border-radius: 2rem;
    padding: 1rem;
    border: ;
    
    /* color and font*/
    font-family:"game bubble" ;
    font-size: 1.5rem; 
    font-weight: bold;
    
    /* shadow depth*/
    box-shadow: 1px 2px 20px grey;

    /* smooth animate*/
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* button to the left*/
    display: block;
    margin-right: auto;
    margin-left: 5rem;    

}
.btn-profile:hover{
    background-color: rgb(238, 191, 35);
    transform: rotate(10deg);
}


.btn-listen {
    /* shape and size*/
    border-radius: 2rem;
    padding: 1rem;
    border: ;
    
    /* color and font*/
    font-family:"game bubble" ;
    font-size: 1.5rem; 
    font-weight: bold;
    
    /* shadow depth*/
    box-shadow: 1px 2px 20px grey;

    /* smooth animate*/
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* button to the left*/
    display: block;
    margin-right: auto;
    margin-left: 0%; 
    margin-top:;   

}
.btn-listen:hover{
    background-color: rgb(238, 191, 35);
    transform: rotate(10deg);
}

.btn-shop {
    /* shape and size*/
    border-radius: 2rem;
    padding: 1rem;
    border: ;
    
    /* color and font*/
    font-family:"game bubble" ;
    font-size: 1.5rem; 
    font-weight: bold;
    
    /* shadow depth*/
    box-shadow: 1px 2px 20px grey;

    /* smooth animate*/
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* button to the left*/
    display: block;
    margin-right: auto;
    margin-left: 0%; 
    margin-top:;   

}
.btn-shop:hover{
    background-color: rgb(238, 191, 35);
    transform: rotate(10deg);
}

.btn-cook {
    /* shape and size*/
    border-radius: 2rem;
    padding: 1rem;
    border: ;
    
    /* color and font*/
    font-family:"game bubble" ;
    font-size: 1.5rem; 
    font-weight: bold;
    
    /* shadow depth*/
    box-shadow: 1px 2px 20px grey;

    /* smooth animate*/
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* button to the left*/
    display: block;
    margin-right: auto;
    margin-left: 0%; 
    margin-top:;   
}
.btn-cook:hover{
    background-color: rgb(238, 191, 35);
    transform: rotate(10deg);
}

/*fonts*/
@font-face {
    font-family: "super meatball" ;
    src: url("Super Meatball.ttf");
}

@font-face {
    font-family: "game bubble" ;
    src: url("Game Bubble.ttf");
}

@font-face {
    font-family: "upheavtt";
    src: url("upheavtt.ttf");
}