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: 20px;
                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: 125vw;
        position: relative;

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

        & .area__information {
            position: absolute;
            width: 90%;
            height: 40vw;
            padding-bottom: 5vw;
            left: 5vw;
            top: 18vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & p {
                display: flex;
                flex-direction: column;
                color: #142140;
                font-size: 2.5vw;
                font-family: LightFont, serif;

                & .area__information__contact {
                    width: 35vw;
                    display: flex;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                    }
                }
            }

            z-index: 10;
        }

        & .area__illustration {
            width: 60vw;
            height: 60vw;
            position: absolute;
            left: calc(50% - 30vw);
            bottom: 0vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        background-image: url("../images/accountDeletion/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__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;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 10vw;
            width: 40vw;
            height: 60vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 27vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 40vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    header {
        width: 100%;
        height: 5vw;
        padding-top: 10px;
        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: 125vw;
        position: relative;

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

        & .area__information {
            position: absolute;
            width: 90%;
            height: 40vw;
            padding-bottom: 5vw;
            left: 5vw;
            top: 18vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & p {
                display: flex;
                flex-direction: column;
                color: #142140;
                font-size: 2.5vw;
                font-family: LightFont, serif;

                & .area__information__contact {
                    width: 35vw;
                    display: flex;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                    }
                }
            }

            z-index: 10;
        }

        & .area__illustration {
            width: 60vw;
            height: 60vw;
            position: absolute;
            left: calc(50% - 30vw);
            bottom: 3vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        background-image: url("../images/accountDeletion/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__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;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 7vw;
            width: 40vw;
            height: 60vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 27vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 45vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }
}

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

        & nav {
            color: red;
            margin: 0 auto;
            width: 80%;
            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: 1.5vw;
                    font-family: BoldFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                        text-decoration-color: red;
                    }
                }
            }
        }
    }

    .area {
        width: 100%;
        height: 53vw;
        position: relative;

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

        & .area__information {
            position: absolute;
            width: 50vw;
            height: 35vw;
            padding-bottom: 5vw;
            left: 5vw;
            top: 20vw;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            & p {
                display: flex;
                flex-direction: column;
                color: #142140;
                font-size: 1.8vw;
                font-family: LightFont, serif;

                & .area__information__contact {
                    width: 20vw;
                    display: flex;
                    text-decoration: none;
                    color: #142140;
                    font-family: LightFont, serif;
                    transition: all .2s linear;

                    &:hover {
                        color: red;
                    }
                }
            }

            z-index: 10;
        }

        & .area__illustration {
            width: 38vw;
            height: 38vw;
            position: absolute;
            right: 3vw;
            top: 19vw;
            border-radius: 10vw;
        }
    }

    .area__top {
        background-image: url("../images/accountDeletion/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__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;
                        }
                    }
                }
            }

        }

        & .area__top__phone {
            position: absolute;
            right: 3vw;
            top: 10vw;
            width: 40vw;
            height: 45vw;
            display: flex;
            justify-content: center;
            align-items: center;

            & .area__top__phone__border {
                width: 35vw;
                height: 100%;
                position: absolute;
                z-index: 2;
            }

            & .area__top__phone__picture {
                position: absolute;
                width: 20vw;
                height: 95%;
                z-index: 1;
            }

            & .area__top__phone__shadow {
                width: 45vw;
                margin-bottom: 20px;
                position: absolute;
                z-index: 0;
            }
        }
    }
}