html{
  scroll-behavior: smooth;
}

body{
  background-color: #7C45D6;
background-image:
url("https://c.pxhere.com/images/cc/7c/c647eb26b4042cd6e26122f0414e-1617571.jpg!d");
}
img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
 

 div {
 background-color: #946BD6;
  margin-left: 20%;
  margin-right: 20%;
  padding: 5%;
  border: 2px, solid;
  border-radius: 20px;
}
 
h1 {
  font-family: Times;
  color: #1f1e20;
  text-align: center;
}

.header {
  border: 2px, solid;
  border-radius: 20px;
}

nav {
  text-align: center;
}
.navbar {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #5CCDC9;
  justify-content: center;
  border: 1px solid;
  border-radius: 20px;
  gap: 5%;
 
}
.navbar li a{
  display: block;
  color: #660BAB;
  text-align: center;
  padding: 1% 2%;
  text-decoration: none;
 
}
.navbar li a: hover {
  background-color: #D660CC;
  border: 1px;
  border-radius: 20px;
}
.navbar li a: focus {
  outline: 1px solid ;
  inline-offset: 2px;
 
}



.back {
  background: #936CD6;
  margin-left: 20%;
  margin-right: 20%;
  font-family: Times;
   font-weight: 600%; cursor: pointer: transition: opacity .2s ease;
    padding: 1%
    
  }
  .back:hover{oracity .85}
  .back:active{transform: translateY(1px)}
  .back:focus{outline: 1px solid #936CD6; outline-offset: 1px }

.back1 {
  text-align: center;
}

div {
  background-color: #936CD6;
   margin-left: 10%;
   margin-right: 10%;
  margin-bottom: 5%;
  padding: 1% 3%;
  border: 2px, solid;
  border-radius: 20px;
 
}