@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
/* font-family: 'Dongle', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
/* font-family: 'Silkscreen', cursive; */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-image: linear-gradient(to bottom, aqua, blue);
    background-color: black;
    color: white;
}

/* This is for the Navbar */
.navbar-brand {
    font-family: 'Silkscreen', cursive;
    opacity: 100%;
    background: linear-gradient(to right, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
    /* background-color: red; */
}


.nav-item {
    /* background-color: yellow; */
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    /* text-align: center; */
    margin-top: 7px;
}

.navi-btn {
    /* background-color: red; */
    border: 3px solid aquamarine;
    padding: 2px 20px;
    color: aquamarine;
    font-family: 'Dongle', sans-serif;
    font-size: 1.5rem;
}

.navi-btn:hover {
    color: white;
    font-family: 'Dongle', sans-serif;
    font-size: 1.5rem;
    border: 3px solid aquamarine;
    background-color: aquamarine;
}




/* This is for the Footer */
footer {
    font-family: 'Dongle', sans-serif;
    font-size: 1.5rem;
    line-height: 0.6;
}

.fab:hover {
    color: aquamarine;
    transition: 0.3s;
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);
}




/* This is for the about Page */
.about {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'Dongle', sans-serif;

}

.about1 {
    text-align: center;
    font-size: 2rem;
    max-width: 50vw;
    margin-top: 100px;
}

.about1 img {
    width: 200px;
    margin-bottom: 10px;
}

.about1 h3 {
    font-family: 'Dongle', sans-serif;
    font-size: 3rem;
    line-height: 0.8;
}

.about2 {
    max-width: 50vw;
    text-align: center;
    margin-top: 130px;
}

.about2 h1 {
    font-family: 'Silkscreen', cursive;
}

.hr {
    background: linear-gradient(to right, red, yellow, green, aqua, blue);
    height: 4px;
    margin: auto;
    width: 40%;
    margin-top: 20px;
    opacity: 100%;
    margin-bottom: 20px;
}

.about3 {
    max-width: 50vw;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 50px;
}

.about3 h1 {
    font-family: 'Silkscreen', cursive;
    margin-bottom: 20px;
}

.about3 img {
    width: 150px;
    border-radius: 150px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.about p {
    line-height: 0.8;
}

.about3 h3 {
    line-height: 0.5;
}

.about3 a {
    font-size: 1.5rem;
}



/* This is for the Main Page */
.blog {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 50px;
}

.blog h1 {
    margin-bottom: 30px;
    font-family: 'Silkscreen', cursive;
}

.blog img {
    width: 300px;
}


.post {
    display: block;
    width: 100%;
    max-width: 60vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.post button {
    width: 100%;
    display: block;
    padding: 10px;
    border-radius: 8px;
    background-color: #2F4960;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    margin: 15px 0px;
}


form label {
    display: block;
    color: #2F4960;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
}

form input {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

form input {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}

form textarea {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

form textarea {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}

.read {
    max-width: 50vw;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.read h3 {
    font-family: 'Dongle', sans-serif;
    font-size: 3rem;
    line-height: 0.8;
}

.read h2 {
    font-family: 'Silkscreen', cursive;
    background: -webkit-linear-gradient(red, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.read p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 0.8;
}

.read button {
    padding: 10px;
    font-family: 'Dongle', sans-serif;
    background-color: aquamarine;
    color: white;
    font-size: 2rem;
    padding: 0 30px;
    border-radius: 10px;
    border: 3px solid aquamarine;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.read button:hover {
    cursor: pointer;
    background-color: rgb(107, 255, 207);
    border: 3px solid rgb(107, 255, 207);
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);
}

.read a {
    text-decoration: none;
    color: white;
}




/* This is for the Home Page */
.home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 100px;
    margin-top: 100px;
}

.home1 {
    max-width: 50vw;
    /* background-color: yellow; */
}

.home1 img {
    width: 200px;
    margin: 20px 0;
    margin-bottom: 30px;
}


.home1 h1 {
    font-family: 'Silkscreen', cursive;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    background: -webkit-linear-gradient(red, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home1 h2 {
    font-family: 'Dongle', sans-serif;
    font-size: 3rem;
    line-height: 0.5;
}

.home1 p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.home1 button {
    padding: 10px;
    font-family: 'Dongle', sans-serif;
    background-color: aquamarine;
    color: white;
    font-size: 2rem;
    padding: 0 30px;
    border-radius: 10px;
    border: 3px solid aquamarine;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.home1 button:hover {
    cursor: pointer;
    background-color: rgb(107, 255, 207);
    border: 3px solid rgb(107, 255, 207);
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);
}

.home2 {
    max-width: 50vw;
    margin-top: 130px;
}

.home2 p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.home2 h2 {
    font-family: 'Dongle', sans-serif;
    font-size: 3rem;
    line-height: 0.5;
}

.home2 h1 {
    font-family: 'Silkscreen', cursive;
    background: -webkit-linear-gradient(white, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.home3 {
    max-width: 50vw;
    margin-top: 130px;
}

.home3 h3 {
    font-family: 'Dongle', sans-serif;
    font-size: 2.5rem;
    line-height: 0.5;
}

.home3 h1 {
    font-family: 'Silkscreen', cursive;
    background: -webkit-linear-gradient(red, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home3 p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 1;
}


.home4 {
    max-width: 60vw;
    margin-bottom: 30px;
}

.home4 p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 0.8;
    color:#2F4960;
}

.home4 h5 {
    color: aquamarine;
}

.card-hover:hover {
    box-shadow: 0px 18px 24px rgb(0, 0, 0, 0.2);
    cursor: pointer;
}


/* This is the Register Page  */

.register {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 50px;
}

.local-register {
    display: block;
    width: 100%;
    max-width: 30vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-register img {
    width: 50%;
}

.local-register button {
    width: 100%;
    display: block;
    padding: 10px;
    border-radius: 8px;
    background-color: #2F4960;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    margin: 15px 0px;
}

.local-register h4{
    color : black;
}

.local-register form label {
    display: block;
    color: #2F4960;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
}

.local-register form input {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

.local-register form input {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}

.google-button-link {
    text-decoration: none;
}


/* This is for the Login Page  */

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 50px;
}

.local-login {
    display: block;
    width: 100%;
    max-width: 30vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-login img {
    width: 50%;
}

.local-login button {
    width: 100%;
    display: block;
    padding: 10px;
    border-radius: 8px;
    background-color: #2F4960;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    margin: 15px 0px;
}

.local-login h4{
    color : black;
}

.loca-login form label {
    display: block;
    color: #2F4960;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
}

.local-login form input {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

.local-login form input {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}


/* This is the Blog Content Page */
.blog-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to bottom, aqua, blue);
}

.blog-header {
    width: 70vw;
    padding: 20px;
    text-align: center;
    margin-top: 100px;
    background-color: white;
    border-radius: 20px;
    color:black;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}


.blogs {
    max-width: 70vw;
    margin-bottom: 100px;
}

.blog-each1 {
    background-color: white;
    /* max-width: 70vw; */
    /* padding: 20px; */
    margin-top: 100px;
    border-radius: 20px;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2)
}

.blog-each {
    padding: 20px;
    color : black;
}

.blog-each1 img {
    width: 100%;
    max-height: 30vh;
    border-radius: 20px 20px 0px 0px;
}



.blog-topic {
    /* margin-top: 100px; */
    text-align: center;
    font-family: 'Silkscreen', cursive;
    margin-bottom: 20px;
    font-size: 2rem;
}

.blog-info {
    margin-bottom: 20px;
    text-align: center;

}

.blog-info h5,
h6 {
    font-family: 'Dongle', sans-serif;
    font-size: 1.8rem;
    line-height: 0.6;
}

.blog-data {
    font-family: 'Dongle', sans-serif;
}

.blog-data p {
    font-size: 1.8rem;
    color: #395268;
    line-height: 0.8;
    text-align: start;
}

.blog-data h2 {
    font-size: 3rem;
    line-height: 0.5;
    margin-top: 30px;
}

.blog-header h1 {
    font-family: 'Silkscreen', cursive;
}

.blog-header p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 0.8;
}

.blog-header a {
    text-decoration: none;
}

.blog-header button {
    padding: 10px;
    font-family: 'Dongle', sans-serif;
    background-color: aquamarine;
    color: aquamarine;
    font-size: 1.8rem;
    padding: 0 30px;
    border-radius: 10px;
    border: 3px solid aquamarine;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.blog-header button:hover {
    cursor: pointer;
    background-color: rgb(107, 255, 207);
    border: 3px solid rgb(107, 255, 207);
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);

}

.blog-header a {
    text-decoration: none;
    color: white;
}

.blog-header a:hover {
    text-decoration: none;
    color: white;
}

/* This is for the Contact Page */
.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 50px;
}

.contact-info {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
    /* background-color: yellow; */
    max-width: 50vw;
    width: 100%;
}

.contact-info h2 {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 0.5;
}

.contact-info h1 {
    font-family: 'Silkscreen', cursive;
    line-height: 0.8;
    background: -webkit-linear-gradient(red, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-info hr {
    width: 100px;
    text-align: center;
}

.contact-email {
    margin-bottom: 50px;
    margin-top: 50px;
    font-family: 'Dongle', sans-serif;
    font-size: 1.8rem;
    line-height: 0.5;
    color: #2F4960;
}

.contact-email h4 {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 450;
}

.contact-email a {
    text-decoration: none;
}

.local-contact {
    display: block;
    width: 100%;
    max-width: 30vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-contact h1 {
    font-family: 'Silkscreen', cursive;
    color: black;
}

.local-contact p {
    font-family: 'Dongle', sans-serif;
    font-size: 1.8rem;
    line-height: 0.8;
}


.local-contact button {
    width: 100%;
    display: block;
    padding: 10px;
    border-radius: 8px;
    background-color: #2F4960;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    margin: 15px 0px;
}

.loca-contact form label {
    display: block;
    color: #2F4960;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
}

.local-contact form input {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

.local-contact form input {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}

.local-contact form textarea {
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

.local-contact form textarea {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: 0.4s;
    color: #222;
    font-size: 18px;
    font-weight: 300;
}

/* This is for the Thanks Page */
.thanks {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 100px;
}


.local-thanks {
    display: block;
    width: 100%;
    max-width: 60vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    color :  black;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-thanks p {
    font-family: 'Dongle', sans-serif;
    font-size: 1.8rem;
    line-height: 0.5;
}

.local-thanks h4 {
    font-family: 'Silkscreen', cursive;
    background: -webkit-linear-gradient(red, red, yellow, green, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.local-thanks button {
    padding: 10px;
    font-family: 'Dongle', sans-serif;
    background-color: aquamarine;
    color: white;
    font-size: 1.8rem;
    padding: 0 30px;
    border-radius: 10px;
    border: 3px solid aquamarine;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-thanks button:hover {
    cursor: pointer;
    background-color: rgb(107, 255, 207);
    border: 3px solid rgb(107, 255, 207);
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);
}

.local-thanks a {
    color: white;
    text-decoration: none;
}


/* This is for the Thanks Page */
.error {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 200px;
    margin-top: 100px;
}


.local-error {
    display: block;
    width: 100%;
    max-width: 60vw;
    padding: 50px 30px;
    background-color: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-error img {
    width: 200px;
}

.local-error h2,
p {
    font-family: 'Dongle', sans-serif;
    font-size: 2rem;
    line-height: 0.8;
}

.local-error h1 {
    font-family: 'Silkscreen', cursive;
    font-size: 3rem;
}

.local-error button {
    padding: 10px;
    font-family: 'Dongle', sans-serif;
    background-color: aquamarine;
    color: white;
    font-size: 1.8rem;
    padding: 0 30px;
    border-radius: 10px;
    border: 3px solid aquamarine;
    box-shadow: 0px 6px 12px rgb(0, 0, 0, 0.2);
}

.local-error button:hover {
    cursor: pointer;
    background-color: rgb(107, 255, 207);
    border: 3px solid rgb(107, 255, 207);
    box-shadow: 0px 26px 32px rgb(0, 0, 0, 0.2);
}

.local-error a {
    color: white;
    text-decoration: none;
}



/* Responsive For Mobile  */
@media (max-width: 980px) {

    /* Login Page */
    .local-login {
        max-width: 80vw;
    }

    /* Register Page */
    .local-register {
        max-width: 80vw;
    }

    /* Main */
    .read {
        max-width: 70vw;
    }

    .post {
        max-width: 90vw;
    }

    .blogs {
        max-width: 90vw;
    }

    /* About Page */
    .about1 {
        max-width: 70vw;
    }

    .about2 {
        max-width: 80vw;
    }

    .about3 {
        max-width: 80vw;
    }

    /* Home Page */
    .home1 {
        max-width: 80vw;
    }

    .home2 {
        max-width: 80vw;
    }

    .home3 {
        max-width: 80vw;
    }

    .home4 {
        max-width: 80vw;
    }

    /* Contact Page */
    .local-contact {
        max-width: 80vw;
    }

    .contact-info {
        max-width: 80vw;
    }

    .email-body {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    /* Home Page */
    .local-thanks {
        max-width: 80vw;
    }

    .local-error {
        max-width: 80vw;
    }
}