@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans&family=Roboto+Slab:wght@500&display=swap');

/* to apply to all elements at desktop level */

* {
    margin: 0;
    padding: 0;
    border: none;
    scroll-behavior: smooth !important;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    scroll-behavior: smooth !important;
}

/* to apply to the body generally */

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 300;
    color: #3a3a3a;
    text-decoration: none;
}

/* css for the header element */

#menu {
    font-size: 100%;
    letter-spacing: 1px;
    margin-top: -40px;
}

#menu li {
    float: right;
    list-style-type: none;
    margin-right: 25px;
}

#menu a {
    text-decoration: none;
    color: inherit;
}

#menu, #name {
    line-height: 75px;
}

#name {
    margin-left: 25px;
}

a {
    text-decoration: none;
}
/* to apply to all named elements */

section {
    min-height: 100%;
    width: 100%;
}

h1, h2 {
    font-family: "Roboto Slab", sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: black;
}

p {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 70%;
}

/* for the first section of the html - an image with a definition of mindfulness */

#aboutus-definition {
    height: 100%;
}

#cloud-image {
    background: url(../images/clouds.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#defined {
    font-size: 60%;
    font-family: "Roboto Slab", sans-serif;
    text-transform: lowercase;
    letter-spacing: 1px;
    width: 400px;
    height: 270px;
    padding: 40px;
    background-color: rgba(93, 158, 186, 0.8);
    top: 150px;
    left: 300px;
    position: absolute;
}

/* the second section is four divs each containing a benefit of mindfullness with a h2 element */

#benefits {
    min-height: 60%;
    margin-top: 100px;
}

.row2 {
    padding-top: 50px;
    display: flex;
}

.row2 .col2 {
    flex-basis: 25%;
    padding: 10px;
    height: 279px;
    border: 1px solid #ddd;
}

.col2 h3 {
    text-align: center;
    color: black;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 120%;
}

.col2 p {
    text-align: center;
    font-size: 100%;
    color: black;
}

.col2 a {
    color: black;
}

/* the third section is two vertical divs side by side - one containing an ordered list with a paragraph beneath it, and another with a circular div with a background image */

#method {
    min-height: 100%;
}

#method h1 {
    font-family: 'Merriweather Sans', sans-serif;
}

#method li {
    counter-increment: meditation-counter;
    margin: 30px 0;
}

#left-element {
    float: left;
    width: 50%;
}

#left-element h2 {
    margin-left: 25px;
}

ol {
    margin-left: 40px;
    list-style-type: auto;
    color: black;
}

#reminder {
    text-align: center;
    font-size: 20px;
    margin-left: 30px;
    width: 100%;
    height: 50%;
    color: black;
}

#reminder p {
    margin-top: 5%;
}

#right-element {
    float: right;
}

#circle-container1 {
    margin-right: 160px;
    margin-top: 100px;
    float: left;
    height: 400px;
    width: 400px;
    padding: 20px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-radius: 50%;
}

#circle-containerbg1 {
    background: url(../images/cup.png) no-repeat center center;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
}

/* the forth section is two divs each containing a seperate four divs arranged as two rows of four divs each - with a background image" */

#types2 {
    margin-top: 50px;
    min-height: 100%;
}

#types > h2 {
    margin-left: 30px;
}

section h2 {
    font-family: "Merriweather Sans", sans-serif;
    padding-left: 30px;
}

#cloud-image2 {
    background: url(../images/clouds2.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 84%;
    overflow: hidden;
    position: relative;
}

.row {
    display: flex;
  }

.row .col {
    flex-basis: 25%;
    padding: 10px;
    height: 279px;
    border: 1px solid #ddd;
}

.col h3 {
    text-align: center;
    color: black;
    padding-top: 15px;
    font-size: 120%;
}

.col p {
    text-align: center;
    padding: 30px;
    font-size: 100%;
    color: black;
}

.col a {
    color: black;
}

/* the final section consists of two divs arranged vertically - the left div has a circular div with a background image, the second div has a sign up form for a newsletter" */

#sign-up {
    min-height: 80%;
}
#circle-container2 {
    margin: 0 auto;
    float: left;
    height: 400px;
    width: 400px;
    padding: 20px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-radius: 50%;
}

#circle-container2a {
    margin-top: 100px;
    margin-left: 100px;
}

#circle-containerbg2 {
    background: url(../images/handwithlight.png) no-repeat center center;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
}

.form-container {
    float: right; 
    width: 400px;
    height: 250px;
    margin-right: 150px;
    margin-top: 100px;
    padding: 40px;
    background-color: rgba(93, 158, 186, 0.3)
}

.form-container h2 {
    margin-bottom: 20px;
}

.form-container input[type="text"],
.form-container input[type="email"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
}

.form-container input[type="submit"] {
    width: 80%;
    padding: 10px;
    background-color: rgba(93, 158, 186, 0.3);
    color: black;
    border: none;
    cursor: pointer;
}

footer {
    margin-top: 0%;
    height: 150px;
}

.social-networks {
    text-align: center;
}

.social-networks > li {
    display: inline;
}

.social-networks i {
    font-size: 160%;
    margin: 1%;
    padding: 5%;
    color: black;
}

/* media queries for tablets and mobile devices */

@media screen and (max-width: 1200px) {

    /* for the header */

    #menu {
        clear: left;
        float: left;
        margin-left: 25px;
    }

    /* for the first section of the body */

    #defined {
        left: 0;
    }

    /* for the second section of the body */

    #benefits {
        height: fit-content;
    }
    
    .col2 {
        display: flex;
        flex-direction: column;
    }
    
    .row2 {
        flex-direction: column;
      }
      
    .row2 .col2 {
        flex-basis: 100%;
      }
    
    /* for the third section of the body */

    #method {
        clear: both;
        height: fit-content;
    }

    #left-element, #right-element{
        float: left;
        margin: 0 auto;
        width: fit-content;
    }

    #right-element {
        padding-left: 20px;
        padding-bottom: 50px;
    }

    #left-element {
        padding-top: 250px;
    }

    #reminder {
        width: 50%;
    }

    /* for the fourth section of the body */ 

    #types2 {
        height: fit-content;
        clear: both;
        margin: 0 auto;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
    
    .row {
    flex-direction: column;
    }

    .row .col {
        flex-basis: 100%;
    }

    /* for the final section of the body */

    #sign-up {
        clear: both;
        height: 1000px;
        margin-top: 50px;
    }

    #circle-container2a, .form-container {
        clear: both;
        width: 100%;
        float: left;
    }

        #circle-container2a {
            margin-left: 0px;
        }

    .form-container {
        width: 400px;
    }

    /*more media queries for smaller screen sizes */

    @media screen and (max-width: 500px) {

        header {
            font-size: 60%;
            font-weight: 300;
        }

        #defined {
            width: fit-content;
            height: fit-content;
        }

        #left-element {
            margin-left: 25px;
        }

        #reminder {
            width: fit-content;
            margin-right: 20px;
        }

        #circle-container1 {
            height: 200px;
            width: 200px;
        }

        #sign-up {
            margin-left: 0px;
        }

        #circle-container2 {
            width: 200px;
            height: 200px;
        }

        .form-container {
            width: 100%;
        }

        .form-container h2 {
            font-size: 70%;
        }
    }

    /* final series of media queries for smallest screen sizes*/

    @media screen and (max-width: 400px) {

        #defined {
            font-size: 50%;
            padding: 10px 5px 10px;
        }

        #benefits h2 {
            padding-top: 100px;
        }
    }

    @media screen and (max-width: 350px) {
            
        header {
            font-size: 40%;
        }
    }

}