body,
html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

body {
    background-color: rgba(158, 232, 209, 0.714);
}

li {
    color: rgb(61, 84, 114);
    margin-left: 110px;
    margin-bottom: -8px;
}
p{
    color: rgb(53, 103, 146);
    font-size: larger;
}
a {
    color: rgb(143, 123, 23);
}

h3{
    color:rgb(175, 116, 27)
}

h2 {
    color: rgba(17, 44, 77, 0.697);
    background-color: rgb(219, 255, 243);
}

h1 {
    color: rgb(59, 10, 72);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 8;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    outline: 13px double rgba(216, 99, 15, 0.735);
    text-shadow: 2px -2px rgb(255, 246, 240),
        -2px 2px rgb(255, 246, 240),
        2px 2px rgb(255, 246, 240),
        -2px -2px rgb(255, 246, 240);
}


#banner-background {
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
    flex-wrap: nowrap;
    background-clip: content-box;
    background-size: 70%;
    background-color: rgba(17, 21, 22, 0.799);
}

header {
    background-color: rgba(131, 70, 210, 0.282);
    color: rgba(131, 70, 210, 0.282);
    margin-top: 25px;
    margin-bottom: -11px;
    padding: 25px;
    /* background-image: url(sparkling-water.jpg); 
    background-repeat: no-repeat; */
}

section{
    margin-left: 70px;
    background-color: rgb(193, 255, 234);
    padding-bottom: 20px;
    padding-top: 10px;
}

#section1 {
    position: relative;
    top: -370px;
    left: 137px;
    right: 200px;
}

#section2 {
    margin-left: 70px;
    position: relative;
    left: 450px;
    top: -718px;
}

.button_section {
    background-color: aliceblue;
    position: relative;
    top: 55px;
    padding: 10px;
    width: 115px;
    border: 10px solid rgb(149, 188, 224);
    border-radius: 20px;
    border-left: 30px double rgb(85, 165, 161);
}

.button {
    color: rgb(255, 242, 226);
    position: relative;
    display: inline-flex;
    grid-column: auto;
    height: 115px;
    width: 115px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-color: rgba(255, 174, 53, 0.735);
    border-width: 8px;
    border-radius: 20%;
    padding: 32px;
    text-decoration: underline;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 18px;
    transition-duration: 1s;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 8px;
    background-size: 100%;
}

.button:hover {
    border-color: rgb(255, 190, 12);
    color: rgba(0, 1, 5);
    opacity: 75%;
}

#art.button {
    background-image: url(gold-blue-painting.jpg);
}

#mythology.button {
    background-image: url(ceramic-purple-tile.jpg);
}

#garden.button {
    background-image: url(blue-ethernal-lotus-cropped.jpg);
}

#hinduism.button {
    background-image: url(green-pink-lotus.jpg);
    width: 30px;
    height: 30px;
    margin-left: 220px;
    border-color: rgb(205, 255, 41);
    border-width: 15px;
}

#christianity {
    background-image: url(red-sewen-heart-cross.jpg);
    width: 30px;
    height: 30px;
    margin-left: 220px;
    border-color: rgb(124, 178, 255);
    border-width: 15px;
}

textarea {
    color: rgb(11, 35, 27);
    background-color: rgb(231, 211, 255);
    border-radius: 20px;
    border-width: 5px;
    border-color: rgb(228, 242, 255);
    padding-top: 10px;
    padding-right: 10px;
    margin-left: 10px;
    font: message-box;
    position: relative;
    justify-self: left;
    overflow: auto;
    text-indent: 10px;
    text-align: left;
    field-sizing: content;
    min-width: 400px;
    max-width: 1000px;
    min-height: 50px;
    max-height: fit-content;
}

#save {
    color: rgb(200, 228, 255);
    background-color: rgb(47, 47, 77);
    border-radius: 5px;
    border-width: 5px;
    border-color: azure;
    transition: 1s;
}
#reload{
    color: rgb(200, 228, 255);
    background-color: rgb(48, 138, 141);
    border-radius: 5px;
    border-width: 5px;
    border-color: azure;
    transition: 1s;
}
#save:hover{
    border-color: rgb(255, 199, 44);
    opacity: 75%;
}
#reload:hover{
    border-color: rgb(255, 199, 44);
    opacity: 75%;
}
#hinduism-header{
    margin-top:60px;
    margin-bottom:-15px;
    padding-bottom: 50px;
}
.hinduism-topics{
    margin-top: 10px;
}
.christianity-topics{
    margin-top: 10px;
}
.hinduism-info{
    text-align: left;
    margin-top: -360px;
    margin-left:240px;
}