/* notebook.css */

/* =========================
   Ink color shared variable
   ========================= */
:root {
    --ink-color: #1a1a1a;
}

/* =========================
   Custom Fonts
   ========================= */
@font-face {
  font-family: "Valen Valentine Script";
  src: url("valen_valentine_script-webfont.woff2") format("woff2"),
       url("valen_valentine_script-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bamum";
  src: url("bamum_symbols_1-webfont.woff2") format("woff2"),
       url("bamum_symbols_1-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* =========================
   Notebook Page
   ========================= */
body.notebook {
    background: url("background.png") no-repeat center top;
    background-size: cover;

    font-family: "Valen Valentine Script", cursive;
    color: var(--ink-color);

    padding: 60px;
    line-height: 1.6;

    /* subtle ink bleed */
    text-shadow: 0.3px 0.3px rgba(0,0,0,0.15);
}

/* =========================
   Header
   ========================= */
h1 {
    font-size: 80px;
    color: var(--ink-color);
    font-weight: normal;
    text-align: center;
    margin-bottom: 40px;

    text-shadow: 0.5px 0.5px #fff8e0;
}

/* =========================
   Notes Container
   ========================= */
.notes {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* =========================
   Paragraphs
   ========================= */
.notes p {
    font-size: 35px;
    margin: 10px 0 30px 0;
    color: var(--ink-color);
}

/* =========================
   Note Links (student notes)
   ========================= */
.note-link {
    display: block;
    font-size: 40px;
    margin: 20px 0;
    text-decoration: none;
    color: var(--ink-color);

    transition: transform 0.2s ease;
    position: relative; /* fix for pseudo-elements */
    z-index:2;
}

/* uneven handwritten effect */
.note-link:nth-child(odd) {
    transform: rotate(-1.5deg);
}

.note-link:nth-child(even) {
    transform: rotate(1deg);
}

/* hover effect */
.note-link:hover {
    transform: rotate(0deg) translateX(6px);
    color: #3a2e2e;
}

/* =========================
   Margin Scribble Arrows
   ========================= */
.note-link::before {
    content: "➤";
    position: absolute;
    left: -30px;

    font-size: 28px;
    color: var(--ink-color);

    transform: rotate(-10deg);
}

/* randomize arrow rotation */
.note-link:nth-child(even)::before {
    transform: rotate(8deg);
}

/* =========================
   Dual Font Button
   ========================= */
.special-button {
    pointer-events: none;
    cursor: default;

    text-decoration: none;
    color: var(--ink-color);

    display: inline-block;
    font-size: 35px;

    margin: 10px 0;
}

.special-button .font1 {
    font-family: "Valen Valentine Script", cursive;
}

.special-button .font2 {
    font-family: "Bamum", cursive;
}

/* =========================
   Ink Line Separator
   ========================= */
.ink-line-separator {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;

    margin: 20px 0 25px 0;
}

/* =========================
   Back Button
   ========================= */
.back {
    position: fixed;
    top: 20px;
    right: 20px;

    font-size: 22px;
    text-decoration: none;

    color: var(--ink-color);

    background: rgba(255,255,255,0.6);

    padding: 8px 12px;

    border-radius: 6px;

    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);

    transition: transform 0.2s ease, background 0.2s ease;
}

.back:hover {
    transform: scale(1.08);
    background: rgba(255,255,255,0.85);
}

/* =========================
   Fun Notebook Easter Eggs
   ========================= */

/* Small margin notes */
.margin-note {
    position:absolute;
    font-family:"Valen Valentine Script", cursive;
    font-size:24px;
    color: var(--ink-color);

    opacity: .75;

    transform: rotate(-6deg);
    transform-origin: center;

    text-shadow:0.3px 0.3px rgba(0,0,0,.15);

    pointer-events:none;

    font-weight:400; /* prevents bold */
    z-index:1;

    -webkit-font-smoothing: antialiased;
}

/* Individual margin note positions */
.note1 {
    right: -160px;
    top: 200px;
    transform: rotate(-8deg);
    font-size: 24px;
    opacity: 0.7;
}

.note2 {
    left: -60px;
    bottom: -20px;
    transform: rotate(5deg);
    font-size: 30px;
    opacity: 0.6;
}

.note3 {
    left: -350px;
    top: -65px;
    transform: rotate(-25deg);
}
#editor{
    min-height:500px;

     background:rgba(255,255,255,.75);

    font-family:"Valen Valentine Script", cursive;

    font-size:32px;

    color:var(--ink-color);

    border:none;
}