body {
    font-family: futura, Arial, serif;
    color: rgb(196,222,221);
    background-color: rgb(219,64,43);
    letter-spacing: 0.4px;
}

.contact-container {
    margin-top: 80px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
}

.cc-link:hover {
    color: rgb(196,222,221);
}

iframe {
    width: 100%;
    height: 100%;
}

.focused-viewer {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1001;
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 320px) and (orientation: portrait) {
    .focused-viewer {
        width: 288px;
        height: 162px;
        margin-left: -144px;
        margin-top: -81px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 414px) and (orientation: portrait) {
    .focused-viewer {
        width: 352px;
        height: 198px;
        margin-left: -176px;
        margin-top: -99px;
    }
}

@media only screen and (min-width: 415px) and (max-width: 849px) and (orientation: portrait) {
    .focused-viewer {
        width: 576px;
        height: 324px;
        margin-left: -288px;
        margin-top: -162px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 568px) and (orientation: landscape) {
    .focused-viewer {
        width: 416px;
        height: 234px;
        margin-left: -208px;
        margin-top: -117px;
    }
}

@media only screen and (min-width: 569px) and (max-width: 849px) and (orientation: landscape) {
    .focused-viewer {
        width: 560px;
        height: 315px;
        margin-left: -280px;
        margin-top: -157px;
    }
}

@media only screen and (min-width: 850px) {
    .focused-viewer {
        width: 800px;
        height: 450px;
        margin-left: -400px;
        margin-top: -225px;
    }
    .nav-separator {
        border-right: 1px solid;
    }
}

.page-mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.nav-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

.contact-text {
    text-align: center;
}

.bio-text {
    text-align: center;
}

.description-text {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4px;
}

a {
    text-decoration: none;
    color: rgb(196,222,221);
}

a:hover {
    text-decoration: none;
}

.video-thumb {
    cursor: pointer;
}

.video-title {
    font-size: 15px;
}

.hl {
    text-decoration: underline !important;
    color: rgb(196,222,221) !important;
}

.hl:hover {
    font-weight: 800;
}