/* This gives me that panning right effect on the image */
body {
    background: url(https://cdn.pixabay.com/photo/2016/10/20/18/35/earth-1756274_1280.jpg);
    background-size:cover ;
    background-position: center center;
    background-attachment: fixed;
    font-family: 'helvetica', sans-serif;
}
/* This is the panning image function */
@keyframes panning {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }

}
/* Make sure to keep this connect with above^ */
.bg-panning-image {
    animation: panning 20s linear infinite;
}
/* Styling intro */
#intro {
    background: rgba(155, 154, 154, 0.2);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}


/* positions the modal */
.modal{
    display:none; 
}

/* gives the modal a bit of styling, and centering on the page */
.modal-content {
    background-color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 10px;
}

/* Moves the position of the close button and gives it some styling */
.close {
    margin-top: -15px;
    font-size: 25px;
    font-weight: bold;
    float:right;
}

.close:hover{
    cursor: pointer;
}
/* Adjusts automatically for small screens */
@media (max-height: 760px) {
    h1 {
        font-size: 1rem; /* Adjust the font size as needed */
    }

    p {
        font-size: .75rem; /* Adjust the font size as needed */
    }
}