2 files changed, 86 insertions, 7 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 3778cab..4c10055 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -28,6 +28,52 @@ a {
 .scene-nav-info {
   display: none !important;
 }
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+/* intro */
+.intro {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 3rem 3rem;
+  transition: opacity 0.2s;
+  background: #333;
+  opacity: 1;
+}
+.intro.done {
+  opacity: 0;
+}
+.intro-video,
+.intro-video iframe {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.curtain {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  transition: opacity 2s;
+  opacity: 1;
+}
+.curtain.done {
+  opacity: 0;
+  pointer-events: none;
+}
+.intro-text .legend,
+.intro-text .quote,
+.intro-text .site-title,
+.intro-text .credits-link {
+  transition-duration: 2s !important;
+}
 
 /** Legend */
 
@@ -40,6 +86,7 @@ a {
   margin: 1rem 1.5rem;
   /*background: rgba(0, 0, 0, 0.5);*/
   color: #fff;
+  text-shadow: 0 0 2px #000;
   transition: opacity 0.2s;
 }
 .legend .category {
@@ -192,6 +239,7 @@ a {
   transition: opacity 0.2s;
   opacity: 0;
   pointer-events: none;
+  text-shadow: 0 0 2px #000;
 }
 .quote.visible {
   opacity: 1;
@@ -216,10 +264,10 @@ a {
   opacity: 0;
   pointer-events: none;
   margin-top: 1rem;
+  text-shadow: 0 0 2px #000;
 }
 .site-title.visible {
   opacity: 1;
-  pointer-events: auto;
 }
 
 /** Credits */
@@ -234,11 +282,15 @@ a {
   opacity: 0;
   pointer-events: none;
   cursor: pointer;
+  text-shadow: 0 0 2px #000;
 }
 .credits-link.visible {
   opacity: 1;
   pointer-events: auto;
 }
+.credits-link:hover {
+  text-decoration: underline;
+}
 
 .credits {
   position: absolute;
@@ -247,9 +299,9 @@ a {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
-  background: rgba(64, 64, 64, 0.8);
+  background: rgba(64, 64, 64, 0.9);
   color: #fff;
-  transition: opacity 0.2s;
+  transition: opacity 0.5s;
   opacity: 0;
   pointer-events: none;
 }
@@ -289,19 +341,39 @@ a {
   padding-top: 0;
   margin-bottom: 1rem;
 }
+.credits .logos {
+  margin-top: 1rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  padding: 0 1rem;
+}
+.credits .logos img {
+  height: 75px;
+  margin-right: 1rem;
+}
 .credits-rows {
   margin-bottom: 1rem;
 }
 .credits-rows > div {
   display: flex;
   flex-direction: row;
+  align-items: flex-end;
 }
-.credits-rows > div > div:first-child {
-  width: 33%;
+.credits-rows a,
+.credits-rows span {
+  font-weight: bold;
 }
-.credits img {
-  height: 75px;
+.credits-rows a {
+  text-decoration: none;
+}
+.credits-rows a:hover {
+  text-decoration: underline;
+}
+.credits-rows > div > div:first-child {
+  padding-right: 0.25rem;
 }
+
 .credits .close {
   position: absolute;
   top: 1rem;
@@ -309,3 +381,10 @@ a {
   cursor: pointer;
   height: 1.5rem;
 }
+.intro .close {
+  position: absolute;
+  top: 3rem;
+  right: 1.5rem;
+  cursor: pointer;
+  height: 1.5rem;
+}
diff --git a/public/assets/img/canada.png b/public/assets/img/canada.png
new file mode 100644
index 0000000..49fc96c
--- /dev/null
+++ b/public/assets/img/canada.png