@charset "UTF-8";
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .title {
        padding: var(--space-1) 0 var(--space-3) 0;
    }

    .container {
        width: min(1000px, 100% - 8px);
    }


    /* =========================*/
    /* HOME -------------------*/
    /* =========================*/
    .mv.container {
        padding: var(--space-1);
        padding-top: 30px;

    }

    .mv-select__top h1 {
        font-size: 4rem;
    }

    .mv-select {
        width: 100%;
        padding-left: 6px;
        padding-right: 6px;
    }

    .mv-select__frame {
        width: 100%;
        max-width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .mv-select__status {
        display: none;
    }

    .mv-select__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
    }


    .mv-select__character {
        width: 100%;
        max-width: 420px;
    }


    .mv-select__portrait {
        width: 100%;
        height: 180px;
    }

    .mv-select__portrait img {
        width: 100%;
        max-width: 180px;
        height: 100%;

    }





    /* -------------------------------*/

    /* =========================*/
    /* ABOUT -------------------*/
    /* =========================*/

    .aboutBox {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-2);

    }

    .aboutBox img {
        display: block;
        margin: 0 auto;
        max-width: 140px;
    }

    .homeText {
        text-align: center;
        padding: 0 var(--space-4);
    }

    .homeCtas {
        justify-content: center;
    }



    /* SKILL -------------------*/

    .skillBox {
        grid-template-columns: 1fr;
        padding: var(--space-5);
    }

    .skillList li {
        flex-direction: row;
        font-size: 1.5rem;

    }

    .skillImg {
        padding: 0 var(--space-7);
    }



    @media (max-width: 640px) {
        .skillBox {
            grid-template-columns: 1fr;
        }

        .skillHead {
            grid-template-columns: 100px 1fr;
        }

        .skillIcon {
            height: 96px;
        }
    }

    /* -------------------------------*/


    /* WORKS-------------------*/

    .workBadge.s {
        font-size: 1.1rem;
    }



    /* -------------------------------*/

}