:root {
  /* Primary */
  --scissors-gradient: linear-gradient(to right, hsl(39, 89%, 49%), hsl(40, 84%, 53%));
  --paper-gradient: linear-gradient(to right, hsl(230, 89%, 62%), hsl(230, 89%, 65%));
  --rock-gradient: linear-gradient(to right, hsl(349, 71%, 52%), hsl(349, 70%, 56%));
  --lizard-gradient: linear-gradient(to right, hsl(261, 73%, 60%), hsl(261, 72%, 63%));
  --cyan: linear-gradient(to right, hsl(189, 59%, 53%), hsl(189, 58%, 57%));

  /* Neutral */
  --dark-text: hsl(229, 25%, 31%);
  --score-text: hsl(229, 64%, 46%);
  --header-outline: hsl(217, 16%, 45%);

  /* Background */
  --radial-gradient: radial-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%));

  /*Misc*/
  --game-button-gradient: var(--scissors-gradient);
  --game-button-height:150px;
  --game-button-width:150px;
}

@font-face {
  font-family: 'Barlow_Semi_Condensed';
  src: url(./fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Regular.ttf);
}

body {
  display: grid;
  container: body /inline-size;
  max-width: 100svw;
  min-height: 100svh;
  margin: 0;
  background: var(--radial-gradient);
  font-family: 'Barlow_Semi_Condensed';
  align-content: baseline;
  justify-items: center;
  color: var(--dark-text);
  z-index: -2;
  position: relative;
  font-weight: 600;
}

header {
  box-sizing: border-box;
  height: 150px;
  padding: 25px;
  container: header / inline-size;
  width: 100%;
  max-width: 1440px;
}

main {
  display: grid;
  width: 100svw;
  max-width: 1440px;
  max-height: 1152px;
  place-items: center;
  container: main / inline-size;
  position: relative;
}

div[class="attribution"] {
  color: white;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
}

@media (width <1000px) {
  :root{
    --game-button-height: 50px;
    --game-button-width: 50px;
  }
}
@container(inline-size < 1000px){
  main{
    height: 650px;
    width: 375px;
  }
}