/* Chapter 1: Declaration
 * Chapter 2: General
 * Chapter 3: Class & ID
 * Chapter 4: Query
 */

/* Chapter 1:
 *    ___          __              __  _         
 *   ╱ _ ╲___ ____╱ ╱__ ________ _╱ ╱_(_)__  ___ 
 *  ╱ ╱╱ ╱ ─_) __╱ ╱ _ `╱ __╱ _ `╱ __╱ ╱ _ ╲╱ _ ╲
 * ╱____╱╲__╱╲__╱_╱╲_,_╱_╱  ╲_,_╱╲__╱_╱╲___╱_╱╱_╱
 * Variables! */


/* Chapter 2:
 *   _____                      __
 *  ╱ ___╱__ ___  ___ _______ _╱ ╱
 * ╱ (_ ╱ ─_) _ ╲╱ ─_) __╱ _ `╱ ╱ 
 * ╲___╱╲__╱_╱╱_╱╲__╱_╱  ╲_,_╱_╱  
 * Resets and general elements. */


/* Chapter 3:
 *   _______               ____      _______ 
 *  ╱ ___╱ ╱__ ____ ___   ╱ __╱___  ╱  _╱ _ ╲
 * ╱ ╱__╱ ╱ _ `(_─<(_─<   > _╱_ _╱ _╱ ╱╱ ╱╱ ╱
 * ╲___╱_╱╲_,_╱___╱___╱  │_____╱  ╱___╱____╱ 
 * Do classes come earlier than general elements? */

/* Thanks Coding2GO for all of these😭
 * Flexbox vs. Grid: https://youtu.be/aEj6k-gi9-s
 * Grid Course: https://youtu.be/JYfiaSKeYhE */
.flex--bio-n-links {
    position: relative;
    display: flex;
    gap: var(--bigger-rem);
}

.flex--bio {
    min-width: 300px;
    height: fit-content;
    position: sticky;
    top: 0;

    margin: 0 0 0 auto;
    /* ^ 이거 안 하면 왼쪽이 잘림 */

    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex--bio img {
    margin-top: var(--bigger-rem);
    width: 200px;
}

.flex--bio h1 {
    margin-top: 0.5em;
    font-size: 2.5em;
}

.flex--bio p {
    text-align: center;
}

.flex--bio button {
    margin-top: var(--base-rem);
    font-size: 1.2em;
    font-family: 'OmuDaye', system-ui, sans-serif;
    border: 0.5px solid var(--accent-color);

    transition: scale var(--boioioi-easing) var(--boioioi-duration);
}

.flex--bio button:active {
    transition: scale ease 50ms;
}

.grid--links {
    --widget-size: 175px;

    margin: 0 auto 0 0;
    /* ^ .flex-bio랑 합작해서 가운데로 밀어넣는 녀석임 */

    display: grid;
    grid-auto-rows: auto;
    grid-template-areas:
        "title-1 title-1 title-1 title-1"
        "x-main tktk yt-main yt-alt"
        "title-2 title-2 title-2 title-2"
        "rblx-main rblx-alt tstry nblog"
        "title-3 title-3 title-3 title-3"
        "x-alt bsky insta thrds"
        "tmblr sbstk ptrst dscrd"
        "bili blank ncts ncts";

    justify-content: center;
    /* ^ 각 컬럼을 x축 중앙으로? */
    align-content: start;
    /* ^ Thanks Kevin: https://youtu.be/KOx0NdGJ7pc */
    gap: var(--base-rem);
    padding: var(--bigger-rem) var(--base-rem);
}

.grid--links h2 {
    margin: var(--bigger-rem) 0 0;
}

.grid--links__item--square {
    width: var(--widget-size);
    height: var(--widget-size);
    border: 1px solid var(--border-color);
    border-radius: var(--base-rem);

    display: grid;
    overflow: hidden;
}

.grid--links__item--square > img {
    width: 100%;
    object-fit: cover;
    /* ^ 자기 자신(src) */

    justify-self: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /* ^ 그리드 선 1에서 2까지의 영역을 차지 -- for overlapping */

    z-index: 1;
    transition: 0.2s;
}

.grid--links__item--square__stop {
    width: 100%;
    height: fit-content;
    overflow: hidden;

    align-self: end;
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    z-index: 2;
}

.grid--links__item--square__stop .gradient--bottom-up {
    height: var(--bigger-rem);
    margin-bottom: -1px;
}

.grid--links__item--square__stop__pls {
    text-align: center;
    font-size: small;
    padding: 1.5em 1em;

    transition: 0.2s;
}

.grid--links__item--square__stop__pls p,
.grid--links__item--rectangle__flex-stop__pls p {
    color: var(--secondary-color);
    text-wrap-mode: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid--links__item--square a,
.grid--links__item--rectangle a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    z-index: 3;
    transition: 0.2s;
}

/* HOVER YEAHHHHHHHHHHHHHH!!!!!!!!!!! */
.grid--links__item--square:hover > img {
    filter: blur(3px);
}

.grid--links__item--square:hover .grid--links__item--square__stop__pls {
    padding: 2em 1em;
}

.grid--links__item--square:hover a {
    background: rgba(142, 124, 157, 0.1);
}

.grid--links__item--rectangle {
    width: calc(2 * var(--widget-size) + var(--base-rem));
    /* ^ 길이: 일반 위젯 두 배 + gap */
    height: var(--widget-size);
    border: 1px solid var(--border-color);
    border-radius: var(--base-rem);

    display: grid;
    overflow: hidden;
}

.grid--links__item--rectangle > img {
    width: 100%;
    object-fit: cover;

    justify-self: right;
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    z-index: 1;
    transition: 0.2s;
}

.grid--links__item--rectangle__flex-stop {
    width: 70%;
    height: 100%;
    overflow: hidden;

    justify-self: left;
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    display: flex;
    flex-direction: row;

    z-index: 2;
}

.grid--links__item--rectangle__flex-stop__pls {
    font-size: small;
    align-content: center;
    padding: 1.5em 2em;

    transition: 0.2s;
}

.stamp {
    width: 99px;
    opacity: 50%;

    transition: 0.2s;
}

.grid--links__item--rectangle__flex-stop .gradient--left2right {
    width: 50%;
    margin-left: -1px;
}

/* HOVER YEAHHHHHHHHHHHHHH!!!!!!!!!!! */
.grid--links__item--rectangle:hover > img {
    filter: blur(3px);
}

.grid--links__item--rectangle:hover .grid--links__item--rectangle__flex-stop__pls {
    padding: 1.5em 3em;
}

.grid--links__item--rectangle:hover .stamp {
    opacity: 100%;
}

.grid--links__item--rectangle:hover a {
    background: rgba(142, 124, 157, 0.1);
}

/* Chapter 4:
 *   ____                   
 *  ╱ __ ╲__ _____ ______ __
 * ╱ ╱_╱ ╱ ╱╱ ╱ ─_) __╱ ╱╱ ╱
 * ╲___╲_╲_,_╱╲__╱_╱  ╲_, ╱ 
 *                   ╱___╱  
 * Media queries! */

@media (prefers-reduced-motion: reduce) {
    .flex--bio button {
        transition: scale 0;
    }
}

/* 기본적으로 데스크탑 뷰 */

/* 패드 */
@media screen and (max-aspect-ratio: 1/1) {
    .flex--bio-n-links {
        flex-direction: column;
    }

    .flex--bio {
        width: 100%;
        min-width: initial;
        position: relative;
    }

    .flex--bio img {
        width: 30%;
        max-width: 150px;
    }

    .grid--links {
        justify-items: center;
        padding: 0 0 var(--bigger-rem) 0;
        margin: auto 0;

        grid-template-areas:
            "title-1 title-1"
            "x-main tktk"
            "yt-main yt-alt"
            "title-2 title-2"
            "rblx-main rblx-alt"
            "tstry nblog"
            "title-3 title-3"
            "x-alt bsky"
            "insta thrds"
            "tmblr sbstk"
            "ptrst dscrd"
            "bili blank"
            "ncts ncts";
    }
}

/* 모바일 */
@media screen and (max-aspect-ratio: 9/16) {
    .grid--links {
        --widget-size: 150px;
    }

    .grid--links__item--square__stop__pls {
        padding: 1em;
    }
}

/* 긴 모바일 */
@media screen and (max-aspect-ratio: 2/5) {
    .grid--links {
        --widget-size: 130px;
    }

    .grid--links__item--square__stop__pls {
        font-size: x-small;
    }
}