.sidebar-home-wrapper {
  display: flex;
  height: 80vh;
  margin-top: 20px;
}

.sidebar-home-wrapper aside{
  margin-left: 5%;
  width: 35%;
  min-width: 365px;
}

.sidebar-home-wrapper aside p {
  font-size: 20px;
}

#sidebar {
  margin-top: 20px;
}

#home {
  background-image: url('https://res.cloudinary.com/devleg/image/upload/v1523855739/ian-dooley-331063-unsplash.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 55%;
  margin-right: 5%;
  position: relative;
  min-height: 370px;
}

.cat {
  width: 100px;
  z-index: 1;
  cursor: pointer;
}

.initial-position {
  position: absolute;
  bottom: 3%;
  left: 15%;
}

footer {
  margin-right: 5%;
  float: right;
}

footer .container {
  display: flex;
  align-items: baseline;
}

footer p {
  margin-left: 50px;
}

i {
  padding: 10px;
  font-size: 30px;
  color: black;
}

i:hover {
  color: blue;
}

#my-bag-container{
  margin-top: 30px;
  border: 2px solid gray;
  padding: 20px;
  width: 260px;
  text-align: center;
  border-radius: 10px;
  -moz-box-shadow: 0 0 10px gray;
  -webkit-box-shadow: 0 0 10px gray;
  box-shadow: 0 0 10px gray;
}

#bag-image {
  margin-left: 55px;
}

/* change cat position on drag*/
.spot {
  width: 100px;
  height: 100px;
  position: absolute;
}

#home {
  display: flex;
  flex-wrap: wrap;
}

/* style my bag */
#items-in-bag{
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  max-height: 250px;
}

/* food in my bag*/
.in-bag {
  border: 0;
}
.to-feed {
  border: 2px solid #F7DC6F;
  -moz-box-shadow: 0 0 10px #F7DC6F;
  -webkit-box-shadow: 0 0 10px #F7DC6F;
  box-shadow: 0 0 10px #F7DC6F;
}

#empty-bag-warning {
  width: 100%;
  text-align: center;
}

/* pop-up windows */
.pop {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 45%;
  width: 45%;
  padding: 20px;
  border-radius: 20px;
  border: 2px solid #F7DC6F;
  -moz-box-shadow: 0 0 10px #F7DC6F;
  -webkit-box-shadow: 0 0 10px #F7DC6F;
  box-shadow: 0 0 20px #F7DC6F;
  background-color: white;
  font-size: 16px;
}

.hide {
  display: none;
}

#small {
  font-size: 16px;
  line-height: 25px;
}

/* welcome modal */
#welcome-modal {
  display: none;
}

#welcome-modal.is-open {
  display: block;
}


#welcome-wrapper {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  padding: 20px;
  background: #fff;
  z-index: 100;
  border-radius: 5px;
  border: 1px solid #000;
  font-size: 20px;
}