/* Import Duplicate Styles */
@import "./styles/globals.css";
@import "./styles/loading.css";
@import "./styles/unplayable.css";
@import "./styles/social-icons.css";

/* Main Title */
body
{
  background:
    url("./graphics/background.png") no-repeat fixed center / contain;
  background-color: var(--regular-brown-color);
}

main
{
  align-content: center;
  align-items: space-around;
  display: grid;
  justify-items: center;
  height: 100%;
}

#logo
{
  width: 800px; max-width: 60vw;
  margin-bottom: 40px;
}

button
{
  font: bold 1em "Ubuntu", sans-serif;
  background-color: #5F442B;
  text-transform: uppercase;
  color: #53AA84;
  padding: 12px 40px;
  border: 4px solid black;
  border-radius: 12px;
  transition: .2s ease-in-out;
  cursor: pointer;
}

button:hover
{
  transform: scale(1.07) rotate(4deg);
  background-color: #805027;
  color: #A3DDBB;
  padding: 12px 60px;
}

button:focus { outline: 0; }

#play { margin-bottom: 22px; }
#play button { font-size: 60px; }
#about button { font-size: 28px; }