@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');


@font-face {
    font-family: "Raleway", sans-serif;
    src: url("../assets/font/Raleway/Raleway-VariableFont_wght.ttf") format("truetype"),
         url("../assets/font/Raleway/Raleway-VariableFont_wght.woff") format("woff"),
         url("../assets/font/Raleway/Raleway-VariableFont_wght.woff2") format("woff2");
}


:root{
    --background-color: #F7ECFB;
    --mainBackgroundColor : #FBF8FC;
    --textColor : #27272A;
    --accentColor : #5E379C;
    --borderColor: #CAA3DD;
    --buttonColor: #F5EEF9;
    --titleFont: 'Dancing Script', cursive;
    --textFont: "Raleway";
}

body{
    background: var(--background-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main{
    background-color: var(--mainBackgroundColor);
    max-width: 1200px;
    padding: 100px;
    margin: auto auto 150px auto;
    box-shadow: 4px 4px 40px rgba(56, 56, 56, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
}



/*---------------------Nav style---------------------*/

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2em 150px 70px 50px;
}

header > img {
    max-width: 100px;
}

nav {
    font-family: var(--textFont), sans-serif;
    font-size: 20px;
}

ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 0;
}

li{
    list-style: none;
}

li > div {
    background-color: var(--accentColor);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

li > a {
    text-decoration: none;
    color: var(--textColor);
}

li > .active {
    text-decoration: underline var(--accentColor);
    color: var(--accentColor);
}

li > a:hover {
    text-decoration: underline;

}


p, h1, h2{
    color: var(--textColor);
}

/* Media Queries */

@media (max-width: 768px) {

    header {
        margin: 1em;
    }

    header > img {
        margin-bottom: 1em;
        max-width: 60px;
    }

    ul {
        gap: 10px;
    }

    li{
        font-size: smaller;
    }

    main {
        padding: 30px;
        margin: auto auto 50px auto;
    }
}


@media (max-width: 1440px) {
    main{
        padding: 80px 20px;
        margin: 0 80px 40px;

    }

    nav{
        font-size: 16px;
    }

    header > img{
        max-width: 80px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 20px;
        margin: 10px 10px;
    }

    nav {
        font-size: 16px;
    }

    ul {
        gap: 8px;
    }

    li > div {
        width: 6px;
        height: 6px;
    }

    li > a {
        font-size: 16px;
    }
}