first commit

styles.css

@@ -0,0 +1,67 @@
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background-image: url(images/background.png);
+    background-size: cover;
+    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";    overflow: hidden;
+}
+
+.title {
+    z-index: 10;
+    position: absolute;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    inset: 0;
+    margin: 0;
+    flex-direction: column;
+}
+
+.subtitle {
+    margin-top: .5rem;
+}
+
+.hide {
+    display: none;
+}
+
+.bird {
+    --bird-top: -1000;
+    --bird-size: 60px;
+    position: absolute;
+    width: var(--bird-size);
+    left: var(--bird-size);
+    top: calc(var(--bird-top) * 1px);
+    border-radius: 50%;
+}
+
+.pipe {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: calc(var(--pipe-width) * 1px);
+    left: calc(var(--pipe-left) * 1px);
+}
+
+.pipe > .segment {
+    position: absolute;
+    width: 100%;
+    background-size: 100% 600px;
+}
+
+.pipe > .top {
+    top: 0;
+    bottom: calc(var(--hole-top) * 1px);
+    background-image: url(images/topPipe.png);
+    background-position: bottom;
+}
+
+.pipe > .bottom {
+    bottom: 0;
+    top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));    
+    background-image: url(images/bottomPipe.png);
+}