@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Freckle+Face&family=Parastoo:wght@400..700&display=swap');

body{
    text-align: center;
    background-color: #9cc96b;
}

/* testing site body */
.tbody{
    background-image: url(https://i.pinimg.com/736x/7d/6e/61/7d6e612b8c73596693aab9f0894fb0fb.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.indexbody{
    background: url(images/goopbg.png) repeat 0 0;
    animation: animate-bg 30s infinite linear;
}

@keyframes animate-bg{
    100%{
        background-position-x: -1920px;
    }
}


h1{
    font-family: "Freckle Face", sans-serif;
}

h2{
    background: linear-gradient(rgb(106, 131, 86), #8ca86e);
    color: #000000;
    border-radius: 10px;
    font-family: "Comic Relief", sans-serif;
    font-weight: bold;
    font-size: larger;
    padding: 5px;
}

h3{
    font-family: "Parastoo", "Times New Roman", "Century Gothic", sans-serif;
    font-size: 20px;
    font-optical-sizing: auto;
    font-weight: 500px;
    font-style: normal;
}

h4{
    background-color: #485043;
    color:white;
    font-family: "Times New Roman", "Century Gothic", sans-serif;
    font-style: italic;
    font-size: large;
}

p{
    font-family: "Comic Relief", sans-serif;
}

a{
    font-family: "Comic Relief", sans-serif;
    font-size: larger;
}

td{
    padding: 5px;
}

hr{
    height: 2px;
    border: none;
    background-color: rgb(126, 161, 88)
}

/* highlight text */
.hl{
    background: linear-gradient(rgb(106, 131, 86), #8ca86e);
}

.container{
    display: flex;
}

/* box text */
.box{
    border: 5px solid;
    border-color: black;
    border-radius: 5px;
    height: 75%;
    width: 40%;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.lbox{
    border: 5px solid;
    border-color: black;
    border-radius: 5px;
    height: 75%;
    width: 20%;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    
    overflow: hidden;
}

.rbox{
    border: 5px solid;
    border-color: black;
    border-radius: 5px;
    height: 75%;
    width: 20%;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: auto;
    overflow: hidden;
}

/* fixes boxes */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* justifies text */
.jt{
    text-align: justify;
}

/* image to the right */

.rimg{
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    max-width: 30%;
}