*, 
*:before, 
*:after{
    box-sizing: border-box;
}
html, body {
    overflow: auto;
    height: 100%; 
    margin: 0;
    background-color: black;
}


#app-icon {
    background-image: url(../assets/images/app_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 25px;
    width: 10rem;
    height: 10rem;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

#app-icon:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#foe-header h2{
    color: #A69A85;
    font-size: 1.3rem;
}
#foe-header p{

    font-size: 1.5rem;
    font-weight: bold;
    color: #262626;
    cursor: pointer;

}

.landingPage{
    height: 100%;
    background-image: url(../assets/images/design.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #262626;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    font-family:"superior-title";

    
}

#foe-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.restaurants-select{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}
.rest-aboutUs, .contactSect{
    margin: auto;
}
.rest-home {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    transition: box-shadow 0.3s ease; 
    cursor: pointer;
}
.rest-home:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#bistro-rest{
    background-image: url(../assets/images/hearthAndStone-block.png);

}
#vines-rest{
    background-image: url(../assets/images/hearthAndStone-block.png);
}
#ceviche-rest{
    background-image: url(../assets/images/hearthAndStone-block.png);
}
.landing-HomeButton{
    display: flex;
    justify-self: flex-end;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}
.splashPage{
    height: 100%;
    background-image: url(../assets/images/design.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #262626;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    font-family:"superior-title";

}

#splash{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 50%;
}