html,
    body {
        scroll-behavior: smooth;
        font-family: 'Chivo', sans-serif;
    }

    #bg {
        background-image: url("../img/StockSnap_KMFUUDYLGA.jpg");
        height: 100vh;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
    }

    #bg-2 {
        background-image: url("../img/bg-2.jpg");
        height: 100vh;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
    }

    #main {
        height: 100vh;
        font-family: 'Chivo', sans-serif;
    }


    #box {
        border: 2px solid transparent;
        padding: 5px;
        border-radius: 200px 10px;
        background-color: rgb(233, 199, 136);
        background-image: url("https://images.pexels.com/photos/1988507/pexels-photo-1988507.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
        background-size: cover;
        font-family: 'Abril Fatface', cursive;
    }

   #program-card
   {
    background-color: #674b7c; 
    color: white;
   }
   #program-card2
   {
    background-color: #ff3627; 
    color: white;
   }
   #program-card3
   {
    background-color: #864aff; 
    color: white;
   }


/* Navbar CSS */
    .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        overflow-x: hidden;
        transition: 0.5s;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 30px;
        color: white;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover,
    .overlay a:focus {
        color: lightseagreen;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
        .overlay a {
            font-size: 20px
        }

        .overlay .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }




    #footer
    {
        background-color: #ff0d7b;
    }