html {
    background: #6cb33f;
}

.index_link {
    text-decoration: none;
}
.index_heading {
    cursor: pointer;
}

h1 {
    color: #000;
}

h2, p {
    color: #fff;
}

ion-icon, .fa-envelope, .fa-wordpress-simple, .fa-medium {
    color: #000;
}

.topnav a {
    color: #fff;
}

.dropbtn {
    color: #fff;
}

.dropdown-content a:hover {
    background-color: #d2d0db;
    color: black;
}

.dropdown-content a {
    color: black;
}

video {
    border-radius: 10px;
    width: 50vw;
}

.pdf_link {
    color: #fff;
    font-family: 'Poppins';
    font-size: 2rem;
}


.container{
    /* This is a reusable class that can be used anywhere we want to apply this constraint */
    max-width: 1140px;
    margin: 0 auto; /* y,x. auto: if we have extra space, the space will be equally distributed to the sides of this block 
    setting this margin to make the block centered, so that as the screen gets wider we'll have extra space on the sides of the block */
}

.grid{
    display: grid;
    justify-items: center;
}

.feature{
    margin: 2rem 0; /* separate features */
}