first working version

styles/Home.module.css

@@ -1,122 +0,0 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer img {
-  margin-left: 0.5rem;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-  margin-top: 3rem;
-}
-
-.card {
-  margin: 1rem;
-  flex-basis: 45%;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

styles/styles.css

@@ -0,0 +1,180 @@
+:root {
+  --bg-color: #1b5e20;
+
+  --text-color: #fff;
+
+  --link-color: var(--text-color);
+  --link-color--hover: #000;
+
+  --calcard-color: #fff;
+  --calcard-bg-color: #c62828;
+  --calcard-bg-color__locked: #003300;
+
+  --door-bg-color: #4c8c4a;
+  --door-color: #fff;
+
+  --player-controls-bg-color: #1b5e20;
+
+  --door-hint-bg-color: #c62828;
+}
+
+html {
+  font-family: "Charm", cursive;
+  font-size: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 2rem 12rem;
+
+  color: var(--text-color);
+  background-color: var(--bg-color);
+
+  position: relative;
+}
+
+a {
+  color: var(--link-color);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--link-color--hover);
+  }
+}
+
+.hidden {
+  position: absolute;
+  left: -5000px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+
+  h1 {
+    flex-grow: 1;
+    font-size: 3rem;
+  }
+
+  .yay-gif-video {
+    max-height: 12rem;
+    max-width: 20rem;
+  }
+}
+
+.cal {
+  padding-left: 0;
+
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(4, 6vw);
+  grid-gap: 2rem;
+
+  .calcard {
+    color: var(--calcard-color);
+    background-color: var(--calcard-bg-color);
+
+    cursor: pointer;
+
+    border-radius: 6px;
+    box-shadow: 2px 2px 8px 3px #000;
+
+    display: flex;
+    justify-content: center;
+
+    &__locked {
+      background-color: var(--calcard-bg-color__locked);
+      cursor: not-allowed;
+    }
+
+    & .cardnumber {
+      font-size: 6vw;
+    }
+  }
+}
+
+.door-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.door {
+  background-color: var(--door-bg-color);
+  color: var(--door-color);
+
+  padding: 2rem;
+
+  text-align: center;
+  font-size: 1.7rem;
+
+  border-radius: 6px;
+  box-shadow: 2px 2px 8px 3px #000;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  min-width: 30rem;
+
+  .solve {
+    font-size: 2rem;
+    margin-top: 24px;
+  }
+
+  .hint {
+    margin-top: 12px;
+    padding: 12px;
+
+    text-align: left;
+
+    background-color: var(--door-hint-bg-color);
+    border-radius: 3px;
+    box-shadow: 2px 2px 8px 3px #000;
+  }
+
+  .door-close {
+    font-size: 1.5rem;
+    position: absolute;
+
+    top: 0.5rem;
+    right: 1rem;
+  }
+
+  .player-controls {
+    display: inline-flex;
+
+    a {
+      width: 2rem;
+      margin-left: 16px;
+      padding: 0 6px;
+      background-color: var(--player-controls-bg-color);
+      border-radius: 3px;
+      box-shadow: 2px 2px 3px 2px #000;
+    }
+  }
+}
+
+.ad-nav {
+  & nav {
+    text-align: center;
+  }
+
+  & ul {
+    display: flex;
+  }
+
+  & nav > ul {
+    padding: 4px 16px;
+  }
+
+  & li {
+    display: flex;
+    padding: 6px 8px;
+  }
+}