1 files changed, 224 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6be7ed3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,224 @@
+
+
+:root {
+    --gray0: hsl(270, 0%, 7%);
+    --gray1: hsl(270, 0%, 10%);
+    --gray2: hsl(270, 1%, 16%);
+    --gray3: hsl(270, 1%, 24%);
+    --gray4: hsl(270, 1%, 35%);
+    --gray5: hsl(270, 2%, 54%);
+    --gray6: hsl(270, 2%, 73%);
+    --gray7: hsl(270, 2%, 100%);
+
+    /* * */
+
+    --bg-hi:  var(--gray0);
+    --bg:     var(--gray1);
+
+    --obj-hi: var(--gray2);
+    --obj:    var(--gray3);
+    --obj-lo: var(--gray4);
+
+    --fg-hi:  var(--gray5);
+    --fg:     var(--gray6);
+    --fg-lo:  var(--gray7);
+
+    /* * */
+
+    --color--yellow: hsl(38, 100%, 76%);
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    height:           100%;
+    margin:           0;
+    font-family:      IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial;
+    line-height:      1.5;
+    background-color: var(--bg);
+    color:            var(--fg);
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    margin: 0;
+}
+
+iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+input {
+    padding:       .5em .7em;
+    background:    var(--obj);
+    color:         var(--fg-lo);
+    border:        2px solid transparent;
+    border-radius: 3px;
+    transition:    border-color .2s;
+}
+
+input:hover,
+input:focus {
+    border-color: var(--color--yellow);
+    box-shadow:   none;
+    outline:      0;
+}
+
+button {
+    padding:        .6em 1.3em;
+    font:           inherit;
+    font-size:      12px;
+    font-weight:    bold;
+    text-transform: uppercase;
+    letter-spacing: .2em;
+    background:     transparent;
+    color:          var(--color--yellow);
+    border:         2px solid var(--color--yellow);
+    border-radius:  3px;
+    transition:     background-color .2s, color .2s;
+}
+
+button:hover,
+button:focus {
+    background-color: var(--color--yellow);
+    color:            #000;
+}
+
+:link,
+:visited {
+    color: #850000;
+}
+
+.c-section {
+    height: 100%;
+}
+
+.c-section--main {
+    display:               grid;
+    grid-template-areas:   "video msg" "video chat";
+    grid-template-rows:    auto 1fr;
+    grid-template-columns: 1fr 22em;
+}
+
+.c-form {
+    display:   block;
+    padding:   2rem;
+    margin:    0 auto;
+    max-width: 600px;
+}
+
+.c-form-msg:empty {
+    display: none;
+}
+
+.c-form-field {
+    display:    block;
+    margin-top: 2rem;
+}
+
+.c-form-field__label {
+    font-size:   15px;
+    font-weight: bold;
+    color:        var(--fg-lo);
+}
+
+.c-form-field__help {
+    display:    block;
+    margin-top: .5rem;
+    color:      var(--fg-hi);
+    font-size:  15px;
+}
+
+.c-form-field__input {
+    box-sizing: border-box;
+    display:    block;
+    width:      100%;
+    margin-top: .5rem;
+}
+
+.c-frame--pt {
+    grid-area: video;
+}
+
+.c-frame--irc {
+    grid-area: chat;
+}
+
+.c-msg {
+    grid-area:        msg;
+    display:          flex;
+    color:            #850000;
+    background-color: #fcc;
+    font-size:        14px;
+    border:           1px solid #ffb8b8;
+}
+
+.c-msg__content {
+    display: block;
+    width:   100%;
+    padding: .75rem 1.25rem;
+}
+
+.c-close-icon {
+    width:    1.1em;
+    height:   2px;
+    position: relative;
+}
+
+.c-close-icon::before,
+.c-close-icon::after {
+    position:         absolute;
+    left:             0;
+    display:          block;
+    height:           2px;
+    content:          '';
+    background-color: currentColor;
+    transform-origin: 50% 50%;
+}
+
+.c-close-icon::before {
+    top:        0;
+    width:      100%;
+    transform:  rotate(45deg);
+    transition: background-color .3s ease;
+}
+
+.c-close-icon::after {
+    bottom:     0;
+    transform:  rotate(-45deg);
+    width:      100%;
+    transition: background-color .3s ease;
+}
+
+.c-msg__close {
+    display:     block;
+    padding:     .75rem 1.25rem;
+    margin-left: auto;
+    background:  transparent;
+    color:       currentColor;
+    border:      0;
+}
+
+.c-msg__close:hover {
+    background:  transparent;
+    color:       currentColor;
+}
+
+.u-hidden {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    .c-section--main {
+        grid-template-areas:   "msg" "video" "chat";
+        grid-template-rows:    auto 1fr 22em;
+        grid-template-columns: 1fr;
+    }
+}