@charset 'utf-8';

.intro-wrapper h1{
    margin-bottom: 2rem;
}

.intro-wrapper p{
    margin-top: 2rem;
}

.project-desc .linkbox>img{
    margin-right: 10px;
}

.howtoplay{
    margin-top: 1em;
}

.project-flower-box{
    display: flex;
}

.project-flower-box li{
    flex: 1;
    margin-top: 1rem;
    filter: grayscale(0.5);
}

.project-flower-box li:hover{
    filter: grayscale(0);
}

.project-flower-box li a{
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--font-light-color);
}

.before-performance{
    margin-right: 20px;
    background-image: url('./images/bg1.png');
    background-size: cover;
   background-repeat: no-repeat;
    border-radius: 20px;
    padding: 1rem;
}

.after-performance{
    background-image: url('./images/bg3.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 1rem;
}

.project-flower-box-mobile{
    display: none;
}

.linkbox.web{
    display: block;
}

@media screen and (max-width: 1023px){

    .project-flower-box{
        display: none;
    }

    .project-flower-box-mobile{
        display: flex;
        margin-top: 1em;
    }

    .project-flower-box-mobile>a{
        margin-right: 0.5em;
    }

    .linkbox.web{
        display: none;
    }

    .link-web.mobile{
        padding: 0.5em;
    }
}