body {
    background: linear-gradient(saddlebrown,  #4d2600
);
    font-family: baskerville, serif;
}

h1 {
    color: moccasin;
    text-align: center;
    font-size: 3em;
    margin-top: 20px;
}

h2 {
    color: moccasin;
    text-align: center;
    font-size: 2em;
    margin-top: 20px;
}

p {
    color: moccasin;
    text-align: justify;
    font-size: 1.5em;
    margin: 20px;

    text-indent: 40px;
}


.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}


.img-right {
    float: right;
    margin-left: 20px;
    width: 300px;
}

hr {
    border: 1px solid moccasin;
    margin: 20px;
}

.img-left {
    float: left;
    margin-right: 20px;
    width: 300px;
    z-index: 2;
}


         /* width */
        ::-webkit-scrollbar {
        width: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
        background: #f1f1f1;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
        background:  #a1a1a1;
        border-radius: 10px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
        background: gray;
        }

.background {
    justify-content: center;
    gap: 20px;
    z-index: -1;
    height: auto;
    display: flex;
    overflow: hidden;
    pointer-events: none;
}

.bg-img {
    width: 100%;
    opacity: .2;
    max-height: 3100px;
    object-fit: cover;
    position: absolute;
    transform: translateY(-42px); 
}