: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;
    }
}