@media screen and (width >= 1910px) {
    .big{
        display: block !important;
    }
    .read-callout img {
        margin-bottom: 1rem;
    }
}

@font-face {
    font-family: cprime;
    src: url("../assets/fonts/CourierPrime.ttf");
}

body{
    font-family: cprime;
    margin: 0;
    height: 100%;
    background-color: black;
    background-image: url("../assets/images/backgrounds/sitebg.png");
    font-size: .9rem;
}

html{
    height: 100%;
    width: 100%;
    font-size: 100%;
    image-rendering: pixelated;
    text-rendering: optimizeSpeed;
}

.big{
    display: none;
}

.dialog{
    border:dashed gray 1px;
    margin-top:1rem;
    padding-left:1rem;
    padding-right:1rem;
}

.dialogger{
    text-align:left;
}



.dialog-holder{
    background:white !important;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin-left:auto;
    padding-top: .5rem;

    margin-right:auto;
    p {
        margin-top:.5rem;
        margin-bottom:.5rem;
    }
}

.dialog-window{
    border:gray 1px dashed;
}

#dialog-toggle{
    text-align: center !important;
    background:linear-gradient(rgb(255, 129, 129) 3%,rgb(200, 0, 0) 77%,rgb(156, 41, 41));
    border-top: 2px solid #9c9c9c !important; 
    border-left: 2px solid #7c7c7c63 !important; 
    border: 2px solid rgba(0, 0, 0, 0.3);
color: rgb(255, 255, 255);
font-family: cprime;
margin: auto;
font-size: .8rem;
}


#dialog-toggle:active{
     background:rgb(156, 41, 41) !important;
}
#dialog-toggle:hover{
     background:linear-gradient(rgb(255, 170, 170) 3%,rgb(255, 0, 0) 77%,rgb(156, 80, 80));
}
.topbar{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(0deg,rgba(163, 31, 31, 1) 0%, rgba(77, 0, 0, 1) 4%, rgba(0, 0, 0, 1) 45%, rgba(54, 0, 0, 1) 50%, rgba(107, 35, 35, 1) 55%, rgba(135, 35, 35, 1) 96%, rgba(224, 175, 175, 1) 100%);
    padding-top: .2rem;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    flex: 1;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.26);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom: maroon 1px solid;
    position:sticky;
}

.topbar h1{
    font-size: 1rem;
    margin: 0 .5rem 0 .5rem;
    color: white;
    text-decoration: double;
    text-decoration-thickness: 3px;
    font-weight:normal;
}

.topbar img{

    height: auto;
  
}

.topbar-wrapper{
    display: flex;
    position: absolute;
    width: 100%;
}

.button{
    display: none;
}


.body-holder{
    display:flex;
    height: 100%;
}


.ad{
    max-width: 234px;
    width: 100%; 
    height: 60px;
}

.ad-placement{
    margin-bottom: 1rem !important;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../assets/icons/SPONSOR.png");
    background-position: center;
    min-height: 60px;

}


.col-left{
    width: 70%;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    margin-right: 1rem;
    flex: 3;
}

.col-center{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    margin: 1rem;
    margin-right: 1rem;
    flex: 3;
}

.col-right{
    width: 30%;
    margin: 1rem;
    margin-left: 0.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.col{
    margin-top: 1rem;
}

.col-50{
    width:50%;
    padding:1rem;
    display:flex;
    flex-direction:column;
}
.flex{
    flex:1;
}

.title{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: end;
    justify-content: center;
}

.read-callout{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: black;
    height: 100%;
    overflow: hidden;
    background-image: url("../assets/images/callout.png");
    background-position: center;
    background-size: cover;
}

.readnow{
    height: 4rem;
    margin-bottom: 1rem;
}

.hidden {
    display: none;
}

.read{
    margin-top: 2rem;
    height: 100%;
    overflow-y: auto;
    padding:1rem;
    text-align:center;
    display: flex;
    flex-direction: column;
    width:50%;
}

.text-holder{
    font-weight:700;
}

.center-col{
    align-items:center;
}

.news-new{
    background-color: rgb(120, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    color: white;
}

.news-new h4, .news-new h3 {
    margin: 0;
    margin-left:0.5rem;

}

.news-new h4 {
    margin-bottom: 0.5rem;
}

.news-new img{

    display: block;
    width: 100%;
}

.prev-news{
    overflow-y: auto;
    flex: 1;
}




a{
    color: white !important;
}

.about{
    margin-top: 2rem;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
    text-align:center;

}

.about p{
    font-size:1rem;
}

.newspost{
    margin-top: 2rem;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
}



.newsheader{
    font-size: 2rem !important; 
    text-align: center;
    margin: 0;
}

.newsheader:before{
   content: "" !important;
}

.newspost h1 {
    font-size: 1.25rem;
    margin: 0;
}



.newscontent{
    margin-top: 1rem;
}

.newssubheader {
    font-size: 1.2rem;
    font-weight: bolder;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.read a{
    color:blue;
    font-size: 1.15rem;
}

.news h2 {
    margin: 0;
    color: rgb(255, 255, 255);
    width: auto;
    padding: 3px;
    background:linear-gradient(rgb(255, 129, 129) 3%,rgb(200, 0, 0) 77%,rgb(156, 41, 41));
    border-top: 2px solid #9c9c9c !important; 
    border-left: 2px solid #7c7c7c63 !important; 
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.26), 1px 1px 0px rgb(224, 224, 224);
    z-index: 5;
    font-size: 1rem;
    border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.news h1 {
    margin: 0;
    color: rgb(255, 255, 255);
    width: auto;
    padding: 3px;
    background-image: linear-gradient(rgb(0, 0, 0),rgb(20, 68, 77) );
    border: 2px solid rgba(0, 0, 0, 0.3);   
    z-index: 5;
    font-size: 1rem;
    text-align: center;
}

.news-new h4{
    font-size: 1rem;
}
.news-new h3{
    font-size: 1.25rem;
    margin-top: 0.5rem;
}



.news-list{
    background-color: rgb(100, 0, 0) !important;
    overflow-y:hidden;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-list p {
    margin: 0;
    padding:0.1rem;
    background-color: rgb(120, 0, 0);
    font-weight: 500;
    color: white;
    padding-left:0.5rem;
}

.altnews{
    background-color: rgb(100, 0, 0) !important;
}

.news{

    flex:8;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bright{
    background-color: rgb(255, 255, 255) !important;
    background-size: cover;
    background-repeat: no-repeat
}

.window{
    
    box-sizing:border-box;
    background-color: rgb(53, 0, 0) !important;
    color: white !important;
}

.news-top{
    margin-top:2rem;
}

.sub-window{

}

.newspost a{
        color:black;
    }

.window-nf{
    border-image: url("../assets/images/backgrounds/window.png");
    border-image-slice: 20%;
    border-image-repeat: stretch;
    border-width: 4px;
    border-style: solid;
    box-sizing:border-box;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.26), 1px 1px 0px rgb(224, 224, 224);
}

.imagev1{
    height:425px;
}
.imagev2{
    height:425px;
    width:566px;
}
.moviev1{
    height:425px;
    width:425px;
    border:none;
}

.chapter{
    font-weight:700;
    font-size:1.5rem !important;
    margin:0;
}

.image-holder{
    height:425px;
    background-color:black;
}

.text-holder{
    width:100%;
    align-self:center;
    

}

#dialog-text{
    text-align:left;
}

.button-holder{
    display:flex;
    flex-direction:column;
    margin-top:auto;
}

.back{
    align-self: baseline;
    margin: 0;
}
.reader{

}
.logo{
    height: auto;
    max-width: 25rem;
    margin-top: 2rem;
    margin-bottom: auto;
}

.vert{
    flex-direction:column;
}

.newspost img{
        width:50% !important;
        margin-left:auto;
        margin-right:auto;
    }
@media screen and (min-width: 750px) {
   .topbar{
        display: flex !important;
    } 
}

@media screen and (max-width: 750px) {
    .imagev2{
    height:auto;
    width:100%;
    }
    .imagev1{
    height:auto;
    width:100%;
    }
    .image-holder{
        height:auto;
    }
    .read{
        width:100%;
    }
    
    .logo{
        margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
        max-width:100% !important;
    }
    .logo-bumper{
        width:20% !important;
    }
    .body-holder{
        flex-direction: column;
    }
    .col{
        width: auto;
        padding: 0;
        margin: 0 !important;
        flex: none;
    }
    .col-right{
        overflow-y: unset;
    }
    .read-callout{
        width: auto;
    }
    .col-center{
        height: 100%;
    }
    .topbar{
        flex-direction: column;
        padding: 1rem;
        border: .25rem black solid;
        display: none;
    }
    .button{
        display: block;
    }
    .topbar img{
        display: none;
    }
    .image-holder{
        width:100%;
    }
    .topbar-wrapper{
        position: fixed;
        top: 0;
        left: 0;
    }
    .col-left{
        height: 500px;
    }
    .read-callout{
        flex: 1;
        height: auto;
    }
    .news-new img{
        display: block;
        width: 100%;
    }
    .news-new{
        background-image: none;
    }
    .ad-placement{
        margin-top: 1rem;
    }
    
    .newspost img{
        width:100% !important;
    }
    
    .about{
        margin-top: 0;
        height: 100%;
    }
    
    .newspost{
        margin-top: 0;
        height: 100%;
    }
    .newscol {
        height: 100%;
    }
}