.slide-container .prev,
.slide-container .next {
  cursor: pointer;  position: absolute;  top: 50%;  width: auto;  margin-top: -22px;  padding: 16px;  color: white;
  font-weight: bold;  font-size: 18px;  transition: all 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;}

.slide-container .prev:hover,
.slide-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);  color: white;}

.slide-container .prev {
  left: 2px;}

.slide-container .next {
  right: 2px;}

.dots-container {
  display: flex;  justify-content: center;  align-items: center;  padding: 10px; z-index: 100; margin-top: -50px; position: relative;}

.dots-container .dot {
  cursor: pointer;  margin: 5px;  width: 20px;  height: 20px;  color: #333;  border-radius: 50%;  background-color: #dfd6ce;}

.dots-container .dot.active {
  border: 3px solid #fff;}

* {
  padding: 0;  border: 0;  }

body {
  height: 100%;
/*   background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); */
}

body h1 {
  text-align: center;}

.slide-container {
  display: flex;  justify-content: center;  align-items: center;  margin: auto;  position: relative;}

.slide-container .slide {
  display: none;  width: 100%;}

.slide-container .slide.fade {
  animation: fade 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;}

.slide-container .slide img {
  width: 100%;}