body {
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100vh;
    font-family: "type3e", serif;
    font-style: normal;
    font-size: 1.15rem;
    line-height: 1;
    background: rgb(255, 142, 4);
    color: rgba(20, 20, 20, 0.95);
background: rgb(24, 23, 21);
min-height: 100vh;
}
@media (min-width: 393.95px) { body {font-size: 1.2rem;}}
@media (min-width: 575.95px) { body {font-size: 1.1rem;}}
@media (min-width: 767.95px) {.item-pic {width: 60%;}}

.container-sm {
    max-width: 650px;
    background: rgb(213, 28, 28);
    background-image: url("opf_paper.jpg");
    background-repeat: repeat;
    background-size: 100vw;
}
@media (min-width: 575.95px) { .container-sm {background-size: 40vw;}}
@media (min-width: 767.95px) {.container-sm {background-size: 20vw;}}

.magazine {min-height: 100vh; display: flex; flex-direction: column; gap: 1rem;}
.about-section {line-height:0.68!important;}
@media (min-width: 575.95px) { .about-section {line-height:0.6!important;}}

.start {text-indent: 1em;}
.bio { text-transform: uppercase;  text-indent: 1em;}
.question { width: 100%; text-align: left; font-style: italic;}
.answer { width: 100%; text-align: left;padding-bottom: 1rem; }
.answer, .question, .bio {display:block; margin-bottom: .75rem;}

#name1, #name2, #name3, #name4, #name5, #name6, #intromenu, #creditsmenu {
  display: block;

}



.nolink {padding-left: 1rem;}
.item {
    height: auto;
    display: flex;

}
.content.carousel-container-wrapper {
    min-height: 95vh;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
    background: rgb(0, 0, 0, 0);
    border: 10px solid black;
    color: rgb(0, 0, 0);
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-button.left { left: 0; }
.nav-button.right { right: 0; }
.nav-button:hover { opacity: .1; }

.carousel-container {
    display: flex;
    width: auto;
    transition: transform .8s ease;
    height: 100%;
}

.tab {cursor: pointer;}
@media (min-width: 767.95px) {
    .tab:hover {text-decoration: underline;font-weight: 600;}
}


.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0s ease-out, transform 8s ease-out;
    clip-path: inset(0 0 100% 0);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    animation: buildPageTwoStage 15s ease-out forwards;
}

@keyframes buildPageTwoStage {
    0% {
        clip-path: inset(0 0 100% 0);
    }
    50% {
        clip-path: inset(0 0 70% 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}


a {text-decoration: none; color: rgba(18, 18, 18, 0.95);}
@media (min-width: 767.95px) {
    a:hover {text-decoration: underline;font-weight: 600;cursor: pointer;}
}

.brand:hover {text-decoration: none;font-weight: normal!important;cursor: arrow;}
a.button.menu-button,
button.menu-button,
html input[type="button"],
input[type="submit"].menu-button {all: unset; height: 2.7rem;}


.noclick {  pointer-events: none;  cursor: default!important;  user-select: none;}
.noclick:hover {color: inherit!important;font-weight: 400!important; cursor: default!important;}

.main-form, .emailoctopus-form, input {
    font-size: 1rem!important; border-radius: 0!important;}
.modal-container {background: rgba(0, 0, 0, 0.3)!important;transition: opacity .2s ease-in!important;}    
.modal-container-inner {border-radius: 0!important;}
.mastfoot {display: none!Important;} 
.modal-container-inner, .mb-2, .btn-primary {margin-bottom:0!important;} 
.slide-in-container .slide-in-container-inner {padding: 0!important;border-top: 1.5px solid black;border-radius: 0!important;padding-top: .3rem!important;transition: .5s!important;bottom: 5%!important;}
@media (max-width: 767.95px) {.nomobi {display: none;}}
@media (min-width: 768px) {.nodesktop {display: none;}}

.up-arrow {position: fixed; top: 1rem; right: .75vw; z-index: 1000;}
@media (min-width: 767.95px) {.up-arrow-link{color:rgb(213, 28, 28)!Important;right: 5vw; bottom: 2rem;}}