:root {
    --color-black: #0D0D0D;
    --color-brown1: #a68877;
    --color-brown2: #c5a987;
    --color-brown3: #D9CAB0;
    --color-green1: #082607;
    --color-green2: #154013;
    --color-green3: #bebf9b;
    --color-orange1: #d99036;
    --color-orange2: #FFC073;
    --color-orange3: #FFDFB7;

    --font-size-s: 1.5rem;
    --font-size-m: 3rem;
    --font-size-l: 4rem;
    --font-size-xl: 6rem;
}

@font-face {
    font-family: 'ABeeZee', sans-serif;
    src: url('ABeeZee.woff2') format('woff2');
}

@font-face {
    font-family: 'Anonymous Pro', sans-serif;
    src: url('Anonymous Pro.woff2') format('woff2');
}

html {
    background-image: url(./Assets/Illustrations/Worm.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-brown3);
    flex-wrap: wrap;
}


p {
    font-family: 'Anonymous Pro', sans-serif;
    font-size: var(--font-size-s);
    line-height: 2rem;
}

.home-nav {
    display: flex;
    justify-content: space-evenly;
    color: var(--color-black);
    font-family: 'Anonymous Pro', sans-serif;
    font-size: var(--font-size-s);
    margin-left: 15rem;
    margin-right: 15rem;
    padding-top: 2.5rem;
}

.home-nav a {
    text-decoration: none;
    color: var(--color-black);
}

.home-nav a:hover {
    color: var(--color-orange1);
}

.eyes {
    position: absolute;
    left: 1.75rem;
    top: 8.75rem;
    opacity: 30%;
}

h1 {
    padding-top: 6rem;
    padding-bottom: 5rem;
    ;
    font-family: 'ABeeZee', sans-serif;
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--color-green2);
    margin-left: 15rem;
    margin-right: 15rem;
}

h1 p {
    font-size: var(--font-size-m);
    margin-left: 0%;
}

p {
    padding-bottom: 2rem;
    line-height: 2rem;
    margin-left: 15rem;
    margin-right: 15rem;
}

h2 {
    font-family: "ABeezee", sans-serif;
    font-size: var(--font-size-l);
    font-weight: bold;
    color: var(--color-green2);
    padding-top: 5rem;
    padding-bottom: 5rem;    
    margin-left: 15rem;
    margin-right: 15rem;
}

button {
    font-family: 'Anonymous Pro' sans-serif;
    font-size: var(--font-size-s);
    font-weight: bold;
    box-sizing: inherit;
    border-color: var(--color-orange1);
    border-radius: 1rem;
    background-color: var(--color-orange1);
    padding: 1rem;
    margin-left: 15rem;
    margin-right: 15rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

button:hover {
    background-color: var(--color-orange3);
}

button a {
    text-decoration: none;
    color: var(--color-black);
}

.owl {
    position: absolute;
    right: 1rem;
    top: 45rem;
}

.text-balloon {
    position: absolute;
    left: 55rem;
    top: 35rem;
}

.popular-books {
    padding-top: 20rem;
}

.book__item1 {
    position: absolute;
    left: 22rem;
    top: 84rem;
}

.book__item2 {
    position: absolute;
    left: 46rem;
    top: 84rem;
}

.book__item3 {
    position: absolute;
    left: 67rem;
    top: 84rem;
}

.titles {
    font-family: 'Anonymous Pro', sans-serif;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    margin-left: 15rem;
    margin-right: 15rem;
    font-size: var(--font-size-s);
    line-height: 2rem;
    padding-bottom: 5rem;
}

.titles span1 {
    display: flex;
    color: var(--color-orange1);
    font-weight: bold;
}

.titles span {
    color: var(--color-orange1);
    font-style: italic;
}

ul {
    font-size: var(--font-size-s);
    font-family: 'Anonymous Pro', sans-serif;
}

article ul {
    color: var(--color-orange1);
    font-weight: bold;
}

article ul p {
    display: flex;
    align-items: flex-start;
}

article span {
    color: var(--color-orange1);
}

.tips-tricks {
    background-color: var(--color-green3);
}

.tips-tricks h2 {
    text-align: center;
}

.tips-tricks span3 {
    font-size: var(--font-size-s);
}

.tips {
    background-color: var(--color-green3);
}

.plant {
    position: absolute;
    left: 15rem;
    top: 120rem;
}

.sick-plant {
    position: absolute;
    right: 20rem;
    top: 128.5rem;
}

.branches__item1 {
    position: absolute;
    left: 2rem;
    top: 110rem;
    opacity: 30%;
}

.tips__item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5rem;
    line-height: 3rem;
    align-items: center;
    background-color: var(--color-green3);
    padding-top: 21rem;
    padding-bottom: 7rem;
}

.branches__item2 {
    position: absolute;
    left: 2rem;
    top: 130rem;
    opacity: 30%;
    transform: scaleX(-1);
}

.branches__item3 {
    position: absolute;
    left: 2rem;
    top: 150rem;
    opacity: 30%;
}

.branches__item4 {
    position: absolute;
    right: 2rem;
    top: 110rem;
    opacity: 30%;
    transform: scaleX(-1);
}

.branches__item5 {
    position: absolute;
    right: 2rem;
    top: 130rem;
    opacity: 30%;
}

.branches__item6 {
    position: absolute;
    right: 2rem;
    top: 150rem;
    opacity: 30%;
    transform: scaleX(-1);
}

.tips__item {
    display: flex;
    justify-content: space-evenly;
    font-size: var(--font-size-s);
    color: var(--color-black);
    font-family: 'Anonymous Pro', sans-serif;
}

.discover-more {
    text-align: center;
    font-style: italic;
}

.community-challenge {
    background-color: var(--color-brown2);
}

.community-illustration {
    position: absolute;
    right: 10rem;
    top: 190rem;
    opacity: 15%;
}

.community-buttons {
    display: grid;
    grid-template-columns: repeat(2, 0.fr);
}

.community-buttons button {
    background-color: var(--color-green2);
    color: var(--color-brown3);
    border-color: var(--color-green3);
    margin-bottom: 1rem;
    padding: 1rem;
    margin-left: 15rem;
    margin-right: 15rem;
}

.community-buttons button:hover {
    background-color: var(--color-green3);
    color: var(--color-black);
}

.challenge-title-logo {
    position: absolute;
    left: 36rem;
    top: 228rem;
}

.challenge {
    position: absolute;
    left: 2rem;
    top: 241rem;
    opacity: 15%;
}

.ranking p {
    background-color: var(--color-brown2);
    display: flex;
    justify-content: flex-end;
    color: var(--color-orange2);
}

.ranking {
    font-family: 'Anonymous Pro', sans-serif;
    font-size: var(--font-size-s);
    background-color: var(--color-brown2);
    font-weight: bold;
    padding-bottom: 7rem;
}

.ranking__item {
    line-height: 3rem;
    align-items: center;
    background-color: lightgray;
    box-sizing: content-box;
    border: 0.2rem solid var(--color-brown2);
    border-radius: 10rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 15rem;
    margin-right: 15rem;
}

.ranking__item {
    display: flex;
    justify-content: center;
}

.ranking__item {
    display: flex;
    justify-content: space-between;
}

.join-community {
    text-align: center;
    font-style: italic;
}

.form {
    position: relative;
    background-color: var(--color-green3);
    font-family: 'Anonymous Pro', sans-serif;
    font-size: var(--font-size-s);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

legend {
    margin-left: 15rem;
    font-family: 'Anonymous Pro', sans-serif;
    color: var(--color-orange1);
}

fieldset {
    margin-left: 10rem;
    margin-right: 10rem;
    box-sizing: content-box;
    border: 0.1rem solid var(--color-black);
    border-radius: 10rem;
}

input {
    margin-bottom: 1.5rem;
}

.Form_top_left {
    padding-top: 5rem;
    padding-bottom: 2rem;
    margin-left: 10rem;
    margin-right: 10rem;
}

.Form_bottom_left {
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-left: 10rem;
    margin-right: 10rem;
}

.Form_top_right {
    position: absolute;
    top: 8.5rem;
    right: 30rem;
}

.Form_comment {
    position: absolute;
    bottom: 16rem;
    right: 21.5rem;
}

.Form_button {
    position: absolute;
    bottom: 6.5rem;
    right: 6.5rem;
}

footer {
    position: relative;
    margin-left: 15rem;
    margin-right: 15rem;
    padding-bottom: 20rem;
}

footer p {
    display: flex;
    justify-content: center;
    padding-top: 5rem;
}

.social-media {
    display: flex;
    justify-content: center;
}

.social-media__item1:hover {
    opacity: 30%;
}

.social-media__item2:hover {
    opacity: 30%;
}

.social-media__item3:hover {
    opacity: 30%;
}

.footer-book {
    position: absolute;
    top: 19rem;
    left: -10rem;
    opacity: 30%;
    transform: rotate(-22deg);
}