:root {
    --acs-yellow: #FFCB4F;
    --acs-grey: #F1F1F1;
    --acs-blue: #2D56BD;
    --acs-purple: #514DA9;
    --acs-black: #212121;

    /* for member-description */
    --animation-duration: 500ms;
    --gap-size: 0.75vw;
}

@layer default {
    * {
        box-sizing: border-box;
    
        font-family: "Noto Sans HK", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    
        font-size: 14px;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    body {
        position: absolute;
        margin: 0;
        inset: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    #main-wrapper {
        display: flex;
    }
    
    .title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .section-title {
        font-size: 3rem;
        color: var(--acs-purple);
        padding-bottom: 10px;
    }
    
    #main-img {
        #main-img-default {
            width: 100%
        }
    
        #main-img-phone {
            display: none;
        }
    }
    
    #activities {
        padding-top: 2rem;
        padding-left: 4rem;
        padding-right: 4rem;
    }
    
    #articles {
        padding-top: 2rem;
        padding-left: 4rem;
        padding-right: 4rem;
    
        #monthly-shelf {
    
            main {
                padding-bottom: 2rem;
                gap: 1rem;
        
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
        
        
                .monthly {
                    width: 30%;
                    overflow: hidden;
            
                    img {
                        width: 100%;
                        transition: all .3s ease;
                    }
            
                    img:hover {
                        transform: scale(1.135);
                        transform-origin: center;
                    }
                }
            }
        }
    
        #past-article-shelf {
    
            main {
                gap: 1rem;
    
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
    
                &>.book-container {
                    width: 20%;
        
                    display: flex;
                    flex-direction: column;
        
                    &>.book-img-container {
                        overflow: hidden;
        
                        img {
                            width: 100%;
                            height: 100%;
                            transition: all .3s ease;
            
                        }
        
                        img:hover {
                            transform: scale(1.2);
                            transform-origin: center;
                        }
                    }
        
        
                    &>.book-detail {
                        padding: .5rem;
                        font-size: 20px;
                        color: var(--acs-purple);
                        background-color: var(--acs-grey);
                        
                        
                        display: flex;
                        justify-content: center;
                    }
                }
            }
        }
    }
    
    #about {
        padding-top: 2rem;
        padding-left: 4rem;
        padding-right: 4rem;
    
        &>#member-description {
            height: 100%;
            width: 79%;
            justify-self: center;
            display: grid;
            grid-template-columns: auto min-content;
            overflow: hidden;
    
            &>* {
                padding: var(--gap-size);
            }
    
            #main-img-container {
                position: relative;
                height: 90vh;
                background-color: var(--acs-grey);
        
                &>#member-main-img {
                    position: absolute;
                    inset: 0;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
        
                    &.animation {
                        transform: scale(1.125);
                        opacity: 0;
                    }
                }
            }
        
            #visual-navi {
                gap: var(--gap-size);
                display: grid;
                grid-template-columns: 1fr 1fr;
                background-color: var(--acs-grey);
        
                &>.visual-navi-item {
                    position: relative;
                    aspect-ratio: 1/1;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: calc(var(--gap-size)/2);
                    transition: all calc(var(--animation-duration)/2) ease;
                    filter: brightness(.80);
        
                    &::before {
                        position: absolute;
                        inset: 0;
                        content: "";
                        border-radius: calc(var(--gap-size)/2);
                        transition: all calc(var(--animation-duration)/2) ease;
                        border: var(--acs-yellow) 0px solid;
                    }
        
                    &:hover {
                        transform: scale(1.25);
                        z-index: 1;
                        filter: brightness(1);
                    }
        
                    &.current {
                        filter: brightness(1);
        
                        &::before {
                            border-width: calc(var(--gap-size)/1.5);
                        }
                    }
                }
            }
        }
    }
    
    footer {
        font-size: 10px !important;
        margin-top: 5rem;
        padding: 2.5rem;
        background-color: var(--acs-grey);
        display: flex;
        justify-content: center;
    }
}