/*home screen background */
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
}


/*header where logo and address & hours are */
header {
    background-color: #000000;
     
}

/*logo mods */
.logo {
    position: absolute;
    width: 20%;
    bottom: 59%;
    left: 50%;
    transform: translateX(-50%);
}

/*animation for user options*/
@keyframes dropDown {
    0%{
        opacity: 0;
        transform: translateY(-500%);
    }
    100%{
        opacity: 1;
        transform: translateX(-50%);
        bottom:20%;
        left: 50%;
    }
}

/*-------user options--------*/
nav {
    font-family: "raleway", sans-serif;
    font-weight: 900;
    font-style: normal;
    position: fixed;
    text-align: center;
    animation: dropDown 1.50s ease forwards;
  
   
    
}

nav .nav-link-menu{
    color: #ffffff;
    font-size: 35px;
    text-decoration: none;
    display: block;
    margin-bottom: 25px;


}
nav .nav-link-ON{
    text-decoration: none;
    padding: 3%;
    color: white;
    font-size: 35px;
    background: #f0201c;
    border-radius: 30px;
    display: block;
    margin-bottom: 25px;

}
/*----code for phone number which paired with order now button*/
#number{
    color:#ffffff;
    position: fixed;
    bottom: 13%;
    left: 44%;
    font-size: 150%;
    
}
nav .nav-link{
    text-decoration: none;
    font-size: 35px;
    color: white;
    display: block;
    margin-bottom: 25px;
    
    
}

nav .nav-link:active{
    color: #8b0000;
}

nav .nav-link-menu:active{
    color: #8b0000;
}
/*-------------*/


/*-----Ten Japan Title */
h1{
    font-size: 56px;
    font-family: "raleway", sans-serif;
    color: white;
    position: fixed;
    top: 5%;
    left: 5%;
    font-weight: 900;
}



/*------Phone number-----*/
.hidden {
    display: none;
}

#phone-number {
    margin-top: 20px;
    font-size: 18px;
}


/*-----Address section*------*/ 
#Add-Header{
    font-size: 32px;
    font-family: "raleway", sans-serif;
    color: white;
    position: fixed;
    top: 10%;
    right: 15%;
}
#add-button{
    position: fixed;
    width: 2%;
    top: 15%;
    right: 23.5%;
    cursor: pointer;
}
#add-box{
    list-style-type: none;
    display: none;
    position: fixed;
    top: 19%;
    right:12%;
    font-family: "raleway", sans-serif;
    font-weight: bold;
    font-size: 150%;
    color: white;
    border: none;

}
#add-exit {
    font-family: "raleway", sans-serif;
    font-weight: bold;
    font-size: 90%;
    margin-top: 10px;
    border-radius: 10%;
    border: none;
    cursor: pointer;
    background-color: #ffffff;
}


/*animation for hours */
@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px; /* Adjust based on content height */
        opacity: 1;
    }
}

/* Keyframe animation for slide up */
@keyframes slideUp {
    from {
        max-height: 500px; /* Adjust based on content height */
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

/*-------hours Section--------*/

#Hours-Header{
    font-size: 32px;
    font-family: "raleway", sans-serif;
    color: white;
    position: fixed;
    top: 10%;
    right: 5%;
}
#pngButton{
    position: fixed;
    top: 15%;
    right: 11.5%;
    cursor: pointer;
}
#hoursBox {
    list-style-type: none;
    visibility: hidden;
    position: fixed;
    top: 19%;
    right:2%;
    font-weight: bold;
    font-family: "raleway", sans-serif;
    font-size: 150%;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    color: white;
    border: none;

}
#hoursBox.show {
    display: block;
    visibility: visible;
    animation: slideDown 0.5s forwards;
}

#hoursBox.hide {
    animation: slideUp 0.5s forwards;
    visibility: hidden;
}
#hoursBox li {
    margin-bottom: 10px; /* Add margin-bottom to create spacing between each day */
}


#exit {
    font-family: "raleway", sans-serif;
    font-weight: bold;
    font-size: 90%;
    margin-top: 10px;
    border-radius: 10%;
    border: none;
    cursor: pointer;
    background-color: #ffffff;


/*Mobile conversions below*/

}
@media only screen and (max-width: 600px) {
    /*make title smaller*/
    h1{
        display: none;
    }
    /*make nav section smaller and drop lower*/
    nav {
        font-family: "raleway", sans-serif;
        font-weight: 900;
        position: fixed;
        top: 45%;
        text-align: center;
        animation: dropDown 1.50s ease forwards;
      
       
        
    }
    
    nav .nav-link-menu{
        color: #ffffff;
        font-size: 27px;
        text-decoration: none;
        display: block;
        margin-bottom: 25px;
    
    
    }
    nav .nav-link-ON{
        text-decoration: none;
        padding: 4%;
        color: white;
        font-size: 27px;
        background: #f0201c;
        border-radius: 30px;
        display: block;
        margin-bottom: 25px;
    
    }
    nav .nav-link{
        text-decoration: none;
        font-size: 27px;
        color: white;
        display: block;
        margin-bottom: 25px;
        
        
    }
    
    nav .nav-link:active{
        color: #8b0000;
    }
    
    nav .nav-link-menu:active{
        color: #8b0000;
    }
    /*make logo larger*/
    .logo{
        position: absolute;
        width: 60%;
        bottom: 60%;
        left: 50%;
        transform: translateX(-50%);
    }
    /*hours smaller */
    #Hours-Header{
        display: none;
    }
    #pngButton{
        display: none;
    }
    #Add-Header{
        display: none;
    }
    #add-button{
        display: none;
    }


    /*phone number */
   
}