@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@700&display=swap');

/**
    The margin for the top of the page
*/
*{
    margin: 0px;
    padding: 0px;
}

/**
    Setting up the skeleton of home page
*/
html {
    background-color: white;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    overflow: hidden;
}

/**
    The header, the top part of the page which include the name of 
    the app
*/
.header {
    font-family: 'Bebas Neue', cursive;
    background-color: rgb(31, 127, 165);
    height: 100%;
    padding-bottom: calc(4vmin);
}

.header h1 { 
    text-align: center;
    font-size: calc(5vmin);
    display: flex;
    justify-content: center;
}

#login, #signup, #logout {
    font-family: 'Lato', sans-serif;
    float: right;
    margin-top: 0px;
    padding: calc(.85vmin);
    width: calc(5%);
    background-color: rgb(31, 127, 165);
    color: black;
    font-size: calc(1.8vmin);
    border: none;
    border-left: none; /* Prevent double borders */
    cursor: pointer;   
}

#login:hover, #signup:hover, #logout:hover {
    background-color: lightblue;
}

/**
    The login and password div
*/
#login-div form, #signup-div form {
    display: flex;
    flex-direction: column;
    float: right;
}

#login-div form input, #signup-div form input {
    padding: calc(1vmin);  
    border: none; 
}

img {
    float: right;
    margin-left: 5px;
    margin-right: 5px;
}

.credit {
    font-size: 10px;
}

/**
    The buttons to navigate to home and saved list
*/
.topnav {
    font-family: 'Lato', sans-serif;
    width: 100%;
    margin-top: calc(4.5vmin);
}

#profile {
    cursor: pointer;
}

/**
    Styling of the link buttons
*/
#active, #saved-list, #analysis {
    margin-right: calc(50vmin);
    background-color: rgb(16, 184, 214);
    color: black;
    text-decoration: none;
    padding: calc(1.5vmin);
    border-radius: 20px;
    border: none;
    cursor: pointer;
}

#active:hover, #saved-list:hover, #analysis:hover {
    background-color: lightblue;
}

#active {
    margin-left: calc(70vmin);
}

/**
    The div element for the text fields
*/
.input-items {
    width: 100%;
    font-size: calc(4vmin);
    background-color: white;
    margin-top: calc(7vmin);
    height: 100%;
    margin-left: 0px;
    display: flex;
    justify-content: center;
}

/**
    Text fields for food name and calories
*/
#food-name, #calories {
    font-family: 'Cuprum', sans-serif;
    width: calc(22%);
    font-size: calc(1.8vmin);
    text-indent: calc(3vmin);
    cursor: text;
    padding: calc(1.3vmin);
    border: none;
    float: left;
    background: rgb(219, 216, 216);
    color: black;
  }

#calories, #add-button {
      margin-left: calc(1vmin);
}

.analysis-div {
    font-size: calc(2vmin);
    height: 100%;
    margin-left: 0px;
    display: flex;
    justify-content: center;
    text-align: center;
}

#analysis {
   margin-right: 0px;  
}

/**
    Add button to the list that is below the headers
*/
#add-button {
    font-family: 'Lato', sans-serif;
    float: left;
    width: calc(5%);
    padding: calc(1.3vmin);
    background: rgb(94, 92, 92);
    color: white;
    font-size: calc(1.8vmin);
    border: none;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
  }
  
#add-button:hover {
    background: rgb(66, 134, 212);
  }

h2 {
    font-family: 'Lato', sans-serif;
    font-size: calc(2vmin);
    justify-content: right;
    display: flex;
    position: relative;
    padding-left: calc(166vmin);
    margin-top: calc(2vmin);
}

/**
  The table header div
*/
.table-header {
  margin: auto;
  width: 75%;
  background-color: rgb(29, 114, 211);
  padding: 10px;
  display: flex;
  justify-content: center;
  border-radius: calc(20px);
}

.table-header h1 {
    width: 50%;
    text-align: center;
}

/**
    The div for the list of items
*/
#list-display, #saved-item-list {
    margin: auto;
    padding-bottom: calc(1vmin);
    width: 76%;
    margin-top: calc(2.5vmin);
}

div#list-display ul div, div#saved-item-list ul div {
    width: 100%;
    display: flex;
    background-color: rgb(77, 147, 226);
    border-radius: calc(20px);
    margin-bottom: calc(0.8vmin);
    color: black;
}

div#list-display ul div:hover, div#saved-item-list ul div:hover {
    background-color: lightblue;
}

#list-items, #saved-ul, #key-ul {
    width: calc(100%);
    font-size: calc(2.7vmin);
    margin-top: calc(1.5vmin);
}

#key-ul {
    text-align: center;
}

li {
    padding: calc(1.5vmin);
    display: flex;
    justify-content: center;
    width: 50%;
}

/**
    form for the save button to save list to database
*/
.save-form  {
    width: 100%;
    font-size: calc(4vmin);
    height: 100%;
    margin-left: 0px;
    display: flex;
    justify-content: center;
}

#save-button {
    float: right;
    width: calc(5%);
    padding: calc(1.3vmin);
    background: rgb(14, 186, 230);
    color: black;
    font-size: calc(2vmin);
    border: none;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
}