@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');

* {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  color: #fff
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #131419
}

.container .logo {
  width: 40%;
  height: 10vh;
  margin-bottom: 5vh
}

.container .description {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.8;
  max-width: 90%;
  text-align: center;
}

.apps {
  padding-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5vh;
  width: 100%;
  flex-direction: column;
}

.app {
  min-width: 10%;
  padding: 0 2.5%;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #c2cd40;
  border-radius: 24px;
  color: rgb(20 22 27/1);
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 2.5vh;
  transition: box-shadow .3s linear;
  text-wrap: nowrap;
}

.app svg {
  width: 4.5vh !important;
  height: 4.5vh !important;
  fill: rgb(20 22 27/1);
}

.app:hover {
  --tw-shadow: 0px 2px 15px #c2ce40;
  --tw-shadow-colored: 0px 2px 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1000px) {
  .app {
    width: 35%;
  }
}