@import url('./root.css');

body{
  font-size: 1.25rem;
}

form{
  align-items: center;
  display: flex;
  justify-content: center;
}
form > button{
  font-size: 1.25rem;
}

header{
  align-items: center;
  display: flex;
  gap: 2rem;
  height: 10vh;
  justify-content: center;
}
header > div{
  border-radius: 15px;
  padding: 0.5rem;
}
header > img{
  cursor: pointer;
  width: 2rem;
}

main{
  align-items: center;
  display: flex;
  height: min(70vh, 90vw);
  justify-content: center;
  padding: 5vh 5vw;
  /* background-color: aquamarine; */
}
main > div{
  aspect-ratio: 1;
  background-color: black;
  height: 100%;
}

nav{
  align-items: center;
  display: flex;
  gap: 2rem;
  height: 10vh;
  justify-content: center;
}
nav > button{
  cursor: pointer;
  font-size: 1.25rem;
}
nav select{
  font-size: 1.25rem;
}

.square{
  align-items: center;
  aspect-ratio: 1;
  background-color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.square > img{
  width: 90%;
}

.table{
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
}

::backdrop {
  background-image: linear-gradient(
    45deg,
    dodgerblue,
    aliceblue
  );
  opacity: 0.75;
}