section {
  display: flex;
  justify-content: space-between;
  margin-top: 1vw;
}

#Appelate {
  width: calc(100vw - 27vw);
}
#Appelate img {
  object-fit: contain;
  max-width: 99%;
  width: auto;
  height: 37vw;
  /* border: 1px solid;
  border-radius: 0.7vw; */
}

#SlideShow {
  max-width: 64vw;
  /* overflow-x: auto; */
  margin: auto;
  display: flex;
  flex-direction: column;
}

.slide {
  display: none;
}

#Notifications {
  width: calc(100vw - 73vw);
  margin-bottom: 4vw;
}

#NotificationsTitle {
  padding: 0 2vw;
  padding-top: 1vw;
  color: rgb(0, 0, 0);
  /* background-color: #f9e1cc; */
  background: #7b4397;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #dc2430, #7b4397);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    rgb(220 36 48 / 50%),
    rgb(123 67 151 / 50%)
  );
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-top: 0.2vw solid black;
  border-right: 0.2vw solid black;
  border-left: 0.2vw solid black;
  border-radius: 0.6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#NotificationsPlay,
#NotificationsPause {
  height: 2vw;
}

#NotificationsList {
  height: 35vw;
  padding-left: 1vw;
  overflow-y: scroll;
  border-bottom: 0.2vw solid black;
  border-left: 0.2vw solid black;
  border-right: 0.2vw solid black;
  border-radius: 0.7vw;
}

#NotificationsList::-webkit-scrollbar {
  display: none;
}

#NotificationsList {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

#Notifications a {
  /* text-decoration: none; */
  color: black;
}

.notification {
  margin: 2vw 0.5vw;
}

#Booklet {
  background-color: aliceblue;
  padding: 3vw 0;
}

#Booklet h2 {
  font-size: 1.2em;
}

.Book {
  display: flex;
  justify-content: center;
  width: 22vw;
  margin: 1vw 3vw;
  border: 1px solid black;
  border-radius: 8px;
}
.Book a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Book img {
  width: 20vw;
}

@media only screen and (max-width: 770px) {
  section {
    flex-direction: column;
  }

  #Appelate {
    width: initial;
  }

  #Notifications {
    width: calc(100vw - 30vw);
    margin: 3vw;
  }

  #NotificationsList {
    height: 60vw;
  }

  .notification {
    margin-right: 7vw;
    margin-bottom: 4vw;
  }

  #Appelate img {
    height: 50vw;
  }

  #SlideShow {
    max-width: initial;
  }

  .Book,
  .Book img {
    width: 35vw;
    border: none;
  }
}

@media only screen and (max-width: 370px) {
  #NotificationsList {
    height: 70vw;
  }
}