body{
    background-color: beige;
}

.container {
  width: 90%;
  max-width: 850px;
  margin: 30px auto;
  background: #fff4fc;
  border-radius: 28px;
  padding: 25px;
  border: 2px solid #f5cce0;
}

h1{
    text-align: center;
    font-family: 'Kalam', cursive;    color:rgb(105, 200, 241);
    margin-top: 20px;
    font-family: 'Cherry Bomb One';
}

h2{
    color:rgb(195, 145, 231);
    border-color: azure;
    border-radius: 2px;
    text-align: center;
}

.slideshow-container{
  max-width: 600px;
  height: 400px;
  position: relative;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px #999; 
}

.slide{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade{
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade{
    from { opacity: 0.4}
    to{opacity: 1}
}

li{
    font-size: larger;
    color:rgb(1, 0, 2);
}

p{
    color:rgb(113, 142, 142);
}

.container {
    max-width: 800px;  
    margin: 0 auto;  
    padding: 20px;     
}

li::before {
    content: "🌸"; 
    color: #4C52DE; 
    font-size: 0.9em;
    margin-right: 10px;
    display: inline-block;
}

/* navbar */

#bars {
     list-style-type: none;
     background-color: #ffa7c7;
     overflow: hidden;
}

li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

li a:hover{
   color: #A2D2FF;
}

a {
   color: #eef1c1;
}

main li {
  display: list-item;
  padding: 0.2em 0;
}

li {
  display: inline-block;
}

main li {
  display: list-item;
  padding: 0.2em 0;
}

.mini-container{
    width: 90%;
  max-width: 850px;
  margin: 30px auto;
  background: #f0d7fb;
  padding: 25px;
  border-radius: 28px;
  border: 2px solid #f0d7fb;
}

.images{
  max-width: 600px;
  height: 400px;
  position: relative;
  margin: auto;
  width: 90%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px #777777; 
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}