endofyear/static/painting/css/painting.css

@font-face {
    font-family: 'wenkai';
    src: url('../font/LXGWWenKaiMonoGB-Bold.ttf') format('truetype');
}

@media screen and (max-width: 320px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 55vh;
        margin: 0 auto;
    }

}

@media screen and (min-width: 320px) and (max-width: 480px) {
    html {
        font-size: 16px;
    }

    .container {
        max-width: 55vh;
        margin: 0 auto;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    html {
        font-size: 17px;
    }

    .container {
        max-width: 55vh;
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 18px;
    }

    .container {
        max-width: 55vh;
        margin: 0 auto;
    }
}


html {
    font-family: 'wenkai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

    letter-spacing: 0.25rem;
    font-weight: bold;
}

.container {
    display: none;
    overflow: hidden;
    width: 100%;
    min-width: 375px;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.container.active {
    display: block;
}


#tab1 {
    background-image: url('../img/page1.jpg');
}

#tab2 {
    background-image: url('../img/page2.jpg');
}

.tab2-box {
    position: fixed;
    top: 1rem;
    padding: 1rem 1rem;
    font-size: 1.75rem;
    color: #FFFFFFD9;
}

.tab2-box > p > small {
    line-height: 3rem;
    font-size: 3.5rem;
}

#tab3 {
    background-image: url('../img/page3.jpg');
}

.tab3-box {
    position: fixed;
    top: 1rem;
    padding: 1rem 1rem;
    font-size: 1.75rem;
    color: #ffa940;
}

.tab3-box > p > small {
    line-height: 3rem;
    font-size: 3.5rem;
}

#tab4 {
    background-image: url('../img/page4.jpg');
}

.tab4-box {
    writing-mode: vertical-lr;
    position: fixed;
    top: 2rem;
    font-size: 1.75rem;
    color: #FFFFFFD9;
}

#tab4 > .tab4-box > p:last-child {
    writing-mode: horizontal-tb;
    margin: 0 0;
    height: 30vh;
    width: 13rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}


#tab5 {
    background-image: url('../img/page5.jpg');
}

.tab5-box {
    position: relative;
    top: 2rem;
    left: 0.75rem;
    color: #597ef7;
}

#tab5 > .tab5-box > p:nth-child(1) {
    position: relative;
    top: -6rem;
    left: 0.8rem;
    transform: rotate(-43deg);
    font-size: 1.75rem;
}

#tab5 > .tab5-box > p:nth-child(2) {
    position: relative;
    top: 3.2rem;
    left: 7.8rem;
    transform: rotate(42deg);
    font-size: 3.5rem;
}

#tab5 > .tab5-box > p:nth-child(3) {
    position: relative;
    top: 8rem;
    left: 2rem;
    transform: rotate(45deg);
    font-size: 2.5rem;
}

#tab5 > .tab5-box > p:nth-child(4) {
    position: relative;
    top: -13rem;
    left: 11.7rem;
    transform: rotate(-50deg);
    font-size: 1.75rem;
}

#tab5 > .tab5-box > p:nth-child(5) {
    position: relative;
    top: -5.6rem;
    left: 9.7rem;
    transform: rotate(-50deg);
    font-size: 2rem;
}

#tab5 > .tab5-box > p:nth-child(6) {
    position: relative;
    top: 2rem;
    left: 2rem;
    font-size: 1.5rem;
}

#tab5 > .tab5-box > p:nth-child(6) > small {
    font-size: 3rem;
}

#tab5 > .tab5-box > p:nth-child(7) {
    position: relative;
    top: 2rem;
    left: 2rem;
    font-size: 1.5rem;
    line-height: 0;
}

#tab5 > .tab5-box > p:nth-child(7) > small {
    font-size: 3rem;
}


#tab6 {
    background-image: url('../img/page6.jpg');
}

#tab6 > .tab6-box {
    position: fixed;
    bottom: 7%;
    padding-left: 2rem;
    font-size: 1.75rem;
    color: #FFFFFFD9;
}

#tab7 {
    background-image: url('../img/page7.jpg');
}