@import url('./vars.css');
@import url('./tags.css');

html {
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
}

body {
    width: fit-content;
    height: calc(100% - 6vh);
    padding: 3vh 1.3vw;
    display: grid;
    grid-auto-columns: 12% 30% max-content;
    grid-template-rows: auto;
    column-gap: 1.5vw;
    font-family: monospace;
    overflow-x: hidden;
    color: black;
    background: var(--bg-knit);

}

p.bold {
    font-weight: bold;
}

blockquote {
    margin: 0 1vw;
}

.link-marker {
    color: rgb(83 83 171);
}


/* ---- Carpenter ---- */
.col-2 {
    grid-column: 2;
    padding: 1vh 1vw;
    background-color: white;
    background: var(--bg-paper);
    background-size: cover;
    background-blend-mode: multiply;
    background-position-x: -16vw;
    color: var(--carpenter-text-colour);
    font-family: var(--carpenter-text);
    font-size: 1rem;
    line-height: 1.8;
    box-shadow: .3rem .3rem 1rem var(--carpenter-text-colour);

    h1 {
        color: var(--carpenter-red);
        font-size: 1.2rem;
        font-family: var(--carpenter-text);
        letter-spacing: .2rem;
        margin-bottom: 1vh;
    }

    .buttons {
        margin: 4vh 0 2vh;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-align: center;
        background-color: var(--purple-light);
        padding: 1vh 2vw;
        box-shadow: .1rem .1rem .3rem rgb(4 4 4 / 20%);
        mix-blend-mode: multiply;
        transform: rotate(-0.5deg);

        button {
            padding: .3vh .5vw;
            background: none;
            border: none;
            text-underline-offset: .35vh;
        }
    }
}

/* ---- Kiara's comments ---- */
.col-3 {
    grid-column: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw;
    column-gap: 2vw;
    font-family: monospace;
    font-size: .85rem;
    line-height: 1.4;
    margin-right: 2vw;

    div.panel {
        div.note {
            width: 100%;
            display: flex;
            flex-direction: row;
            column-gap: 1vw;
            justify-content: space-between;
            align-items: baseline;
        }
    }

    p:not(.btn) {
        width: 17vw;
        background-color: #e6e6fad4;
        padding: .8vh .5vw;
        box-shadow: var(--shadow);
    }

    img.img-hc {
        --outline: var(--handcoded);
    }

    img.img-hyb {
        --outline: var(--hybrid);
    }

    img.img-eng {
        --outline: var(--engagement);
    }

    img.img-phys {
        --outline: var(--physical);
    }

    img.img-res {
        --outline: var(--resistance);
    }

    img:not(.btn) {
        width: 17vw;
        box-shadow: var(--shadow);
        outline: dashed .22rem var(--outline);
    }


    img:not(.btn):hover {
        scale: 3;
        transform-origin: top left;
        outline: dashed .11rem var(--outline);
    }
}

.btn {
    font-size: 3rem;
    font-weight: bold;
    display: block;
    text-align: center;
    color: whitesmoke;
    -webkit-text-stroke: .12rem var(--purple);
    text-shadow: 0rem 0rem 1rem var(--purple);
    cursor: pointer;
}

.panel-1 {
    grid-column: 1;
}

.panel-2 {
    grid-column: 2;
    display: none;
}

.panel-3 {
    grid-column: 3;
    display: none;
}

.panel-4 {
    grid-column: 4;
    display: none;
}


/* --> 002.html */
#img-note-01 {
    margin-top: 65vh;
}

#pad-note-01 {
    margin-top: 21vh;
}

#new-note-01 {
    margin-top: 8vh;
}

#new-note-02 {
    margin-top: 30vh;
}

/* ------------ */

/* --> 003.html */
#img-note-02 {
    margin-top: 39vh;
}

#new-note-03 {
    margin-top: 6vh;
}

#pdf-note-01 {
    margin-top: 63vh;
}

#pdf-note-02 {
    margin-top: 8vh;
}

#pdf-note-03 {
    margin-top: 20vh;
}

#pdf-note-04 {
    margin-top: 6vh;
}

#pdf-note-05 {
    margin-top: 19vh;
}

#pdf-note-06 {
    margin-top: 24vh;
}

#pdf-note-07 {
    margin-top: 3vh;
}

#pdf-note-08 {
    margin-top: 10vh;
}

#pad-note-02 {
    margin-top: 190vh;
}

#new-note-04 {
    margin-top: 9vh;
}

#new-note-05 {
    margin-top: 21vh;
}

#new-note-06 {
    margin-top: 1vh;
}

#new-note-07 {
    margin-top: 14vh;
}

#new-note-08 {
    margin-top: -1vh;
}

#new-note-09 {
    margin-top: 42vh;
}

#new-note-10 {
    margin-top: -3vh;
}

#new-note-11 {
    margin-top: 3vh;
}

/* ------------ */

/* --> 004.html */
#img-note-03 {
    margin-top: 75vh;
}

#img-note-04 {
    margin-top: 10vh;
}

#pad-note-03 {
    margin-top: 29vh;
}

#pad-note-04 {
    margin-top: 60vh;
}

#pad-note-05 {
    margin-top: 3vh;
}

#pad-note-06 {
    margin-top: -2vh;
}

#pad-note-08 {
    margin-top: 0;
}

#new-note-12 {
    margin-top: 6vh;
}

#new-note-13 {
    margin-top: 34vh;
}

#new-note-14 {
    margin-top: 44vh;
}

#new-note-15 {
    margin-top: 10vh;
}

/* ------------ */

/* --> 005.html */
#img-note-05 {
    img {
        outline: none !important;
    }
}

#pdf-note-09 {
    margin-top: 10vh;
}

#pdf-note-10 {
    margin-top: 42vh;
}

#pdf-note-11 {
    margin-top: 3vh;
}

#pdf-note-12 {
    margin-top: 31vh;
}

#pdf-note-13 {
    margin-top: 8vh;
}

#new-note-16 {
    margin-top: 10vh;
}

#new-note-17 {
    margin-top: 18vh;
}

#new-note-18 {
    margin-top: 4vh;
}

#new-note-19 {
    margin-top: -3vh;
}

#new-note-20 {
    margin-top: 3vh;
}

#new-note-21 {
    margin-top: 5vh;
}

#new-note-22 {
    margin-top: 28vh;
}

/* ------------ */

/* --> 006.html */
#img-note-06 {
    margin-top: 12vh;
}

#img-note-07 {
    margin-top: 1vh;
}

#pdf-note-14 {
    margin-top: 10vh;
}

/* ------------ */

/* ---- kiara end ---- */