From 04351ade12f72e659071afec28ffb69c4b602a7a Mon Sep 17 00:00:00 2001
From: ado <awesley@gmail.com>
Date: Wed, 1 Nov 2023 08:32:08 -0400
Subject: [PATCH] Add index.css

---
 index.css | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 index.css

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..0f08294
--- /dev/null
+++ b/index.css
@@ -0,0 +1,149 @@
+:root {
+  --text-color: #f7f7f7;
+  --alt-text-color: #dfe3ee;
+  --bg-color: #19232f;
+  --alt-bg-color: rgb(19, 34, 57);
+  --bg-translucent: rgba(85, 153, 255, 0.1);
+  --theme-color: #b3cde0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-color: #222430;
+    --alt-text-color: #222430;
+    --bg-color: #f7f7f7;
+    --alt-bg-color: #f7f7f7;
+    --bg-translucent: rgba(19, 34, 57, 0.1);
+    --theme-color: #d34a97;
+  }
+}
+
+body {
+  font-family: Helvetica, Lato, sans-serif;
+  line-height: 1.5;
+  font-weight: 300;
+  font-size: 1.4em;
+  color: var(--text-color);
+  padding: 30px;
+  margin-bottom: 150px;
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  background-position: bottom 0 left 2em;
+  background-image: url("ado_dwc.png");
+  background-repeat: no-repeat;
+  background-size: 40%;
+}
+
+h1 {
+  background-image: linear-gradient(
+    to right,
+    var(--text-color) 50%,
+    var(--alt-text-color) 100%
+  );
+  background-clip: text;
+  color: transparent;
+  font-weight: 300;
+}
+
+h2 {
+  font-weight: 300;
+}
+
+@media only screen and (min-width: 768px) {
+  body {
+    background-size: 15%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .container {
+    display: grid;
+    grid-template-columns: 0 2.5fr 0.5fr 1fr;
+  }
+}
+
+header,
+.container {
+  max-width: 1140px;
+  margin: 0 auto;
+}
+
+a {
+  color: var(--theme-color);
+}
+
+header {
+  color: var(--text-color);
+  text-align: right;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+article {
+  padding-bottom: 3em;
+}
+
+article img {
+  float: right;
+}
+
+@media only screen and (max-width: 768px) {
+  article img {
+    float: initial;
+  }
+}
+
+footer {
+  text-align: center;
+}
+
+.tab input {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+.tab__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.35s;
+}
+.tab input:checked ~ .tab__content {
+  max-height: initial;
+}
+
+/* Visual styles */
+.accordion {
+  color: var(--text-color);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.tab__label,
+.tab__close {
+  display: flex;
+  color: var(--alt-text-color);
+  background: var(--bg-translucent);
+  font-weight: 500;
+  cursor: pointer;
+}
+.tab__label {
+  justify-content: space-between;
+  padding: 0.75rem 1.2rem 0.5rem 1.2rem;
+}
+.tab__label::after {
+  content: "\276F";
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  transform: rotate(90deg);
+  transition: all 0.35s;
+}
+.tab input:checked + .tab__label::after {
+  transform: rotate(270deg);
+}
+.tab__content p {
+  margin: 1rem 0;
+  padding: 1rem;
+}