endofyear/static/painting/css/painting.css

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

@font-face {
    font-family: 'dongzhu';
    src: url('../font/dongzhu-Extralight.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');
    position: relative;
}

.popup {
    position: absolute;
    margin: 0 2px;
    bottom: 0.5rem;
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #d1d1d1;
}

.popup > .notice > hr {
    margin: 1rem 0;
}

.popup > .selection {
    text-align: right;
}

.selection > button {
    border: none;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 0 0.5rem;
}

.allow {
    cursor: pointer;
}

.deny {
    background-color: #059862;
    cursor: pointer;
    color: #fff;
    padding: 0.5rem 0;
    opacity: 0.8;
}

.deny:hover,
.deny:focus {
    opacity: 1;
    cursor: pointer;
}

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

.tab2-box {
    position: fixed;
    top: 2rem;
    padding-left: 2rem;
    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: 2rem;
    padding-left: 2rem;
    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 {
    position: relative;;
    top: 2rem;
    left: 2rem;
    line-height: 2rem;
    color: #448288D9;
}

#tab4 > .tab4-box > p:nth-child(1) {
    width: 7rem;
    font-size: 2.5rem;
}

#tab4 > .tab4-box > p:nth-child(2) {
    font-size: 1.5rem;
    width: 16rem;
}

#tab4 > .tab4-box > p:nth-child(3) {
    font-size: 1.25rem;
    width: 14rem;
}

#tab4 > .tab4-box > p:nth-child(4) {
    font-size: 2rem;
}

#tab4 > .tab4-box > p:nth-child(5) {
    font-size: 2rem;
}


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

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

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

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

.tab6-box {
    position: relative;
    padding: 1rem;
    text-align: center;
    line-height: 2rem;
    color: #613f38c7;
}

#tab6 > .tab6-box > p:nth-child(1) {
    font-size: 2rem;
}

#tab6 > .tab6-box > p:nth-child(2) {
    font-size: 1.25rem;
}

#tab6 > .tab6-box > p:nth-child(3) {
    font-size: 1.5rem;
}


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

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

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

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

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

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

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

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

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

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

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


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

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

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

#tab9 > .tab9-box {
    padding: 2rem 2rem;
}

.tab9-box > p {
    font-family: 'dongzhu', -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';
    font-size: 2.75rem;
    line-height: 3.5rem;
    writing-mode: vertical-rl;
    color: #FFFFFFD9;
    margin: 0;
}