body {
    background: linear-gradient(to bottom, #ffffff, #fff9d9);
    font-family: montserrat;
    margin: 0;
}


@media screen and (max-width: 780px) {
    nav {
        background-color: #FBEBA1;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 1%;
        width: 100%;
        height: 70px;
    }

    nav a {
        text-decoration: none;

    }

    .nav-logo-title {
        display: flex;
        align-items: center;
        margin-left: 3%;
    }

    .nav-logo-title img {
        width: 30px;
        height: 30px;
        padding: 10px;
        content: url(flower.png);
    }

    .nav-logo-title a {
        text-decoration: none;
        display: flex;
        color: rgb(152, 158, 189);
        font-weight: bold;
    }

    nav ul {
        display: inline-flex;
        justify-content: flex-end;
        margin-top: 25px;
        margin-right: 2%;
    }

    nav li {
        list-style-type: none;
        margin-right: 6%;
    }

    nav a {
        color: #4C62B7;
        font-weight: 450;
        font-size: 90%;
    }

    nav a:hover {
        color: #FFA500;
    }


    #header {
        margin-top: 180px;
        margin-bottom: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #4C62B7;
    }

    #header::after {
        content: url('css.png');
        position: absolute;
        top: 25%;
        background-size: cover;

    }

    .header-texts {
        position: relative;
    }


    .header-texts h1,
    .header-texts h3,
    .header-texts p {
        margin-bottom: 10px;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 50%;
        text-align: center;
    }

    .header-texts h1 {
        font-weight: 600;
        font-size: 350%;
        text-align: center;
    }

    .header-texts h3 {
        font-weight: 400;
        margin-top: 0px;
    }

    .header-texts p {
        text-align: left;
        margin-top: 25px;
        background-color: #FBEBA1;
        padding: 20px;
        border-radius: 20px;
    }



    #content {
        text-align: center;
    }

    .content-aside,
    .articles,
    .creativity {
        margin-left: 5%;
        margin-right: 5%;
    }

    .content-first,
    .content-second {
        margin-bottom: 130px;
    }

    .content-first h2 {
        font-size: 35px;
        margin-right: 5px;
        text-decoration: none;
    }

    .content-first p {
        background-color: #4C62B7;
        border-radius: 15px;
        padding: 20px;
        color: whitesmoke;
    }

    .content-second h2 {
        font-size: 35px;
        margin-right: 5px;
        margin-bottom: 0px;
    }

    .content-second h4 {
        font-size: 17px;
        font-weight: 600;
        color: #999;
    }

    .content-second p {
        background-color: #4C62B7;
        color: whitesmoke;
        border-radius: 15px;
        padding: 20px;
    }

    aside {
        border: solid #FBEBA1;
        border-radius: 10px;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin-bottom: 130px;
        margin-left: 15%;
        width: 70%;
        display: flex;
        flex-direction: column;
    }

    aside h2 {
        font-size: 25px;
    }

    aside ul {
        background-color: #FBEBA1;
        border-radius: 10px;
        padding: 15px;
        width: 120px;
    }

    aside li {
        list-style-type: none;
    }

    aside a:hover {
        color: orange;
    }

    .articles {
        display: flex;
        flex-wrap: wrap;
    }

    .article {
        background-color: white;
        border: 2px solid #4C62B7;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 3%;
        margin-bottom: 20px;
    }

    .article:hover{
        background-color: #4C62B7;
        color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .article a:hover {
        color: orange;

    }

    .row-first {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .article img {
        content: url(laut.jpeg);
        max-width: 100%;
        margin-top: 2%;
    }

    .row-second {
        display: flex;
        flex-direction: column-reverse;
    }

    .article-long {
        background-color: white;
        border: 2px solid #4C62B7;
        border-radius: 10px;
        padding: 3%;
        width: 94%;
        text-align: center;
        margin-top: 5%;
        margin-bottom: 130px;
    }

    .article-long:hover{
        background-color: #4C62B7;
        color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .row-second img {
        content: url(laut.jpeg);
        max-width: 50%;
        margin-top: 2%;
        margin-left: 25%;
    }

    .creativity-wrapper {
        margin-top: 20px;
        margin-bottom: 40px;
    }



    .creativity img {
        content: url(laut.jpeg);
        width: 200px;
        height: 200px;
        padding: 20px;
    }

    .mini-one,
    .mini-two,
    .mini-three,
    .mini-four {
        margin-bottom: 30px;
        background-color: #fdc356;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 20px;
        justify-content: center;
    }


    .mini-content {
        margin-top: 3%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .mini-one:hover , .mini-two:hover , .mini-three:hover, .mini-four:hover {
        background-color: #FBEBA1;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    }

    footer {
        height: 100%;
        width: 100%;
        float: inline-end;
        margin-top: 130px;
    }

    .footer-logo {
        text-align: center;
        margin-bottom: 30px;
        background-color: rgb(220, 220, 220);
        padding: 20px;
    }

    .footer-logo h3 {
        font-size: 130%;
    }

    .footer-form {
        margin-top: 50px;
        margin-bottom: 50px;
        background-color: #4C62B7;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
        border-radius: 10px;
        border: 1px solid black;
        color: #FFFEFA;
        justify-content: center;
        margin-left: 20%;
        margin-right: 20%;
        padding: 20px;

    }

    .footer-form p {
        text-align: center;
        font-weight: 600;
        font-size: 130%;

    }

    .footer-form form {
        font-weight: 400;
        text-align: left;
        padding: 10px;
    }

    .footer-form form p {
        font-weight: 400;
        text-align: left;
        font-size: 110%;
    }

    .footer-form form button {
        font-weight: 400;
        font-size: 100%;
        margin-top: 10px;
    }

    .footer-form form button:hover {
        color: white;
        background-color: #ffcc00;
    }


    .footer-credit {
        background-color: #FBEBA1;
        display: flex;
        flex-direction: row;
        gap: 10%;
        padding: 20px;
        justify-content: center;
        text-align: center;
    }

    .footer-credit h3 {
        font-weight: 600;
        font-size: 70%;
        color: #4C62B7;
    }
}

@media screen and (min-width: 780px) {
    nav {
        background-color: #FBEBA1;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 1%;
        width: 100%;
        height: 70px;
    }

    nav a {
        text-decoration: none;

    }

    .nav-logo-title {
        display: flex;
        align-items: center;
        margin-left: 3%;
    }

    .nav-logo-title img {
        width: 30px;
        height: 30px;
        padding: 10px;
        content: url(flower.png);
    }

    .nav-logo-title a {
        text-decoration: none;
        display: flex;
        color: #4C62B7;
        font-weight: bold;
    }

    nav ul {
        display: inline-flex;
        justify-content: flex-end;
        margin-top: 25px;
        margin-right: 3%;
    }

    nav li {
        list-style-type: none;
        margin-right: 10%;
    }

    nav a {
        color: #4C62B7;
        font-weight: 450;
    }

    nav a:hover {
        color: #FFA500;
    }


    #header {
        margin-top: 120px;
        margin-bottom: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #4C62B7;
    }

    #header::after {
        content: url('css.png');
        position: absolute;
        right: 6%;
        top: 30%;
        background-size: cover;

    }

    #header {
        display: flex;
        align-items: center;
    }

    .header-texts {
        position: relative;
    }


    .header-texts h1,
    .header-texts h3,
    .header-texts p {
        margin-bottom: 10px;
        margin-left: 5%;
        margin-right: 40%;
    }

    .header-texts h1 {
        font-weight: 600;
        font-size: 350%;
        text-align: left;
    }

    .header-texts h3 {
        font-weight: 400;
        margin-top: 0px;
    }

    .header-texts p {
        text-align: left;
        margin-top: 25px;
        background-color: #FBEBA1;
        padding: 20px;
        border-radius: 20px;
        margin-right: 45%;
    }



    #content {
        float: left;
    }

    .content-aside,
    .articles,
    .creativity {
        margin-left: 5%;
        margin-right: 5%;
    }

    .content-first,
    .content-second {
        margin-bottom: 130px;
    }

    .content-first h2 {
        font-size: 35px;
        margin-right: 5px;
        text-decoration: none;
    }

    .content-first p {
        background-color: #4C62B7;
        border-radius: 15px;
        padding: 20px;
        color: whitesmoke;
    }

    .content-second h2 {
        font-size: 35px;
        margin-right: 5px;
        margin-bottom: 0px;
    }

    .content-second h4 {
        font-size: 17px;
        font-weight: 600;
        color: #999;
    }

    .content-second p {
        background-color: #4C62B7;
        color: whitesmoke;
        border-radius: 15px;
        padding: 20px;
    }

    aside {
        display: flex;
        align-items: center;
        border: solid #FBEBA1;
        border-radius: 10px;
        justify-content: center;
        margin-left: 5%;
        margin-bottom: 130px;
        width: 90%;
    }

    aside h2 {
        font-size: 25px;
    }

    aside ul {
        background-color: #FBEBA1;
        border-radius: 10px;
        padding: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    aside li {
        text-decoration: none;
        list-style-type: none;
    }

    aside a:hover {
        color: orange;
    }

    .articles {
        display: flex;
        flex-wrap: wrap;

    }

    .article {
        background-color: white;
        width: 1000%;
        border: 2px solid #4C62B7;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 3%;
        margin-bottom: 20px;
    }

    .article:hover{
        background-color: #4C62B7;
        color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .article a:hover {
        color: orange;

    }

    .row-first {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .article img {
        content: url(laut.jpeg);
        max-width: 100%;
        margin-top: 2%;
    }

    .row-second {
        display: block;
        margin-left: 5%;
        margin-right: 5%;
    }

    .article-long {
        background-color: white;
        border: 2px solid #4C62B7;
        border-radius: 10px;
        padding: 3%;
        width: 66%;
    }

    .article-long:hover{
        background-color: #4C62B7;
        color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .row-second img {
        content: url(laut.jpeg);
        max-width: 95%;
        margin-top: 2%;
        margin-left: 5%;
    }

    .creativity-wrapper {
        margin-top: 20px;
        margin-bottom: 40px;
    }



    .creativity img {
        content: url(laut.jpeg);
        max-width: 20%;
        max-height: 20%;
        padding: 20px;
    }

    .mini-one,
    .mini-three {
        margin-bottom: 30px;
        background-color: #fdc356;
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        text-align: right;
        padding: 20px;
        justify-content: center;
    }

    .mini-two {
        margin-bottom: 30px;
        background-color: #fdc356;
        display: flex;
        flex-direction: row-reverse;
        border-radius: 20px;
        padding: 20px;
    }

    .mini-four {
        background-color: #fdc356;
        display: flex;
        flex-direction: row-reverse;
        border-radius: 20px;
        padding: 20px;
    }

    .mini-content {
        margin-top: 3%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .mini-one:hover , .mini-two:hover , .mini-three:hover, .mini-four:hover {
        background-color: #FBEBA1;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    }

    footer {
        height: 100%;
        width: 100%;
        float: inline-end;

    }

    .footer-logo {
        text-align: center;
        margin-bottom: 30px;
        background-color: rgb(220, 220, 220);
        padding: 40px;
    }

    .footer-logo h3 {
        font-size: 200%;
    }

    .footer-form {
        margin-top: 50px;
        margin-bottom: 50px;
        background-color: #4C62B7;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
        border-radius: 10px;
        border: 1px solid black;
        color: #FFFEFA;
        justify-content: center;
        margin-left: 30%;
        margin-right: 30%;
        padding: 20px;
    }

    .footer-form p {
        text-align: center;
        font-weight: 600;
        font-size: 130%;

    }

    .footer-form form {
        font-weight: 400;
        text-align: left;
        padding: 10px;
    }

    .footer-form form p {
        font-weight: 400;
        text-align: left;
        font-size: 110%;
    }

    .footer-form form button {
        font-weight: 400;
        font-size: 100%;
        margin-top: 10px;
    }

    .footer-form form button:hover {
        color: white;
        background-color: #ffcc00;
    }


    .footer-credit {
        background-color: #FBEBA1;
        display: flex;
        flex-direction: row;
        gap: 10%;
        padding: 20px;
        justify-content: center;
        text-align: center;
    }

    .footer-credit h3 {
        font-weight: 600;
        font-size: 100%;
        color: #4C62B7;
    }
}