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

img {
max-width: 100%;
height: auto;
}

body {
margin: 0px;
font-family: manrope, sans-serif;
background-color: #000;
color: #fff;
}

/* home */

#page {
padding: 30px;
}

canvas {
width: 100%;
height: 100%
}

h1 {
font-weight: 800;
text-align: center;
margin: 3em 0;
}

#explain {
column-width: 400px;
column-gap: 30px;
max-width: 1200px;
margin: 3em auto;
}

#play {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-gap: 30px;
}

#play figure {
border: 1px solid #666;
}

/* interior */

#page_react {
font-size: 0.875rem;
display: grid;
grid-template-rows: 1fr auto;
height: 100vh;
}

#page_react canvas {
order: 1;
}

footer {
display: flex;
padding: 20px;
justify-content: space-between;
align-items: baseline;
order: 2;
}

#info {
display: flex;
}

#info a {
color: #fff;
text-decoration: none;
}

#info a:hover {
text-decoration: underline;
}

a {
  color: hotpink;
}

a:visited {
  color: hotpink;
}

.ppp {
color: #ccc;
margin-left: 20px;
}

#tres-d {
padding-left: 40px;
background: url(img/cardboard.svg) no-repeat left center;
background-size: auto 20px;
opacity: 0.5;
transition: 0.5s opacity;
}

#tres-d.on, #tres-d:hover {
opacity: 1;
transition: 0.5s opacity;
cursor: pointer;
}

#tres-d.on:hover {
opacity: 0.5;
transition: 0.5s opacity
}


.about {}

.ppp {}