body{
    background-image: url(table2.jpg);
    background-size: cover;
}

.pizzaquestion{
    justify-self: center;
    margin-top: 5vh;
    color: white;
    background-color: darkred;
    font-size: 4rem;
    box-shadow: 5px 10px 15px black;
}

button{
    border: none;
    background: none;
}

.pizza-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25vh;
}

.pizza-box {
    margin: 0;
    position: relative;
    filter: drop-shadow(0 0 40px rgba(0,0,0));
}

#pizza-box-closed,
#pizza-box-opened {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.7s;
    height: 40vh;
    width: 40vw;
    margin-left: -8vw;
}

#pizza-box-opened{
    opacity: 0;
}

.pizza-box:hover #pizza-box-opened {
    opacity: 1;
}

.pizza-box:hover #pizza-box-closed {
    opacity: 0;
}

#pizzas{
    position: relative;
    justify-self: center;
}

#pizzas img {
    position: absolute;
    top: 0;
    left: 0;
    height: 50vh; 
    width: 50vw;
    object-fit: contain;
    margin-left: -8vw;
    opacity: 0;
    pointer-events: none;
}

.notes{
  position: fixed; 
  top: 0;          
  height: 95vh;
  width: 30vw;
  min-width: 100px;
  background-color: white;
  margin-right: auto;
  margin-left: 0;
  overflow-y: scroll;
}

.notes p{
  margin-left: 15px;
  margin-right: 15px;
}

.headofnote{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.notes h1{
    color: red;
    margin-left: 15px;
}

.notes h2{
  margin-left: 15px;
  margin-bottom: 10px;
}

.objectdescription{
  margin-top: 80px;
}

@media screen and (max-width: 1280px){
.notes{
  position: absolute;
  z-index: 1;
  width: 80vw;
  margin-left: 50px;
  margin-top: 100vh;
  }

#pizza-box-closed,
#pizza-box-opened {
    width: 500px;
}

.pizza-box {
    margin-right: 95vw;
    margin-bottom: 60vh;
}
}