/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  overflow: hidden;
}

.animated-grid {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fullsize-page-with-card #color-background {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.fullsize-page-with-card #card {
  pointer-events: none;
  position: relative;
  margin: 15vh 15vw 0;
  width: 70vw;
  height: 70vh;
}

.neon-animated-pages > .fullsize-page-with-card.iron-selected {
  display: block;
}

.neon-animated-pages > .fullsize-page-with-card {
  display: none;
}

.tile {
  color: var(--palette-common-black);
  font-weight: var(--typography-font-weight-bold);
  font-size: 20px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 6);
  height: calc(100% / 3);
}

.tile * {
  pointer-events: none;
}

.tile:nth-of-type(1) {
  width: calc(100% / 3);
  height: calc(100% / 3 * 2);
}

.tile:nth-of-type(4) {
  width: calc(100% / 3);
}

.tile:nth-of-type(5) {
  width: calc(100% / 3);
  height: calc(100% / 3 * 2);
}

.tile:nth-of-type(8) {
  width: calc(100% / 3);
  height: calc(100% / 3);
}

.tile:nth-of-type(9) {
  position: absolute;
  top: calc(100% / 3 * 2);
  left: 0;
  width: calc(100% / 6);
  height: calc(100% / 3);
}

.tile:nth-of-type(10) {
  position: absolute;
  top: calc(100% / 3 * 2);
  left: calc(100% / 6);;
  width: calc(100% / 6);
  height: calc(100% / 3);
}