@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);

}

.streamImage{
    text-align: center;
    width: 100%;
}

ul,li{
    margin: 0;
    padding: 0;
}


@media screen and (min-width: 1200px) {
        .content{
            border-radius: 5%;
            width: 100%;
            min-height: 600px;
            max-width: 3840px;
        }
        .content h1{
            font-size: 32px;
            text-align: center;
        }
        .streamImage img{
            width: 960px;
            border-radius:30%;
            border: 20px solid  rgb(189,60,163);
        }

        .stream{
            padding-top: 50px;
            margin: 0 auto;
            font-weight: 600;
            width: 960px;
        }
        .stream h2{
            color:  rgb(48,113,222);
            background-color: rgb(255, 255, 255);
            border: 10px solid  rgb(189,60,163);
            border-radius: 10%;
            text-align: center;
            margin: 0 20px;
        }
        .h2explain{
            text-align: center;
        }
        .stream p{
            margin: 0 20px;
        }
        .stream h3{
            border-radius:5%;
            background-color: rgb(189,60,163);
            border: 3px solid rgb(255, 255, 255);
            margin: 0 20px;
        }

        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: 600px;
            border-radius: 5%;
        }
        .content h1{
            font-size: 26px;
            text-align: center;
        }
        .streamImage img{
            width: 580px;
            border-radius:30%;
            border: 10px solid  rgb(189,60,163);
        }

        .stream{
            padding-top: 50px;
            margin: 0 auto;
            font-weight: 600;
            width: 620px;
        }
        .stream h2{
            color:  rgb(48,113,222);
            background-color: rgb(255, 255, 255);
            border: 7px solid  rgb(189,60,163);
            border-radius: 10%;
            text-align: center;
            margin: 0 20px;
            font-size: 20px;
        }
        .h2explain{
            text-align: center;
            font-size: 16px;
        }
        .stream p{
            margin: 0 20px;
            font-size: 16px;
        }
        .stream h3{
            border-radius:5%;
            background-color: rgb(189,60,163);
            border: 3px solid rgb(255, 255, 255);
            margin: 5px 20px;
            font-size: 18px;
        }

        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;
        }


}

/* mobile */
@media screen and (max-width: 649px) {
    .content{
            width: 100%;
            max-width: 3840px;
            border-radius: 5%;
        }
        .content h1{
            font-size: 26px;
            text-align: center;
        }
        .streamImage img{
            width: 90vw;
            border-radius:30%;
            border: 10px solid  rgb(189,60,163);
        }

        .stream{
            padding-top: 50px;
            margin: 0 auto;
            font-weight: 600;
            width: 98vw;
        }
        .stream h2{
            color:  rgb(48,113,222);
            background-color: rgb(255, 255, 255);
            border: 5px solid  rgb(189,60,163);
            border-radius: 10%;
            text-align: center;
            margin: 0 10px;
            font-size: 18px;
        }
        .h2explain{
            text-align: center;
            font-size: 14px;
        }
        .stream p{
            margin: 0 10px;
            font-size: 14px;
        }
        .stream h3{
            border-radius:5%;
            background-color: rgb(189,60,163);
            border: 3px solid rgb(255, 255, 255);
            margin: 5px 10px;
            font-size: 16px;
        }

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

}