.home-content {

}

@font-face {
    font-family: 'Selznick Normal';
    src: url("fonts/SelznickNormal.otf");
    font-weight: normal;
}

@font-face {
    font-family: 'Selznick Remix';
    src: url("fonts/SelznickRemixNF.otf");
    font-weight: normal;
}

body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 700px;
    box-sizing: border-box;
    font-family: 'Selznick Normal';
}

p {
    font-family: 'PT Sans', sans-serif;
    text-align: center;
}

.heading {
    font-size: 40px;
    margin: 0;
}

.sub-heading {
    font-size: 25px;
    text-align: left;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
    outline: none;
}

header {

}

.header-title {
}


.nav-bar__container {
    position: fixed;
    top: 0;
    left: -100vw;
    height: calc(100vh + 56px);
    width: 100vw;
    transition: 300ms all;
    z-index: 2;
    margin: 0;
}

.nav-bar {
    background-color: white;
    margin: 2rem;
    height: calc(100vh - 64px);
    width: calc(100vw - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

@media (min-width: 800px) {
    .nav-bar.wigglies {
        background: white;
    }
}


.nav-bar__container.is-active {
    left: 0vw;
}

.nav-bar .page_item {
    font-size: 40px;
    width: 60%;
    height: 50px;
    line-height: 50px;
    background-color: lightpink;
    box-shadow: 6px 6px 0px 0px deeppink;
    text-align: center;
    text-transform: uppercase;
}

.nav-bar .page_item a {
    color: black;
    vertical-align: middle;
    letter-spacing: 10px;
}

.nav-bar .page_item {
    list-style: none;
}

.nav-bar .page_item a {
}

a {
    text-decoration: none;
}

.footer {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: calc(60vh - 2rem);
    margin: 2rem;
    padding: 2rem;
}

.icons {
    display: flex;
    justify-content: space-evenly;
}

.footer__icon-background {
    max-width: 80px;
    max-height: 80px;
    margin: 10px;
    background: #ffb6e1;
    border-radius: 50%;
}

.icon {
    width: 100%;
    height: 100%;
}

.solo-icons {
    margin: 2rem;
}

.solo-icons .footer__icon-background {
    background: transparent;
}

.main {
    overflow: hidden;
}

.page-content {
    width: 80%;
    margin: 2rem auto;
}

.full-page {
    width: calc(100% - 4rem);
    height: calc(100vh - 4rem);
    min-height: 650px;
}

.page-header {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

.page-header p {
    letter-spacing: 1px;
}

.wigglies {
    background-image: url(pictures/wigglies/wiggly.png);
    background-size: 100% 100%;
    /*background-position: center;*/
}


.wigglies-page {
    background-image: url(pictures/wigglies/page-wiggly.png);
    background-size: contain;
    background-repeat: repeat-y;
}

/*.full-page.wigglies {*/
/*    padding: 2rem;*/
/*}*/


/****************
Front Page
***************/

.page-title {
    width: 80%;
    font-size: 60px;
    text-align: center;
    letter-spacing: 25px;
    margin: 25px 0 0 25px;
    text-transform: uppercase;
}

.front-page-image {
    max-width: 400px;
    max-height: 400px;
}


/****************
Blurb
***************/

.blurb {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*width: 100vw;*/
    min-height: 100vh;
    padding: 2rem;
}

/*    font-size: 50px;*/
/*    margin-left: 25px;*/
/*    letter-spacing: 25px;*/
/*    color: white;*/
/*    text-transform: uppercase;*/
/*    background: yellow;*/
/*    box-shadow: 0px 0px 20px 20px yellow;*/
/*}*/

.blurb__description {
    width: 75%;
    letter-spacing: 2px;
    line-height: 1.5rem;
}


/****************
videos
***************/


.videos__header {
    width: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15%;
}

.videos__container {
    width: 100%;
    height: 600px;
    display: flex;
    padding: 0;
    margin: 0;
}

.video__container {
    width: 100%;
    height: 100vh;
    font-size: 0;
    position: relative;
    margin: auto;
}

.video-background {
    width: 572px;
    height: 741px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    pointer-events: none;
    position: absolute;
}

.video {
    width: 450px;
    height: 364px;
    position: absolute;
    left: 0px;
    right: 0;
    top: 273px;
    margin: auto;
    background-color: black;
}


.spanels {
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 75px;
}

.spanel {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: black;
}

.spanel.is-active {
    background: white;
}


/****************
Messages
***************/


.messages__header {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15%;
}

.messages__title {
    font-size: 34px;
    font-family: 'PT Sans', sans-serif;
    text-align: center;
    margin: 0 0 0 5px;
    letter-spacing: 5px;
    /*box-shadow: 0px 0px 20px 20px yellow;*/
}

.messages__description {

}


.message {
    display: flex;
    align-items: center;
    margin: 20px;
    background: beige;
    border: 2px solid black;
    transform: translateZ(25px);
    -o-transform: translateZ(25px);
    -moz-transform: translateZ(25px);
    -webkit-transform: translateZ(25px);
}


.message__content {
    font-size: 12px;
    padding: 13%;
    flex: 5;
}

.message-form {
    height: 100%;
    background: white url(pictures/fade-lanterns.png) bottom;
    background-repeat: repeat-x;
    padding-top: 1rem;
}

.comment-respond {
    height: 550px;
}

.message-form__author {
    font-size: 12px;
    background: pink;
    box-shadow: 6px 6px 0px 0px deeppink;
    margin-left: 3rem;
    height: 20px;
    width: 55%;
    padding: 1rem;
    display: inline-block;
    vertical-align: top;
}

.message-form__content {
    font-size: 12px;
    background: pink;
    box-shadow: 6px 6px 0px 0px deeppink;
    margin: 2rem;
    height: 40px;
    padding: 1rem;
}

.message-form__content-textarea,
.message-form__author-textarea {
    background-color: transparent;
    border: none;
    font-family: 'PT Sans', sans-serif;
    width: 100%
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: black;
}
::-moz-placeholder { /* Firefox 19+ */
    color: black;
}
:-ms-input-placeholder { /* IE 10+ */
    color: black;
}
:-moz-placeholder { /* Firefox 18- */
    color: black;
}

.message-form__content-textarea {
    height: 100%;
}

.after-lanterns {
    background: url(pictures/fade-lanterns.png) bottom;
    background-repeat: repeat-x;
    height: 333px;
    width: 100%;
}

.form-submit {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin: 1rem 0 0 1rem;
}

.submit {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background: url(pictures/send-icon.png);
    background-size: cover;
    border: transparent;

}


/****************
Cylinder
***************/

.lanterns__visible-container {
    width: 100%;
    height: 666px;
    overflow-x: hidden;
    background: url(pictures/tangled.png) center;
    background-size: cover;
    position: relative;
}

.lanterns__buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 75%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.lanterns__buttons button {
    background: yellow;
}

.lanterns__spanels {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 230px;
    height: 100%;
}

.lanterns__spanel {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #d1ca31;
    -o-transition: 500ms all ease-out;
    -moz-transition: 500ms all ease-out;
    -webkit-transition: 500ms all ease-out;
    transition: 500ms all ease-out;
    text-align: center;
}

.lanterns__spanel.is-active {
    background: white;
}

.lanterns__spanel.is-nearly-hidden {
    height: 7px;
    width: 7px;
    -o-transition: 1000ms all ease-out;
    -moz-transition: 1000ms all ease-out;
    -webkit-transition: 1000ms all ease-out;
    transition: 1000ms all ease-out;
}

.lanterns__spanel.is-almost-hidden {
    height: 5px;
    width: 5px;
    -o-transition: 500ms all ease-out;
    -moz-transition: 500ms all ease-out;
    -webkit-transition: 500ms all ease-out;
    transition: 500ms all ease-out;
}


.lanterns__spanel.is-hidden {
    display: none;
    -o-transition: 500ms all ease-out;
    -moz-transition: 500ms all ease-out;
    -webkit-transition: 500ms all ease-out;
    transition: 500ms all ease-out;
}


.lanterns__buttons p {
    color: yellow;
}

.lanterns__container {
    --nLanterns: 1;
    width: 100%;
    width: calc(var(--nLanterns) * 100%);
    display: flex;
    overflow: hidden;
    transition: transform 300ms;
    -o-transition: transform 300ms;
    -moz-transition: transform 300ms;
    -webkit-transition: transform 300ms;
    transform: translateX(calc(var(--index, 0) / var(--nLanterns) * -100%));
    -o-transform: translateX(calc(var(--index, 0) / var(--nLanterns) * -100%));
    -moz-transform: translateX(calc(var(--index, 0) / var(--nLanterns) * -100%));
    -webkit-transform: translateX(calc(var(--index, 0) / var(--nLanterns) * -100%));
}

.lantern__panel {
    display: inline-block;
    position: relative;
    margin: 0;
    width: 100%;
    height: 500px;
    padding: 0;
    perspective: 1000px;
    -o-perspective: 1000px; /*required to make cylinder shape*/
    -moz-perspective: 1000px; /*required to make cylinder shape*/
    -webkit-perspective: 1000px;
}

.lantern__comment {
    position: absolute;
    z-index: 5;
    top: -56px;
    bottom: 0;
    left: 16px;
    right: 0;
    margin: auto;
    width: 200px;
    height: 278px;
    background: transparent;
    transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -webkit-transition: all 400ms ease-out;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: translate3d(-10px, 34px, 140px);
    -o-transform: translate3d(-10px, 34px, 140px);
    -moz-transform: translate3d(-10px, 34px, 140px);
    -webkit-transform: translate3d(-10px, 34px, 140px);
    text-align: center;
    pointer-events: none;
    word-break: break-word;
}

.lantern__comment-author {
    visibility: visible;
    opacity: 1;
    transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -moz-transform: all .2s ease-out;
    -webkit-transform: all .2s ease-out;
    position: absolute;
    left: 0;
    right: 0;
    top: 36%;
    height: 100px;
    margin: auto;
    width: 90%;
    font-family: "PT Sans", sans-serif;
    color: #7d1919;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lantern__comment-message {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 7px;
    right: 0;
    top: 0;
    height: 100%;
    color: #7d1919;
    margin: auto;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lantern__comment-message.is-active  {
    visibility: visible;
    opacity: 1;
    transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -moz-transform: all 1s ease-in;
    -webkit-transform: all 1s ease-in;
}

.lantern__comment-author.is-active  {
    visibility: hidden;
    opacity: 0;
}

.lantern__comment:active {
    transition: opacity 400ms ease-out;
    -o-transition: opacity 400ms ease-out;
    -moz-transition: opacity 400ms ease-out;
    -webkit-transition: opacity 400ms ease-out;
}

.lanterns__arrow {
    height: 30px;
    margin: 1rem;
}

.lanterns__arrow-right {
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}






.frame {
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-13deg) rotateY(-172deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    -o-transform: rotateX(-13deg) rotateY(-172deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    -moz-transform: rotateX(-13deg) rotateY(-172deg) rotateZ(0deg) translate3d(0px, 70px, 0px);
    -webkit-transform: rotateX(-13deg) rotateY(-172deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    margin: 0 50%;
}

.frame.is-active {
    transform: rotateX(-13deg) rotateY(-360deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    -o-transform: rotateX(-13deg) rotateY(-360deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    -moz-transform: rotateX(-13deg) rotateY(-360deg) rotateZ(0deg) translate3d(0px, 70px, 0px);
    -webkit-transform: rotateX(-13deg) rotateY(-360deg) rotateZ(0deg) translate3d(-15px, 70px, 0px);
    transition: all 2s;
    -o-transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
}

.strip {
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.strip div {
    position: absolute;
    background: green;
    border-width: thin 10px;
    transition: all .2s;
    height: 276px; /*height and width of tank display*/
    width: 34px;
    border-bottom: .5px solid #eba701;
    border-top: .5px solid #d18631;
    text-align: center;
    font-family: Arial;
    padding-top: 40px;
    font-weight: bold;
    color: #f00;
    background-image: url(pictures/lantern.png); /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
    background: url(pictures/lantern-transparent.png), linear-gradient(#eba701, #d1ca31);;
}


.strip .a {
    -o-transform: rotateY(0deg) translateX(50%) translateZ(124px);
    -moz-transform: rotateY(0deg) translateX(50%) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px);
    transform: rotateY(0deg) translateZ(124px);
    background-position: 811px 0;
}

.strip .b {
    -o-transform: rotateY(15deg) translateZ(124px);
    -moz-transform: rotateY(15deg) translateZ(124px);
    -webkit-transform: rotateY(15deg) translateZ(124px);
    transform: rotateY(15deg) translateZ(124px);
    background-position: 782px 0;
}

.strip .c {
    -o-transform: rotateY(30deg) translateZ(124px);
    -moz-transform: rotateY(30deg) translateZ(124px);
    -webkit-transform: rotateY(30deg) translateZ(124px);
    transform: rotateY(30deg) translateZ(124px);
    background-position: 748px 0;
}

.strip .d {
    -o-transform: rotateY(45deg) translateZ(124px);
    -moz-transform: rotateY(45deg) translateZ(124px);
    -webkit-transform: rotateY(45deg) translateZ(124px);
    transform: rotateY(45deg) translateZ(124px);
    background-position: 714px 0;
}

.strip .e {
    -o-transform: rotateY(60deg) translateZ(124px);
    -moz-transform: rotateY(60deg) translateZ(124px);
    -webkit-transform: rotateY(60deg) translateZ(124px);
    transform: rotateY(60deg) translateZ(124px);
    background-position: 680px 0;
}

.strip .f {
    -o-transform: rotateY(75deg) translateZ(124px);
    -moz-transform: rotateY(75deg) translateZ(124px);
    -webkit-transform: rotateY(75deg) translateZ(124px);
    transform: rotateY(75deg) translateZ(124px);
    background-position: 646px 0;
}

.strip .g {
    -o-transform: rotateY(90deg) translateZ(124px);
    -moz-transform: rotateY(90deg) translateZ(124px);
    -webkit-transform: rotateY(90deg) translateZ(124px);
    transform: rotateY(90deg) translateZ(124px);
    background-position: 612px 0;
}

.strip .h {
    -o-transform: rotateY(105deg) translateZ(124px);
    -moz-transform: rotateY(105deg) translateZ(124px);
    -webkit-transform: rotateY(105deg) translateZ(124px);
    transform: rotateY(105deg) translateZ(124px);
    background-position: 578px 0;
}

.strip .i {
    -o-transform: rotateY(120deg) translateZ(124px);
    -moz-transform: rotateY(120deg) translateZ(124px);
    -webkit-transform: rotateY(120deg) translateZ(124px);
    transform: rotateY(120deg) translateZ(124px);
    background-position: 544px 0;
}

.strip .j {
    -o-transform: rotateY(135deg) translateZ(124px);
    -moz-transform: rotateY(135deg) translateZ(124px);
    -webkit-transform: rotateY(135deg) translateZ(124px);
    transform: rotateY(135deg) translateZ(124px);
    background-position: 510px 0;
}

.strip .k {
    -o-transform: rotateY(150deg) translateZ(124px);
    -moz-transform: rotateY(150deg) translateZ(124px);
    -webkit-transform: rotateY(150deg) translateZ(124px);
    transform: rotateY(150deg) translateZ(124px);
    background-position: 476px 0;
}

.strip .l {
    -o-transform: rotateY(165deg) translateZ(124px);
    -moz-transform: rotateY(165deg) translateZ(124px);
    -webkit-transform: rotateY(165deg) translateZ(124px);
    transform: rotateY(165deg) translateZ(124px);
    background-position: 442px 0;
}

.strip .m {
    -o-transform: rotateY(180deg) translateZ(124px);
    -moz-transform: rotateY(180deg) translateZ(124px);
    -webkit-transform: rotateY(180deg) translateZ(124px);
    transform: rotateY(180deg) translateZ(124px);
    background-position: 408px 0;
}

.strip .n {
    -o-transform: rotateY(195deg) translateZ(124px);
    -moz-transform: rotateY(195deg) translateZ(124px);
    -webkit-transform: rotateY(195deg) translateZ(124px);
    transform: rotateY(195deg) translateZ(124px);
    background-position: 374px 0;
}

.strip .o {
    -o-transform: rotateY(210deg) translateZ(124px);
    -moz-transform: rotateY(210deg) translateZ(124px);
    -webkit-transform: rotateY(210deg) translateZ(124px);
    transform: rotateY(210deg) translateZ(124px);
    background-position: 340px 0;
}

.strip .p {
    -o-transform: rotateY(225deg) translateZ(124px);
    -moz-transform: rotateY(225deg) translateZ(124px);
    -webkit-transform: rotateY(225deg) translateZ(124px);
    background-position: 306px 0;
}

.strip .q {
    -o-transform: rotateY(240deg) translateZ(124px);
    -moz-transform: rotateY(240deg) translateZ(124px);
    -webkit-transform: rotateY(240deg) translateZ(124px);
    background-position: 272px 0;
}

.strip .r {
    -o-transform: rotateY(255deg) translateZ(124px);
    -moz-transform: rotateY(255deg) translateZ(124px);
    -webkit-transform: rotateY(255deg) translateZ(124px);
    background-position: 238px 0;
}

.strip .s {
    -o-transform: rotateY(270deg) translateZ(124px);
    -moz-transform: rotateY(270deg) translateZ(124px);
    -webkit-transform: rotateY(270deg) translateZ(124px);
    background-position: 204px 0;
}

.strip .t {
    -o-transform: rotateY(285deg) translateZ(124px);
    -moz-transform: rotateY(285deg) translateZ(124px);
    -webkit-transform: rotateY(285deg) translateZ(124px);
    background-position: 170px 0;
}

.strip .u {
    -o-transform: rotateY(300deg) translateZ(124px);
    -moz-transform: rotateY(300deg) translateZ(124px);
    -webkit-transform: rotateY(300deg) translateZ(124px);
    background-position: 136px 0;
}

.strip .v {
    -o-transform: rotateY(315deg) translateZ(124px);
    -moz-transform: rotateY(315deg) translateZ(124px);
    -webkit-transform: rotateY(315deg) translateZ(124px);
    background-position: 102px 0;
}

.strip .w {
    -o-transform: rotateY(330deg) translateZ(124px);
    -moz-transform: rotateY(330deg) translateZ(124px);
    -webkit-transform: rotateY(330deg) translateZ(124px);
    background-position: 68px 0;
}

.strip .x {
    -o-transform: rotateY(345deg) translateZ(124px);
    -moz-transform: rotateY(345deg) translateZ(124px);
    -webkit-transform: rotateY(345deg) translateZ(124px);
    transform: rotateY(345deg) translateZ(124px);
    background-position: 38px 0;
}


/****************
Pages
***************/
.theme-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem auto;
}

.theme-page p {
    width: 65%;
    margin: 1rem auto;
    letter-spacing: 3px;
    font-weight: bold;
}

.blurb__title,
.footer__title,
.theme-page h2 {
    font-size: 36px;
    width: 60%;
    max-width: 400px;
    height: 50px;
    line-height: 50px;
    box-shadow: 6px 6px 0px 0px black;
    text-align: center;
    text-transform: uppercase;
    color: black;
    vertical-align: middle;
    letter-spacing: 10px;
}

.page-intro {
    width: 60%;
    text-align: center;
    font-weight: bold;
}

.page-image {
    text-align: center;
    padding: 10px 10px 30px 10px;
    background: black;
    font-size: 18px;
    color: white;
    border: 1px solid rgba(96, 96, 96, 0.2);
    max-width: 280px;
    height: auto;
    margin: 2rem 2rem 2rem 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    list-style: none;
}

.art-image img {
    max-width: 450px;
    max-height: 350px;
}

.page-image img {
    max-width: 250px;
    max-height: 250px;
}

.wp-block-gallery {
    margin: 0;
}

.blocks-gallery-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
}

.blocks-gallery-item, .wp-block-image {
    text-align: center;
    padding: 10px 10px 10px 10px;
    background: white;
    font-size: 18px;
    color: #000;
    border: 1px solid rgba(96, 96, 96, 0.2);
    max-width: 320px;
    height: auto;
    margin: 2rem 2rem 2rem 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    list-style: none;
}


.wp-block-image img,
.blocks-gallery-item img {
    max-width: 320px;
    max-height: 320px;
    overflow: hidden;
}

.blocks-gallery-item figure,
.wp-block-image figure {
    padding: 0;
    margin: 0;
}

.blocks-gallery-item__caption {
    min-width: 30px;
    min-height: 30px;
    margin: 10px auto 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
    letter-spacing: 1.5px;
    max-width: fit-content;
}

blockquote {
    display: flex;
    flex-direction: column;
}

.wp-block-quote p {
    font-size: 18px;
    width: 75%;
    padding-bottom: 1rem;
    border-bottom: 2px solid black;
}

cite {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    font-family: 'PT Sans', sans-serif;
    margin: 0 auto;
}


.recipe ul,
.recipe ol {
    font-family: "PT Sans", sans-serif;
    font-weight: bold;
    font-size: 16px;
    width: 60%;
    margin: 2rem auto;
    padding: 2rem 2rem 2rem 5rem;
    background: white;
    border: 4px solid black;
    letter-spacing: 2px;

}

/****************
Hamburger
***************/

/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
    position: fixed;
    top: 32px;
    left: 32px;
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    z-index: 3;
    transition: 300ms all;

}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #000;
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

/*
* Arrow Alt
*/
.hamburger--arrowalt .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(-7px, -7px, 0) rotate(-45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(-7px, 7px, 0) rotate(45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@media (max-width: 600px) {
    .blurb__title,
    .footer__title,
    .theme-page h2 {
        font-size: 7vw;
        letter-spacing: 1vw;
    }


    .videos__container {
        height: 500px;
    }

    .video-background {
        width: 418px;
        height: 559px;
    }

    .video {
        width: 326px;
        height: 275px;
        top: 206px;
    }
}


@media (max-width: 425px) {

    .video-background {
        width: 379px;
        height: 498px;
    }

    .video {
        width: 295px;
        height: 245px;
        top: 183px;
    }

    .message-form__author {
        margin-left: 2rem;
    }

    .form-submit {
        margin-left: 0;
    }
}


@media (max-width: 380px) {

    .blurb__description {
        font-size: 15px;
    }

    .video-background {
        width: 310px;
        height: 405px;
    }

    .video {
        width: 242px;
        height: 200px;
        top: 149px;
    }

}