@import url(https://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css2?family=Playwrite+HR+Lijeva:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand&family=Playwrite+HR+Lijeva:wght@300&display=swap);

input{
    color: white; 
}

img {
    width: 500px;
    border-radius: 5%;
}

#modal-image {
  width: 400px;
    border-radius: 5%;
}

html {
  height: 100%; 
  margin: 0; 
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background: url(foodBanner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    /* margin: auto; */
    background-color: black;
}


h1{
    background-color: rgb(255, 255, 255);
    width: 500px;
    text-align: center;
    justify-content: center;
    color: rgb(31, 83, 156);
    flex: center;
    display: flex;
    font-size: 46px; 
    font-family: "Playwrite HR Lijeva", cursive;
}

body {

  color: rgb(31, 83, 156); 
    /* text-align: right; */
    /* font-family: 'Orbitron'; */


    /* margin: auto; */
}

button{
  /* background: url(texture7.png); */
  background-color: rgba(212, 186, 187, 0.723);
    color: rgb(31, 83, 156); 
    text-align: center;
    font-family: "Edu AU VIC WA NT Hand", cursive;
    /* font-size: 20px;  */
    /* position: absolute; */
    /* padding: 70px 70px; */
    /* display: inline-block; */
    width: 550px;
    height: 680px;
    gap: 10px; 
    border-radius: 1%;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

#recipe1Name{
  font-size: 30px;
}
#recipe2Name{
  font-size: 30px;
}
#recipe3Name{
  font-size: 30px;
}

button:hover{
    background-color: rgba(212, 186, 187, 0.982);
    /* box-shadow: 1px 1px 0 px rgba(0,0,0,.9); */
    /* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */
    cursor: zoom-in;
}

button:active{
    background-color: rgb(98, 123, 149);
    transition: 50ms linear;
 
}

.modal {
  color: rgb(31, 83, 156); 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(213, 195, 189, 0.684);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
  }

.modal-content {
    /* background: url(texture7.png); */
    background-color: rgba(213, 195, 189, 0.723);
    font-size: 24px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: rgb(31, 83, 156); 
    width: 50%;
    height: 90%;
    justify-content: center;
    align-items: center;
    border-radius: 2%;
    overflow-y: auto;
  }

  .modal-content:hover {
    background-color: rgb(213, 195, 189);
  }

  .hidden {
    display: none;
  }

  .material-symbols-outlined {
    position: absolute;
    left: 49%;
    top: 15px;
    /* right: 10px; */
    font-size: 24px;
    cursor: pointer;
    align-items: left;
  }

  .material-symbols-outlined:hover{
    background-color: rgb(89, 103, 128);
  }

  .material-symbols-outlined:active{
    background-color: rgb(191, 209, 241);
    color: black;
  }

  #submit{
    /* background: url(texture7.png); */
    background-color: rgb(60, 69, 84);
    color: white; 
    text-align: center;
    font-family: 'Orbitron';
    width: 150px;
    height: 60px;
    gap: 10px; 
    border-radius: 5%;
  }

  #submit:hover{
    background-color: rgb(21, 26, 35);
    /* box-shadow: 1px 1px 0 px rgba(0,0,0,.9); */
    /* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */
    cursor: zoom-in;
}

#submit:active{
    background-color: black;
    transition: 50ms linear;
}