@font-face {
  font-family: 'NanumSquare';
  font-weight: 800;
  src: url(./font/AppleSDGothicNeoR.ttf) format('truetype');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;

    font-family: 'NanumSquare';
    font-weight: 800;
    letter-spacing: -1px;
}

body{
    overflow: hidden;
}

.background-img{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    
    }
}

iframe{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.gallery-modal{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba($color: #000000, $alpha: 0.5);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;

    img{
        max-width: 90%;
        max-height: 90%;
    }
}

main{
    width: 100vw;
    height: 100vh;
    padding: 1.5vw;
    background-image: url('assets/overlay.png');

    .title-wrapper{
        width: 100%;
        height: fit-content;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(153, 153, 153, 0) 100%);
        border-radius: 3px;
        font-family: 'NanumSquare';
        font-weight: 800;
        letter-spacing: -1px;
        font-size: 18px;
        text-align: center;
        color: rgba(255, 255, 255, 0.68);
    }

    .top{
        width: calc(100% - 3vw);
        height: 16vh;
        position: absolute;
        top: 1.5vw;
        left: 1.5vw;
        display: flex;
        align-items: flex-start;
        gap: 2vw;

        .gallery-wrapper{
            width: calc(70% - 2vw);
            display: flex;
            flex-direction: column;
            gap: 1vw;
            height: 100%;
            position: relative;

            .btn{
                position: absolute;
                width: 39px;
                height: 39px;
                background: #FFFFFF;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                opacity: 0.5;

                &:hover{
                    opacity: 1;
                }

                &.after{
                    right: -1.5%;
                    top: 50%;
                    transform: translateY(-0%);
                }

                &.before{
                    left: -1.5%;
                    top: 50%;
                    transform: translateY(-0%);

                    img{
                        transform: rotate(180deg);
                    }
                }
            }

            .gallery-images{
                width: 100%;
                height: calc(100% - 21px);
                overflow-x: hidden;
                border-radius: 3px;

                &::-webkit-scrollbar{
                    height: 0px;
                }
            }

            .scroll{
                display: flex;
                width: fit-content;
                height: 100%;
                gap: 0.5vw;
            }

            .image{
                width: 30vw;
                height: 100%;
                border-radius: 3px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;

                img{
                    width: 100%;
                    min-height: 100%;
                    cursor: pointer;
                }
            }
        }

        .media-wrapper{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .media-box-wrapper{
                width: 100%;
                height: 100%;
                display: flex;
                gap: 0.5vw;

                .media-box{
                    width: 33%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    border-radius: 3px;
                    cursor: pointer;

                    .icon{
                        height: 55%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    img{
                        opacity: 0.6;
                    }

                    .title{
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 27px;
                    }

                    &.instagram{
                        background: linear-gradient(93.28deg, rgba(225, 48, 108, 0.2) -4.89%, rgba(131, 58, 180, 0.2) 103.85%);
                        border: 2px solid rgba(225, 48, 108, 0.2);

                        .title{
                            color: rgba(255, 105, 156, 0.6);
                        }
                    }

                    &.discord{
                        background: linear-gradient(93.28deg, rgba(88, 101, 242, 0.2) -4.89%, rgba(130, 140, 255, 0.2) 103.85%);
                        border: 2px solid rgba(88, 101, 242, 0.4);

                        .title{
                            color: rgba(207, 211, 255, 0.6);
                        }
                    }

                    &.youtube{
                        background: linear-gradient(93.28deg, rgba(255, 82, 82, 0.2) -4.89%, rgba(255, 0, 0, 0.046) 103.85%);
                        border: 2px solid rgba(255, 82, 82, 0.16);

                        .title{
                            color: rgba(255, 82, 82, 0.6);
                        }
                    }

                    &:hover{
                        img{
                            opacity: 1;
                        }

                        &.instagram{
                            background: linear-gradient(93.28deg, rgba(225, 48, 108, 0.4) -4.89%, rgba(131, 58, 180, 0.4) 103.85%);
                            border: 2px solid rgba(225, 48, 108, 0.2);

                            .title{
                                color: rgba(255, 105, 156, 1);
                            }
                        }
    
                        &.discord{
                            background: linear-gradient(93.28deg, rgba(88, 101, 242, 0.4) -4.89%, rgba(130, 140, 255, 0.4) 103.85%);
                            border: 2px solid rgba(88, 101, 242, 0.4);

                            .title{
                                color: rgba(207, 211, 255, 1);
                            }
                        }
    
                        &.youtube{
                            background: linear-gradient(93.28deg, rgba(255, 82, 82, 0.4) -4.89%, rgba(255, 0, 0, 0.1) 103.85%);
                            border: 2px solid rgba(255, 82, 82, 0.16);

                            .title{
                                color: rgba(255, 82, 82, 1);
                            }
                        }
                    }
                }
            }
        }
    }

    .bottom{
        width: calc(100% - 3vw);
        height: 37vh;
        position: absolute;
        bottom: 12vh;
        left: 1.5vw;
        display: flex;
        align-items: flex-start;
        gap: 2vw;

        .updates-wrapper{
            width: 55%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .update-box-wrapper{
                width: 100%;
                height: calc(100% - 1vw);
                overflow-x: scroll;

                &::-webkit-scrollbar{
                    height: 0px;
                }

                .scroll{
                    display: flex;
                    gap: 0.5vw;
                    width: fit-content;
                    height: 100%;
                }
            }

            .update-box{
                width: 17.4vw;
                height: 100%;
                background: rgba(0, 0, 0, 0.22);
                border-radius: 3px;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                .thumbnail{
                    width: 100%;
                    height: 50%;
                    overflow: hidden;

                    img{
                        width: 100%;
                        min-height: 100%;
                        object-fit: cover;
                    }
                }

                .content{
                    width: 100%;
                    height: 50%;
                    padding: 0.8vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                .title-box{
                    width: 100%;
                    display: flex;
                    align-items: flex-end;
                    gap: 0.5vw;

                    .title{
                        font-family: 'Alumni Sans';
                        font-weight: 700;
                        font-size: 24.4444px;
                        line-height: 90%;
                        color: #FFFFFF;
                    }

                    .subtitle{
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 18px;
                        line-height: 90%;
                        padding-bottom: 1px;
                        text-transform: lowercase;
                        color: #fff;
                        opacity: 0.5;
                    }
                }

                .description{
                    font-family: 'NanumSquare';
                    font-weight: 800;
                    letter-spacing: -1px;
                    font-size: 14px;
                    line-height: 115%;
                    color: rgba(255, 255, 255, 0.58);
                }

                .bottom-box{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .btn{
                        .icon{
                            display: flex;
                        }

                        display: flex;
                        gap: 5px;
                        background: linear-gradient(260.48deg, #FFCC4A 7.86%, #FFB800 104.46%);
                        border-radius: 2px;
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 18px;
                        line-height: 90%;
                        color: rgba(0, 0, 0, 0.58);
                        padding: 4px 6px;
                        align-items: center;
                    }

                    .date{
                        border: 1px solid rgba(255, 255, 255, 0.17);
                        border-radius: 2px;
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 18px;
                        line-height: 90%;
                        color: rgba(255, 255, 255, 0.38);
                        padding: 4px 6px;
                    }
                }
            }
        }

        .team-wrapper{
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .author-box-wrapper{
                width: 100%;
                height: calc(100% - 1vw);
                overflow: hidden;

                .scroll{
                    display: flex;
                    gap: 0.5vw;
                    flex-direction: column;
                    height: 100%;
                    width: 100%;

                    .author-box{
                        background: rgba(255, 255, 255, 0.05);
                        border: 1px solid rgba(255, 255, 255, 0.08);
                        border-radius: 3px;
                        padding: 1vw;
                        display: flex;
                        flex-direction: column;
                        gap: .5vw;
                        height: 50%;

                        .content{
                            width: 100%;
                            height: 50%;
                            display: flex;
                            align-items: center;
                            gap: 0.5vw;

                            .name-wrapper{
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                height: 100%;
                            }

                            .name{
                                font-family: 'NanumSquare';
                                font-weight: 800;
                                letter-spacing: -1px;

                                font-size: 16px;
                                line-height: 90%;
                                color: #FFFFFF;
                            }

                            .rank{
                                font-family: 'NanumSquare';
                                font-weight: 800;
                                letter-spacing: -1px;
                                
                                font-weight: 400;
                                font-size: 16.5714px;
                                line-height: 90%;
                                color: rgba(255, 255, 255, 0.69);
                            }

                            .desc{
                                font-family: 'NanumSquare';
                                font-weight: 800;
                                letter-spacing: -1px;

                                font-size: 12px;
                                line-height: 200%;
                                color: rgba(255, 255, 255, 0.46);
                            }

                            .image{
                                width: 58px;
                                height: 58px;
                                border: 1px solid rgba(255, 255, 255, 0.26);
                                border-radius: 8px;
                                padding: 5px;
                                
                                img{
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: 8px;
                                }
                            }
                        }

                        .socials{
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0.2vw;
                            
                            .social-box{
                                width: calc(50% - 0.25vw);
                                display: flex;
                                align-items: center;
                                gap: 10px;

                                .text{
                                    font-family: 'NanumSquare';
                                    font-weight: 800;
                                    letter-spacing: -1px;

                                    font-size: 12px;
                                    line-height: 90%;
                                }
                                
                                .icon{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 30px;
                                    height: 30px;
                                }

                                &.twitter{
                                    background: linear-gradient(90deg, rgba(98, 180, 255, 0.22) 0%, rgba(98, 180, 255, 0) 100%);
                                    border-radius: 2px;

                                    .text{
                                        color: #A9D6FF;
                                    }

                                    .icon{
                                        background: rgba(98, 180, 255, 0.22);
                                    }
                                }

                                &.youtube{
                                    background: linear-gradient(90deg, rgba(255, 61, 61, 0.22) 0%, rgba(255, 61, 61, 0) 100%);
                                    border-radius: 2px;

                                    .text{
                                        color: #FF7272;
                                    }

                                    .icon{
                                        background: rgba(255, 61, 61, 0.22);
                                    }
                                }

                                &.instagram{
                                    background: linear-gradient(90deg, rgba(225, 48, 108, 0.22) 0%, rgba(225, 48, 108, 0) 100%);
                                    border-radius: 2px;

                                    .text{
                                        color: #FF73A2;
                                    }

                                    .icon{
                                        background: rgba(225, 48, 108, 0.22);
                                    }
                                }

                                &.discord{
                                    background: linear-gradient(90deg, rgba(88, 101, 242, 0.22) 0%, rgba(88, 101, 242, 0) 100%);
                                    border-radius: 2px;

                                    .text{
                                        color: #5865F2;
                                    }

                                    .icon{
                                        background: rgba(88, 101, 242, 0.22);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .misc-wrapper{
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 0.5vw;

            .keyboard{
                width: 100%;
                height: fit-content;
                position: absolute;
                left: 0;
                display: none;
                bottom: 100%;
                background: rgba(48, 50, 60, 0.8);
                border-radius: 3px 3px 0px 0px;
                padding: 10px;

                .keys-wrapper{
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    gap: 0.2vw;
                    margin-bottom: 1vw;

                    .line{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                    }
                    
                    .key{
                        background: rgba(255, 255, 255, 0.07);
                        border: 0.651815px solid rgba(255, 255, 255, 0.13);
                        border-radius: 1.62954px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-style: normal;
                        font-size: 13.78px;
                        line-height: 90%;
                        color: rgba(255, 255, 255, 0.44);

                        &.active{
                            background: rgba(255, 255, 255, 0.46);
                            border: 0.651815px solid rgba(255, 255, 255, 0.13);
                            border-radius: 1.62954px;
                            color: #fff;
                        }

                        &.small{
                            width: 24px;
                            height: 24px;
                        }

                        &.mid{
                            width: 42px;
                            height: 24px;
                        }

                        &.big{
                            width: 54px;
                            height: 24px;
                        }
                        
                        &.space{
                            width: 50%;
                        }
                    }
                }

                .key-showcase{
                    width: 100%;
                    padding: 1vw;
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 3px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5vw;

                    .key{
                        width: fit-content;
                        padding: 0 1vw;
                        height: 56px;
                        background: rgba(255, 255, 255, 0.46);
                        border: 1px solid rgba(255, 255, 255, 0.13);
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 500;
                        font-size: 33px;
                        line-height: 90%;
                        text-align: center;
                        color: #FFFFFF;
                    }

                    .title-box{
                        max-width: 80%;
                        word-wrap: break-word;
                    }

                    .title{
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 18px;
                        line-height: 90%;
                        color: #FFFFFF;
                    }

                    .subtitle{
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 12.44px;
                        line-height: 116%;
                        color: rgba(255, 255, 255, 0.59);
                    }
                }
            }

            .btn{
                display: flex;
                width: 100%;
                gap: 10px;
                position: relative;
                background: rgba(36, 37, 45, 0.8);
                border-radius: 3px;
                padding: 0.5vw;
                align-items: center;
                cursor: pointer;
                opacity: 0.5;
                position: relative;

                &:hover{
                    opacity: 1;
                }

                .title{
                    font-family: 'NanumSquare';
                    font-weight: 800;
                    letter-spacing: -1px;
                    font-size: 16px;
                    line-height: 100%;
                    color: #E0E4FF;
                }

                .subtitle{
                    font-family: 'NanumSquare';
                    font-weight: 800;
                    letter-spacing: -1px;
                    font-size: 12px;
                    line-height: 100%;
                    color: rgba(255, 255, 255, 0.56);
                }

                .icon{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .icon-2{
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .music-player{
                display: flex;
                width: 100%;
                gap: 10px;
                position: relative;
                background: rgba(36, 37, 45, 0.8);
                border-radius: 9px;
                padding: 1vw;

                .music-wrapper{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                    width: calc(100% - 140px);
                }

                .image{
                    width: 120px;
                    height: 120px;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 1px solid rgba(255, 255, 255, 0.26);
                    padding: 5px;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 9px;
                    }
                }

                .name{
                    font-family: 'NanumSquare';
                    font-weight: 800;
                    letter-spacing: -1px;
                    font-size: 15px;
                    line-height: 100%;
                    color: #FFFFFF;
                }

                .author{
                    font-family: 'NanumSquare';
                    font-weight: 800;
                    letter-spacing: -1px;
                    font-size: 13.3919px;
                    color: rgba(255, 255, 255, 0.62);
                }

                .progress-wrapper{
                    width: 100%;
                    display: flex;
                    gap: 10px;
                    align-items: center;

                    .bar-wrapper{
                        width: 90%;
                        height: 2px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        background: rgba(255, 255, 255, 0.26);
                        border-radius: 3px;

                        .bar{
                            height: 6px;
                            width: 0%;
                            background: #fff;
                            border-radius: 3px;
                            transition: 0.1s;
                        }
                    }

                    .time{
                        font-family: 'NanumSquare';
                        font-weight: 800;
                        letter-spacing: -1px;
                        font-size: 12px;
                        line-height: 90%;
                        color: rgba(255, 255, 255, 0.62);
                        width: 20px;
                    }
                }

                .controls{
                    width: 100%;
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    justify-content: center;

                    .pause{
                        display: none;
                    }

                    img{
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .loading-wrapper{
        width: calc(100% - 3vw);
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: end;
        position: absolute;
        bottom: 1.5vw;
        right: 1.5vw;
        gap: 1.3vw;

        .loading-text{
            display: flex;
            align-items: flex-end;
            gap: 10px;

            .title{
                font-family: 'NanumSquare';
                font-weight: 800;
                letter-spacing: -1px;
                font-size: 16px;
                line-height: 90%;
                color: #FFC326;
            }

            .subtitle{
                padding-bottom: 1px;
                font-family: 'NanumSquare';
                font-weight: 800;
                letter-spacing: -1px;
                font-size: 12px;
                line-height: 90%;
                color: rgba(255, 255, 255, 0.43);
            }
        }

        .loading-bar{
            width: 100%;
            height: fit-content;
            position: relative;

            .default{
                width: 97vw;
                height: 1vw;
                border-radius: 3px;
                background-color: rgba($color: #fff, $alpha: 0.1);
            }

            .yellow{
                width: 0%;
                height: 1vw;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                transition: width 0.2s;

                img{
                    width: 97vw;
                    height: 1vw;
                }
            }

            .pointer{
                border-radius: 50%;
                height: 5vh;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0%;
                transition: left 0.2s;

                img{
                    width: auto;
                    height: 100%;
                }
            }
        }
    }
}