@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto, Verdana, Arial, sans-serif;
  background-color: #9a8cbd;
  background-image: url(../img/wallpaper.jpg);
  background-size: cover;
  background-position: right;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.25vw;
  width: 33vw;
  height: 33vw;
}

li {
  color: #420ab6;
  list-style: none;
  margin: 0;
  padding-bottom: 2vw;
  padding-top: 2vw;
  font-size: 5vw;
  text-align: center;
  vertical-align: bottom;
  background-color: rgba(202, 109, 190, 0.5);
  border: solid 2px #fff;
  border-radius: 10px;
  width: 11vw;
  height: 11vw;

  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  text-align: center;
  color: #420ab6;
  padding-bottom: 10px;
  font-size: 3vw;
}

h3 {
  text-align: center;
  color: #A00;
  font-size: 0.3em;
}

button {
  font-family: Roboto, Verdana, Arial, sans-serif;
/*   position: relative; */
  text-align: center;
  height: 3vw;
  width: 32vw;
  color: #420ab6;
  font-size: 1.7vw;
  font-weight: bold;
  background-color: rgba(154, 140, 189, 0.35);
  margin: 0.6vw 0 0 0;
  padding: 0;
  border: solid 2px #fff;
  border-radius: 10px;
}