@import url('https://fonts.googleapis.com/css2?family=Rampart+One&family=Shadows+Into+Light&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300&display=swap');

body {
  background-image: url(https://www.wallpaperflare.com/static/749/337/189/firewatch-video-games-mountains-nature-wallpaper.jpg);
  background-size: cover;
}

.Welcome {
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 100px;
  font-family: 'Shadows Into Light', cursive;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  min-height: 70vh;
  font-family: 'Urbanist', sans-serif;
}

.container-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  min-height: 80vh;
  font-family: 'Urbanist', sans-serif;
}


.btn-1 {
  width: 200px;
  height: 100px;
  border: none;
  color: black;
  background-color: #ad00ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #52ff00;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
  text-decoration: none;
  word-spacing: 4px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.btn-2 {
   width: 200px;
  height: 170px;
  border: none;
  color: black;
  background-color: #ad00ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #52ff00;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
  text-decoration: none;
  word-spacing: 4px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.btn-3 {
    width: 700px;
  height: 100px;
  border: none;
  color: black;
  background-color: #ad00ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #52ff00;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
  text-decoration: none;
  word-spacing: 4px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.btn-1:hover {
  box-shadow: inset 300px 0 0 0 #52ff00;
  cursor: pointer;
  color: white;
}

.btn-2:hover {
   box-shadow: inset 300px 0 0 0 #52ff00;
  cursor: pointer;
  color: white;
}

.btn-3:hover {
  box-shadow: inset 700px 0 0 0 #52ff00;
  cursor: pointer;
  color: white;
}

.feedbacks {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  font-family: 'Urbanist', sans-serif;
  color: #ad00ff;
  cursor: pointer;
}

.cps-56 {
  color: #52ff00;
  text-decoration: none;
}

.cps-56:hover {
  color: #ad00ff;
}