#about {
    position: fixed;
    left: 0px;
    top: 0px;
}

.showcase {
    align-items: center;
    display: flex;
    width: 100%;
}

.mask-canvas {width: 100%;}
.mask-case div {
    padding-top: 10px;
    border-top: 1px solid var(--text-color);
    background: url('../img/ave-mujica.webp') no-repeat right 15px / 120px;
    text-align: left;
    font-size: 40px;
    display: block;
    opacity: 0.7;
    margin: 0px auto;
    height: 80px;
    width: 70%;
}
.prof-case {flex-grow: 1; text-align: center;}
.prof-case .profile {border-radius: 50%; width: 180px; margin-bottom: 15px;}
.prof-case .yuicyou {height: 35px; display: block; margin: auto;}
.prof-case .contact {margin-bottom: 20px; margin-top: 7px;}
.prof-case .contact a {margin: 5px;}
.prof-case .contact img {height: 24px;}
.text-case {font-size: 14px; text-align: left; text-indent: 2em;}
.text-case rt {color: var(--theme-color); letter-spacing: 0px; font-size: 12px;}
.text-case ruby {color: var(--theme-color);}


@media (min-aspect-ratio: 4/3) {
    #about .box {width: 80%;}
    .showcase {flex-direction: row; height: 100vh;}
    .mask-case {min-width: 50%; margin-right: 7%;}
}

@media (max-aspect-ratio: 4/3) {
    #about .box {width: 90%;}
    .showcase {flex-direction: column;}
    .mask-case {width: 100%; margin-top: var(--nav-height);}
    .prof-case {margin: 0px 20px;}

    .mask-case div {font-size: 30px; height: 60px;}
    .text-case {font-size: 12px;}
    .text-case rt {font-size: 7px;}
    .prof-case .profile {width: 140px;}
}