body {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;

    color: black;
    line-height: 150%;
    transition: background-color 250ms;
}

footer {
    height: 40vh;
    width: 100%;
    background-color: #365D4D;
    margin-top: -20vh;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#footer-text {
    padding: 0 40px;
    max-width: 600px;
    margin: 0 auto;
    color: #F5DEC9;
}

p {
    font-weight: bolder;
    font-size:larger;
    line-height: 1.5;
}

.centered {
    display: flex;
    vertical-align: middle;
    align-items: center;
    margin: auto;
}

#hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: #365D4D;
    z-index: 10;
}

#hero-image-container {
    position: relative;
    padding:40px;
    height:70vh;
    width:100%;
    max-width: 800px;
    margin: 0 auto;
}

#hero-image {
    background-image: url("./assets/hero.jpg");
    background-position: center;
    background-clip: content-box;
    background-size: 1520px;
    border-radius: 8px;
    height:100%;
    width:100%;
}

#hero-text {
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    color: #F5DEC9;
}

#hero-text-header {
    font-family: 'Noto Serif', serif;
    font-size: 36pt;
    padding-bottom: 32px;
    line-height: 1.125;
}

#hero-text-body {
    column-count: 2;
}

#images {
    display: flex;
    
}

.slide-text {
    max-width: 440px;
}

.shapes {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    /* filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 0.1)); */
    max-width:150px;
}

#shape-cane {
    width: 17vw;
    left: 3vw;
    top: 3vh;
}

#shape-circle {
    width: 15vw;
    right: 8vw;
    top: 1vh;
}

#shape-leaf {
    width: 17vw;
    right: 1vw;
    bottom: 2vh;
}

#shape-star {
    width: 20vw;
    left: 6vw;
    bottom: 0vh;
}

.shape-animate {
    animation: rotateBackAndForth 2s linear infinite;
}

.shape-animate-2 {
    animation: rotateBackAndForth 2.5s linear infinite reverse;
}

@keyframes rotateBackAndForth {
    0% {
      transform: rotate(0deg);
    }
    33% {
      transform: rotate(3deg);
    }
    66% {
        transform: rotate(-3deg)
    }
  }

  @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(359deg);}
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0; 
    margin-bottom: 20vh;
    z-index: 1;
}

.circle {
    width: 10vw; 
    height: 10vw;
    border-radius: 50%;
    background-color: #365D4D; 
}


section {
    min-height: 60vh;
    position: relative;
    padding:20px 40px;
    margin: 40px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    overflow-x: hidden;
    overflow-y:hidden;
}

section:nth-child(even) {
    flex-direction: row-reverse;
}

section div {
    position: relative;
    width:40%;
}

section img {
    position: relative;
    width: 40%;
    height:auto;
    border-radius: 32px;
    z-index: 20;
}

#last-section {
    margin-bottom: 20vh;
}

div.stamps {
    height:auto;
}

div.stamps img {
    position: absolute;
    animation: spin 30s linear infinite;
    scale: 25%;
    z-index: 50;
}

@media (max-width: 800px) {

    section img {
        width: 50%;
    }
    section div {
        width: 30%;
    }
}

@media (max-width: 650px) {

    section {
        flex-direction: column;
        padding: 20px 24px;
        height: 90vh;
        justify-content: center;
        margin: 0 auto;
        overflow: hidden;
    }

    section:nth-child(even) {
        flex-direction: column;
    }

    section div {
        width: 100%;
        margin-top: -24px;
        z-index: 30;
    }

    section img {
        width: 50vh;
        border-radius: 16px;
        overflow: hidden;
    }

    .slide-text {
        max-width: 480px;
    }

    p {
        font-size: medium;
        font-weight: 400;
        padding: 16px;
        border: 1px solid;
        border-radius: 4px;
    }

    #footer-text p {
        border: none;
    }

    #hero-text {
        padding: 0 16px;
        font-size: 14px;
    }

    #hero-text-header {
        padding-bottom: 16px;
        font-size:32px
    }

}

@media (max-width: 450px) {
    #hero-image-container {
        padding: 16px;
    }

    #hero-text-header {
        margin-top: 16px;
    }
}