body {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: NormalFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAD1aU3sLnI/0/DMSans-Regular.f8f3e3f30371f4c7c1589b491.8f7934b3d45567e9cf1f541e008969a9.woff2);
    font-style: normal;
}

@font-face {
    font-family: BoldFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAFdJjTk5UU/0/CanvaSans-Bold13644182954117137290.33696.33696a29f45c1b554a4c12443b998d21.woff2);
    font-style: normal;
}

@font-face {
    font-family: LightFont;
    src: url(https://s3.amazonaws.com/font-public.canva.com/YAFdJs2qTWQ/0/OpenSauceOne-Light.21cf5a80fc5777c6aed04.22ff9d894b6467b3ddab0f1989a2cb4d.woff2);
    font-style: normal;
}

@media screen and (min-width: 120px) and (max-width: 768px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        font-weight: 500;
        position:absolute;
        top:0vw;

        & nav {
            margin: 0 auto;
            width: 90%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 2.5vw;
                    font-family: BoldFont, serif;
                }
            }
        }
    }
    .area {
        width: 100%;
        height: 140vw;
        position: relative;
        font-family: LightFont, serif;

        & .area__quote {
            color: #142140;
            position: absolute;
            top: 5vw;
            left: 5vw;
            font-size: 6vw;
        }

        & .area__last-updated {
            color: #142140;
            position: absolute;
            top: 20vw;
            left: 5vw;
            font-size: 2vw;
        }


        & .area__information {
            padding-bottom: 5vw;
            position: absolute;
            width: 85%;
            left: 5vw;
            top: 30vw;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            font-size: 2vw;

            & span:first-child {
                width: 50vw;
            }

            & span {
                color: #142140;
            }

            & ul, & li, & ol {
                width: 100%;
            }

            & ol {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding: 0;
                margin: 0px 0 0 0px;
                list-style-position: inside;

                & > li {
                    margin-top: 50px;
                }
            }

            & .area__information_listed {
                counter-reset: list;
                list-style-type: none;
                margin: 0;
                padding: 0;

                & li::before {
                    counter-increment: list;
                    content: "(" counter(list) ") ";
                }
            }
        }

        & .area__picture {
            width: 42vw;
            height: 42vw;
            position: absolute;
            right: 3vw;
            top: 6vw;
            border-radius: 10vw;
        }
    }
    .area__top {
        background-image: url("../images/privacyPolicy/background.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        height: 70vw;
        padding-top:5vw;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 1vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__top__information {
            position: absolute;
            width: 55%;
            height: 30vw;
            top: 25vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 5px;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        font-weight: 500;
        position:absolute;
        top:0vw;

        & nav {
            margin: 0 auto;
            width: 80%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 2.2vw;
                    font-family: BoldFont, serif;
                }
            }
        }
    }
    .area {
        width: 100%;
        height: 140vw;
        position: relative;
        font-family: LightFont, serif;

        & .area__quote {
            color: #142140;
            position: absolute;
            top: 5vw;
            left: 5vw;
            font-size: 6vw;
        }

        & .area__last-updated {
            color: #142140;
            position: absolute;
            top: 20vw;
            left: 5vw;
            font-size: 2vw;
        }


        & .area__information {
            padding-bottom: 5vw;
            position: absolute;
            width: 85%;
            left: 5vw;
            top: 30vw;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            font-size: 2vw;

            & span:first-child {
                width: 50vw;
            }

            & span {
                color: #142140;
            }

            & ul, & li, & ol {
                width: 100%;
            }

            & ol {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding: 0;
                margin: 0px 0 0 0px;
                list-style-position: inside;

                & > li {
                    margin-top: 50px;
                }
            }

            & .area__information_listed {
                counter-reset: list;
                list-style-type: none;
                margin: 0;
                padding: 0;

                & li::before {
                    counter-increment: list;
                    content: "(" counter(list) ") ";
                }
            }
        }

        & .area__picture {
            width: 42vw;
            height: 42vw;
            position: absolute;
            right: 3vw;
            top: 4vw;
            border-radius: 10vw;
        }
    }
    .area__top {
        background-image: url("../images/privacyPolicy/background.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        height: 70vw;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 5vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__top__information {
            position: absolute;
            width: 55%;
            height: 30vw;
            top: 25vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 1vw;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

    }
}

@media screen and (min-width: 1025px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        font-weight: 500;
        position:absolute;
        top:0vw;

        & nav {
            margin: 0 auto;
            width: 80%;
            height: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & div {
                width: 25%;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                & a {
                    text-decoration: 1px white underline;
                    color: white;
                    font-size: 1.5vw;
                    font-family: BoldFont, serif;
                    transition:all .2s linear;
                    &:hover{
                        color:red;
                        text-decoration-color: red;
                    }
                }
            }
        }
    }
    .area {
        width: 100%;
        height: 110vw;
        position: relative;
        font-family: LightFont, serif;

        & .area__quote {
            color: #142140;
            position: absolute;
            top: 5vw;
            left: 5vw;
            font-size: 5vw;
        }

        & .area__last-updated {
            color: #142140;
            position: absolute;
            top: 18vw;
            left: 5vw;
            font-size: 1.8vw;
        }


        & .area__information {
            position: absolute;
            width: 85%;
            left: 5vw;
            top: 25vw;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            padding: 0px;
            font-size: 1.8vw;

            & span {
                color: #142140;
            }

            & span:first-child {
                width: 60vw;
            }

            & ul, & li, & ol {
                width: 100%;
            }

            & ol {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding: 0;
                margin: 0px 0 0 0px;
                list-style-position: inside;

                & > li {
                    margin-top: 50px;
                }
            }

            & .area__information_listed {
                counter-reset: list;
                list-style-type: none;
                margin: 0;
                padding: 0;

                & li::before {
                    counter-increment: list;
                    content: "(" counter(list) ") ";
                }
            }
        }

        & .area__picture {
            width: 25vw;
            height: 25vw;
            position: absolute;
            right: 10vw;
            top: 5vw;
            border-radius: 5vw;
        }
    }
    .area__top {
        background-image: url("../images/privacyPolicy/background.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        height: 55vw;
        padding-top:5vw;

        & .area__treasure {
            width: 15%;
            position: relative;
            top: 1vw;
            left: 6vw;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .area__treasure__img {
                width: 100%;
            }

            & span {
                color: #142140;
                position: absolute;
                bottom: 1%;
                font-size: 2vw;
                font-family: BoldFont, serif;
            }
        }

        & .area__top__information {
            position: absolute;
            width: 55%;
            height: 25vw;
            top: 20vw;
            left: 6vw;

            & .area__information__quote {
                color: #142140;
                font-size: 6vw;
                font-family: BoldFont, serif;
            }

            & .area__information__links {
                width: 90%;
                display: flex;
                position: absolute;
                bottom: 0px;
                justify-content: space-around;
                align-self: center;
                align-items: center;
                height: 10vw;

                & div {
                    background: white;
                    border-radius: 1vw;
                    width: 18vw;
                    height: 50%;
                    padding: 5px;

                    & img {
                        width: 18%;
                    }
                }

                & .area__information__links__link {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    & a {
                        width: 12vw;
                        color: black;
                        text-decoration: underline;
                        font-size: 2vw;
                        font-family: NormalFont, serif;

                        & span {
                            font-size: 2vw;
                            font-family: BoldFont, serif;
                        }
                    }
                }
            }

        }

    }
}