week2.css

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
      padding: 0;
      background-color: #b9b4f5;
      border: 5px solid rgb(66, 110, 213);
      opacity: 1.5;
      background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDzNiUzinH7crCqmla2BOcyMjKcptBSY52fw&usqp=CAU');
      background-repeat: no-repeat;
      background-attachment: fixed;
      
      background-size: 100% 100%;
      color: #FFFFFF;
      
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #1a1f60;
    color: white;
  }

  @media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.333%);
    }
    
    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}