/* Import fonts that are used on the page */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/*  adding styles */
/* reseting margin and padding */
* {
    padding: 0;
    margin: 0;
}

/* setting the default/basic colors */
body {
    color: #23260c;
    background: #D6F8A0;
}

/* styling and fixing the nav bar to the top of the page */

header {
    background: #D6F8A0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
}

.nav-bar {
    display: flex;
    flex-direction: row;
    margin: 1vh 0.2vw;
    padding: 1%;
}

h1,
h2,
h3 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #3C533F;
}

/* spacing to the icon on the top left corner */
.icon {
    max-height: 7vh;
    margin: auto;
}

.top-nav {
    letter-spacing: 0.05vw;
    text-align: center;
    flex-grow: 1;
    margin: auto;
}

/* list of links to the pages */
ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

li {
    display: flex;
}

.top-nav>ul>li {
    position: relative;
    overflow: hidden;
    font-size: 110%;
}

a {
    color: #3C533F;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 0.2vw;
    z-index: 10;
    font-size: larger;
}

.nav-btn {
    padding: .6rem .6rem;
}

.nav-btn span {
    position: relative;
    display: inline-flex;
    background-color: #D6F8A0;
    z-index: 3;
}

/* bottom line when user hover the mouse */
.nav-btn div span:hover {
    border-bottom: 0.05vw solid #3C533F;
}

/* bottom line to indicate the current page */
.active {
    border-bottom: 0.05vw solid #3C533F;
}

/* styles for the titles of the pages */
section {
    margin-top: auto;
    text-align: center;
}

/* spacing the first section */
.section-about {
    margin-top: 4vh;
}

/* styles for the titles */
.home-title {
    padding: 1vw;
    letter-spacing: 0.1vw;
}

.about-title {
    margin: 0.78vw;
}

.home-title,
.about-title {
    text-shadow: 0 0 0.1vw #E5DD81;
}

.resources-title,
.contact-title {
    padding: 2.1vh;
    letter-spacing: 0.1vw;
}

.home-title,
.resources-title,
.contact-title {
    font-size: 200%;
}

.section1 h3 {
    padding-bottom: 1vh;
}

/* spinning yin yang styles */
/* Necessary use of pixels for mesures */
.big-icon {
    width: 300px;
    height: 300px;
    padding: 10px;
    background: black;
    border-radius: 100%;
    position: relative;
    animation: rotate 40000s infinite;
    margin: 3vh;
    float: left;
}

.big-icon .white-circle {
    width: 150px;
    height: 150px;
    background: white;
    border-radius: 100%;
}

.big-icon .black-circle {
    width: 150px;
    height: 150px;
    background: black;
    border-radius: 100%;
    margin-top: -154px;
    z-index: auto;
    position: absolute;
    margin-left: 75px;

}

.white-tail {
    width: 150px;
    height: 300px;
    background: white;
    display: inline-block;
    margin-top: -150px;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
}

.black-eye {
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 100%;
    position: absolute;
    margin-top: -260px;
    margin-left: 120px;
}

.white-circle {
    position: relative;
    left: 75px;
}

.bi-center {
    text-align: center;
}

.bi-right {
    text-align: right;
}

.white-eye {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 100%;
    position: absolute;
    margin-top: -105px;
    margin-left: 120px;
}

/* Keyframes can make the yinyang symble to spin */
@keyframes animate_border {
    to {
        transform: translateX(-50%)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-3600000deg);
    }
}

/* Styles for the cards and image */

.presentation {
    width: 85%;
    margin: 3vh auto;
    justify-content: center;
    text-align: justify;
    box-shadow: 0.2vw 0.2vw 0.2vw 0.2vw #3c5940;
}

.opening {
    min-height: 23vh;
}

/* Image of the dramatic animated bamboo path */

.bamboo-forrest {
    height: 63vh;
    width: 100%;
    overflow: hidden;
}

.bamboo-drama {
    height: 100%;
    width: 100%;
    overflow: hidden;
    animation-name: bamboo-forrest-drama;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

/* Keyframes to animate the bamboo path image */
@keyframes bamboo-forrest-drama {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.1)
    }
}

/* advertise message at the bottom of the home page */
.advertise {
    font-size: smaller;
}

/* blocks of information and images on the home page */
.block {
    background-color: #3d6542;
    color: #f5f5f5;
}

/* buddha and rocks image and related text */
.budda-face {
    width: 100%;
    box-shadow: 0.4vh 0.4vh 0.4vh 0.4vh #23260c
}

.block-text {
    margin: 1%;
    padding: 3%;
}

.block-text h2 {
    text-align: center;
    font-size: 200%;
    text-shadow: none;
    color: #d6f8a0;
}

.balanced-rocks {
    width: 100%;
    box-shadow: 0.4vh 0.4vh 0.4vh 0.4vh #23260c
}

.presentation p {
    padding: 1vh;
    font-family: 'Poppins', sans-serif;
    font-size: large;
}

/* ----------------- */
/* styles for the Resources page */
/* spacing the videos and audios */
.videos,
.audios-block,
.links {
    padding: 3vh;
    text-align: center;
}

.audios {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* styling the videos */
.yt-videos {
    padding: 0.2vw;
}

.yt-videos iframe {
    width: 45%;
    height: 50vh;
    margin: 1vh;
    border: none;
}

/* styling the audios elipses */
.relaxing-elipse {
    border: #3D6542 0.1vh solid;
    border-radius: 50%;
    margin: 1% auto;
}

/* spacing the table of links */
table,
th,
td {
    width: 100%;
    border: 0.1vh solid black;
    padding: 1vh;
    font-size: large;
}

th {
    font-size: larger;
    letter-spacing: 0.1vw;
    font-weight: 800;
    color: #3C533F;
}

/* ---------------------- */
/* styles for footer */

footer {
    background: #f5f5f5;
    width: 100%;
    box-shadow: 0.4vh 0.4vh 0.4vh 0.4vh #23260c;
}


footer h3 {
    margin: 2vh;
    float: right;
}

footer nav ul {
    justify-content: flex-end;
}

/* spacing social media icons */
.f-ico {
    padding: 0.1vw 0.4vw;
}

/* ----------------------- */
/* Styles for contact page content */
.contact-section {
    font-family: 'Poppins', sans-serif;
}

.contact-section p {
    padding: 1vh;
}

/* styles for the form */

form {
    display: flex;
    flex-direction: column;
    padding: 1vh;
}

form>* {
    margin: auto;
}

input,
textarea {
    background-color: #3d6542;
    color: #F5F5F5;
    width: 40%;
    font-size: 100%;
}

/* Submit button */

.button {
    font-family: 'Poppins', sans-serif;
    width: 25%;
    padding: 1%;
    white-space: normal;
    word-wrap: break-word;
}

/* --------------------------------- */
/* success page */



.submitted {
    background: #d6f8a0;
    background: linear-gradient(0deg, #d6f8a0 5%, #ffffff 50%, #d6f8a0 95%);
    display: flex;
    color: #3C533F;
    margin-top: auto;
    margin-bottom: 1%;
}

.submitted div {
    margin: auto;
    font-size: 80%;
}

.success {
    height: 80vh;
    margin: 0;
}

/* check sign styles for success on submiting an e-mail*/

.o-circle {
    display: flex;
    width: 10.555rem;
    height: 10.555rem;
    justify-content: center;
    align-items: flex-start;
    border-radius: 50%;
    animation: circle-appearance .8s ease-in-out 1 forwards, set-overflow .1s 1.1s forwards;
}

.c-container__circle {
    margin: 0 auto 5.5rem;
}

.o-circle__sign {
    position: relative;
    opacity: 0;
    background: #F5F5F5;
    animation-duration: .8s;
    animation-delay: .2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.o-circle__sign::before,
.o-circle__sign::after {
    content: "";
    position: absolute;
    background: inherit;
}

.o-circle__sign::after {
    left: 100%;
    top: 0%;
    width: 500%;
    height: 95%;
    transform: translateY(4%) rotate(0deg);
    border-radius: 0;
    opacity: 0;
    animation: set-shaddow 0s 1.13s ease-in-out forwards;
    z-index: -1;
}

.o-circle__sign--success {
    background: #38b083;
}

.o-circle__sign--success .o-circle__sign {
    width: 1rem;
    height: 6rem;
    border-radius: 50% 50% 50% 0% / 10%;
    transform: translateX(130%) translateY(35%) rotate(45deg) scale(.11);
    animation-name: success-sign-appearance;
}

.o-circle__sign--success .o-circle__sign::before {
    bottom: -17%;
    width: 100%;
    height: 50%;
    transform: translateX(-130%) rotate(90deg);
    border-radius: 50% 50% 50% 50% / 20%;

}

/* Keyframes to make the background circle pump on the screen */

@keyframes circle-appearance {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.5);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* Keyframes to make the check sign show up and pump on the screen */
@keyframes success-sign-appearance {
    50% {
        opacity: 1;
        transform: translateX(130%) translateY(35%) rotate(45deg) scale(1.7);
    }

    100% {
        opacity: 1;
        transform: translateX(130%) translateY(35%) rotate(45deg) scale(1);
    }
}

/* ---------------------------- */
/* media queries */
/* Media queries for devices with 820px of screen width size and lower, like tablets and iPads */
@media screen and (max-width: 820px) {

    .bamboo-forrest {
        height: 100%;
    }

    .bamboo-drama {
        bottom: 31.8vh;
    }

    .white-circle {
        position: relative;
        left: 75px;
    }

    body {
        height: fit-content;
    }

    input,
    textarea {
        width: 70%;
    }

    /* Media queries for devices with 600px of screen width size and lower, like most smartphones */
    @media screen and (max-width: 600px) {
        .big-icon {
            width: 30px;
            height: 30px;
            padding: 10px;
            background: #000000;
            border-radius: 100%;
            position: relative;
            animation: rotate 40000s infinite;
            margin: 3vh;
            float: left;
        }

        .big-icon .white-circle {
            width: 15px;
            height: 15px;
            background: #ffffff;
            border-radius: 100%;
        }

        .big-icon .black-circle {
            width: 15px;
            height: 15px;
            background: #000000;
            border-radius: 100%;
            margin-top: -19.4px;
            z-index: auto;
            position: absolute;
            margin-left: 7.5px;

        }

        .white-tail {
            width: 15px;
            height: 30px;
            background: #ffffff;
            display: inline-block;
            margin-top: -15px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .black-eye {
            width: 5px;
            height: 5px;
            background: #000000;
            border-radius: 100%;
            position: absolute;
            margin-top: -29px;
            margin-left: 12px;
        }

        .white-eye {
            width: 5px;
            height: 5px;
            background: #ffffff;
            border-radius: 100%;
            position: absolute;
            margin-top: -14px;
            margin-left: 12px;
        }

        .white-circle {
            position: relative;
            left: 8px;
        }

        section {
            margin-top: auto;
        }

        .yt-videos iframe {
            width: 100%;
        }

        .button {
            width: 50%;
        }
    }

}

/* Media queries for devices with 280px of screen width size and lower, like some smartphones */
@media screen and (max-width: 280px) {
    .top-nav ul {
        display: inline-block;
    }

    .icon {
        margin: auto 1vh;
    }
}