@charset "UTF-8";

html{
    color: rgb(255, 255, 255);
    font-family: "Kaisei Opti", "Kiwi+Maru","Quicksand",sans-serif;
    font-optical-sizing: auto;
    font-variation-settings:"width" 100;
    max-width: 3840px;
    max-height: auto;
}

body{
    margin: 0 auto;
    background-color: white;
}

.content{
    background-color: rgb(48,113,222);
}

.web a{
    color: white;
}

@media screen and (min-width: 1200px) {

    .content{
        width: 100%;
        min-height: 700px;
        max-width: 3840px;
        border-radius: 5%;
    }
    .content h2{
        font-size: 28px;
        text-align: center;
    }
    .web{
        background-color: rgb(189,60,163);
        border: 10px solid rgb(255, 255, 255);
        border-radius: 20%;
        width: 760px;
        margin: 50px auto;
        padding: 100px 0;
    }
    .web p{
        margin: 0 20px 0 20px;
    }

    .contact{
        text-align: center
    }

    footer{
        height: 400px;
        background-color:  rgb(238, 238, 238);
    }
    footer p{
        text-align: center;
    }
    .footerhome{
        padding: 50px;
        font-size: 28px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }
    .footerwords{
        font-size: 20px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }
    .footerright{
        font-size: 28px;
        color: rgb(46, 46, 46);
        font-weight: 700;
    }

}

/* tablet */
@media screen  and (min-width:650px) and (max-width:1199px){
    .content{
        width: 100%;
        min-height: 550px;
        max-width: 3840px;
        border-radius: 5%;
    }
    .content h2{
        font-size: 18px;
        text-align: center;
    }
    .web{
        background-color: rgb(189,60,163);
        border: 8px solid rgb(255, 255, 255);
        border-radius: 20%;
        width: 580px;
        margin: 25px auto;
        padding: 50px 0;
    }
    p{
        font-size: 16px;
        margin: 0 20px 0 20px;
    }
    footer{
        height: 300px;
        background-color:  rgb(238, 238, 238);
    }
    footer p{
        text-align: center;
    }
    .footerhome{
        padding: 50px;
        font-size: 22px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }


    .footerwords{
        font-size: 12px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }
    .footerright{
        font-size: 14px;
        color: rgb(46, 46, 46);
        font-weight: 700;
    }

}
/* mobile */
@media screen and (max-width: 649px) {
    .content{
        width: 100%;
        min-height: auto;
        max-width: 3840px;
        border-radius: 5%;
    }
    .content h2{
        font-size: 18px;
        text-align: center;
    }
    .web{
        background-color: rgb(189,60,163);
        border: 8px solid rgb(255, 255, 255);
        border-radius: 20%;
        width: 90vw;
        margin: 25px auto;
        padding: 50px 0;
    }
    .web p{
        margin: 0 10px;
        font-size: 16px;
    }

    footer{
        height: 300px;
        background-color:  rgb(238, 238, 238);
    }
    footer p{
        text-align: center;
    }
    .footerhome{
        padding: 50px;
        font-size: 18px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }

    .footerwords{
        font-size: 10px;
        color: rgb(46, 46, 46);
        font-weight: 600;
    }
    .footerright{
        font-size: 12px;
        color: rgb(46, 46, 46);
        font-weight: 700;
    }
}