html {
  font-size: 62, 5%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 1.6rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  background: #7d7e7d; /* Old browsers */
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* FF3.6-15 */
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(
    ellipse at center,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );
}
.hidden {
  display: none !important;
}
#main {
  width: 100%;
  text-align: right;
  height: auto;
}
#fridge {
  position: relative;
  margin: 0 auto;
}
#heading {
  position: absolute;
  top: 1%;
  left: 2%;
  width: 36%;
  height: 30%;
  text-align: center;
  box-sizing: border-box;
  overflow: auto;
  font-size: 0.9rem;
}
#heading > p {
  color: rgb(255, 254, 254);
  text-shadow: 5px 5px 5px black;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
  text-align: left;
}
#heading > h2 {
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.452);
  color: rgb(235, 235, 235);
  text-shadow: 1px 1px 5px black;
}
#heading > h2 > span {
  font-size: 1.8rem;
  text-decoration: underline;
  text-shadow: 0 0 30px white;
}
#showrecipesmenu {
  display: flex;
  border-bottom: 1px solid black;
  box-sizing: border-box;
  height: 150px;
  align-items: center;
}
#showrecipesmenu:hover {
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.411);
  transition: 0.3s;
  cursor: pointer;
}
#showrecipesmenu > img {
  height: 60%;
  margin: 20px;
  box-shadow: 5px 5px 10px black;
}
#showrecipesmenu > p {
  text-align: left;
  font-size: 1rem;
  color: black;
  text-shadow: 1px 1px 40px black;
  padding: 10px;
}

/* UNUTAR FRIZIDERA */

#openfridge {
  height: 56.5%;
  width: 12%;
  position: absolute;
  top: 10.5%;
  left: 37.5%;
  cursor: pointer;
}
#openfridge:hover {
  background: linear-gradient(
    90deg,
    rgba(253, 0, 0, 0) 0%,
    rgba(255, 0, 0, 0.729) 50%,
    rgba(255, 0, 0, 0) 100%
  );
  box-sizing: border-box;
  border-radius: 10px;
  transition: 0.1s;
}
#showrecipe > input {
  width: 40%;
  margin: 15px 25px;
  padding-top: 10px;
}
.plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: cursive;
  height: 45px;
  width: 45px;
  position: absolute;
  border: 2px dotted black;
  border-radius: 7px;
  font-size: 1.7rem;
  font-weight: bolder;
  color: darkgray;
  box-shadow: 1px 1px black;
  text-shadow: 1px 1px black;
  box-sizing: content-box;
}
.plus > img {
  height: 45px;
  width: 45px;
  border-radius: 5px;
}
.plus:hover {
  border: 3px solid black;
  color: black;
  cursor: pointer;
}
#plusmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#choose {
  width: 100%;
  position: absolute;
  text-align: center;
  color: white;
  text-shadow: 3px 3px 3px black;
  font-size: 2rem;
}
#showrecipe {
  width: 49%;
  height: 90%;
  position: absolute;
  top: 20px;
  right: 20px;
  overflow: auto;
}
input[type="checkbox"] {
  display: none;
}
label {
  display: inline;
}
.plus > img {
  height: 100%;
  width: 100%;
}
:checked + .shad {
  border: 5px solid rgba(255, 0, 0, 0.76);
  box-shadow: 0 0 20px red;
}
.hover:hover {
  cursor: pointer;
  box-shadow: 0 0 20px 7px red;
}
.shad {
  box-shadow: 0 0 20px -5px rgba(0, 255, 0, 0.473);
}
.shad > img {
  background-color: white;
}
#searching {
  width: 100%;
  text-align: center;
  margin-top: 100px;
}
#imhungry {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 15%;
  height: 5.5%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  color: rgb(255, 255, 255);
  font-weight: bolder;
  border: 2px solid maroon;
  box-shadow: 0 0 10px maroon;
  left: 6.5%;
  top: 9%;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 3px black;
}
#getrecipe {
  top: 9%;
  left: 73.5%;
  position: absolute;
  width: 18%;
  height: 5.5%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  line-height: 250%;
  color: rgb(255, 255, 255);
  font-weight: bolder;
  border: 2px solid maroon;
  box-shadow: 0 0 10px maroon;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 3px black;
}
#imhungry:hover,
#getrecipe:hover {
  background-color: black;
  border: 3px solid red;
  box-shadow: 0 0 15px red;
  cursor: pointer;
  color: red;
}
#items {
  width: 30%;
  background-color: rgba(255, 255, 255, 0.726);
  position: absolute;
  text-align: center;
  overflow: auto;
  border: 1px solid rgb(0, 0, 0);
}
#searchdiv {
  width: 100%;
  display: flex;
  padding: 1%;
  justify-content: space-around;
}
#searchdiv > button {
  background-color: rgba(0, 0, 0, 0.801);
  color: white;
  width: 20%;
  font-weight: bolder;
}
#searchdiv > button:hover {
  color: black;
  background-color: rgb(235, 235, 235);
  border: 1px solid black;
  cursor: pointer;
}
#searchgroceries {
  width: 80%;
  padding: 5px;
  text-align: center;
  border: 1px solid black;
  height: 40px;
}
#groceries > * {
  display: flex;
  justify-content: space-evenly;
}
#groceries > #food {
  border-top: 1px solid black;
  height: 60px;
  padding: 7px;
}
.searchp {
  text-align: center;
  width: 100%;

  line-height: 200%;
}

#food > img {
  width: 50px;
}
#food:hover {
  background-color: rgba(169, 169, 169, 0.616);
  cursor: pointer;
}
/* ZATVOREN FRIZIDER */
#error {
  color: red;
  padding-bottom: 10px;
  text-shadow: 0px 0px 10px red;
}
#logoutfridge {
  height: 3.7%;
  width: 24%;
  position: absolute;
  top: 7.9%;
  left: 46%;
  background-color: rgba(0, 0, 0, 0.507);
  border-radius: 5px;
  color: white;
  text-shadow: 2px 2px 2px black;
  font-weight: bold;
  border-top: 4px solid transparent;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#logoutfridge:hover {
  background-color: rgb(0, 0, 0);
  border: 4px solid maroon;
  cursor: pointer;
  color: red;
  box-shadow: 0 0 15px red;
}
#formheading {
  font-size: 1.5rem;
  text-shadow: 1px 1px 5px black;
  border-radius: 5px;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
  width: 95%;
}
#formheading > a {
  padding-left: 6%;
  padding-right: 6%;
  text-decoration: none;
  color: white;
  width: 50%;
  height: 100%;
  padding-bottom: 10px;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#formheading > a:hover {
  background-color: rgba(0, 0, 0, 0.678);
  color: white;
}
.left {
  background: rgb(2, 0, 36);
  background: -moz-linear-gradient(
    90deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  background: linear-gradient(
    90deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#ff0000",GradientType=1);
}
.right {
  background: rgb(2, 0, 36);
  background: -moz-linear-gradient(
    270deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  background: -webkit-linear-gradient(
    270deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  background: linear-gradient(
    270deg,
    rgb(216, 0, 0) 0%,
    rgba(216, 0, 0, 0.596) 40%,
    rgba(216, 0, 0, 0.596) 49%,
    rgb(0, 0, 0) 50%,
    rgba(207, 0, 0, 0.192) 51%,
    rgba(207, 0, 0, 0.192) 60%,
    rgba(255, 0, 0, 0.14047625886292014) 71%,
    rgba(255, 0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#ff0000",GradientType=1);
}
#form {
  position: absolute;
  top: 1%;
  right: 2%;
  width: 49%;
}
.box {
  width: 100%;
  text-align: center;
  color: black;
}
.box a {
  color: black;
  display: inline-block;
  text-decoration: none;
}
.box a:hover {
  cursor: pointer;
}
.box input[type="text"],
.box input[type="password"] {
  border: 0;
  background: none;
  display: block;
  margin: 0 auto;
  margin-bottom: 5%;
  margin-top: 2.5%;
  text-align: center;
  border: 2px solid black;
  padding: 5%;
  width: 70%;
  outline: none;
  color: black;
  transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus {
  width: 90%;
  border-color: #2ecc71;
}
.box input[type="button"] {
  border: 0;
  background: none;
  display: inline-block;
  margin: 5%;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 5% 15%;
  outline: none;
  color: black;
  transition: 0.25s;
  cursor: pointer;
}
.box input[type="button"]:hover {
  background: #2ecc71;
  cursor: pointer;
}