body { 
    background: black;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* tune these to your real nav/footer heights */
:root {
  --nav-h: 15px;
  --footer-h: 15px;
}

a, p, h1, h2, h3, h4, h5, h6, li, hr {
    font-family: "darkmode-on", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f8f9fa;
}

.display-6 {
    font-family: "darkmode-on", sans-serif;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 40pt;
}

.display-5 {
    font-family: "darkmode-on", sans-serif;
    font-weight: 400;
    font-size: 2.15rem;
}

h3 {
    font-size: 2rem;
}

a {
    color: #7d53ca;
}

.drkgrey {
    background-color: hwb(281 0% 63%);
    border-radius: 5rem;
}

.navbar {
    background-color: #212529;
}

.news {
    max-width: 90%;
}

p.lead {
    font-family: "darkmode-on", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.smallPic {
    display: none;
}

.janlink {
    max-width: 350px;
}

.shadow-back {
    background: #7d53ca;
}

.logo {
    
    max-height: 350px;
    opacity: .75;
 }


 .main-pic {
    width: auto;
 }

 .newspic {
    max-width: 300px;
 }

.bttnz {
        max-width: 400px;
    }

.main-left {
    padding-left: 50px;
}

.main-right {
    padding-right: 50px;
}

.pink {
    background-color: #000000;
}


.px100 {
    width: 17px;
    margin-right: -2px;
    padding-bottom: 6px;
}

.px200 {
    width: 23px;
    margin-right: 2px;
    padding-bottom: 6px;
}

.btn-outline-light.btn-outline-light:hover {
    color: #231761;;
    border-color: #231761;
  }

  .p-body {
    text-align:justify;
 }

 

 @media (max-width: 575px) { 
    
    .janlink {
    max-width: 200px; }
    
    .bttnz {
        max-width: 300px;
    }
    
    
    .logo {
        max-width: 200px;
    }

    .smallPic {
        display: flex;
        justify-content: center;
    }

    .cover-pic {
        max-width: 200px;
        display: flex;
    }

    .main-pic {
        display: none;
        justify-content: center;
    }

    .jan1x {
        border: 2px solid #555;
        border-radius: 150px;
        max-width: 200px;
    }

    .p-body {
        text-align:justify;
     }
}

 @media (min-width: 576px) {

    body {
        overflow-y: scroll;
    }

    .main-pic {
        justify-content: center;
    }

    .jan1x {
        border: 2px solid #555;
        border-radius: 150px;
        max-width: 300px;
    }

    .main-left {
        max-width: 200px;
    }
    .main-pic {
        
        display: none;
    }
}


@media (min-width: 768px) {   

body {
        overflow-y: scroll;
}

        .jan1x {
        border: 2px solid #555;
        border-radius: 150px;
        max-width: 300px;
    }
    .main-pic {
        
        display: none;
    }
    
}

@media (min-width: 992px) {   


    .jan1x {
        display: none;
        border: 2px solid #555;
        border-radius: 150px;
    }
    
    .main-pic {
        
        display: flex;
    }

    .main-left {
        display: flex;
        min-width: 800px;
    }
}

@media (min-width: 1200px) {
    
    
    .smallPic {
        display: none;
        justify-content: center;
    }

    .jan1x {
        border: 2px solid #555;
        border-radius: 150px;
        max-width: 300px;
        max-height: 300px;
    }

    .main-left {
        display: flex;
        min-width: 400px;
    }

    .main-pic {

        display: flex;
    }


}




@media (min-width: 1400px) {
    .main-left {
        display: flex;
        min-width: 400px;
    }
    
    .main-right {
        padding-right: 10px;
    }

}