html, body {
    width: 100%;
    height: 100%;

    margin: 0px;
    padding: 0px;
}
.panel {
    display: grid;
    grid-template-columns: 10px 1fr 1fr 10px 10px;
    min-height: 85vh;
}
@media (min-width: 800px) {
    .panel {
        grid-template-columns: repeat(5, 1fr);
    }
}
.panel-content {
    color: white;
    padding: 20px;
}
#panel1 {
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;

    background: #351159;
}

#panel1-content {
    grid-column: 2 / 4;
    grid-row: 2 / 4;

    border-left: 2px solid white;
}

#panel2 {
    grid-template-rows: 40px 1fr 40px 1fr 40px;
    grid-column-gap: 10px;

    background: #591111;
}

#panel2-connector1 {
    grid-column: 2 / 4;
    grid-row: 1;

    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

#panel2-content1 {
    grid-column: 2 / 4;
    grid-row: 2;

    text-align: right;

    border-right: 2px solid white;
}

#panel2-connector2 {
    grid-column: 2 / 4;
    grid-row: 3;

    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

#panel2-content2 {
    grid-column: 2 / 4;
    grid-row: 4;

    text-align: left;

    border-left: 2px solid white;
}

#panel3 {
    grid-template-rows: 40px 1fr 40px;
    grid-column-gap: 10px;

    background: #115959;
}

#panel3-content {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    text-align: left;

    border: 2px solid white;
}

h1,h2,h3 {
    font-family: 'PT Sans', sans-serif;
}
p, ul, ol, li, table {
    font-family: 'Raleway', sans-serif;
}

a {
    color: white;
}

.faq dt {
  font-weight: bold;
}
.faq dd {
  margin-bottom: 14px;
}