/* PAGE */

body {

    margin: 0;
    background: rgb(254, 228, 245);
    font-family: "IBM Plex Mono", "Courier New", monospace;
    color: #222;

}

/* ---------------- NAVIGATION ---------------- */

.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:30px 40px;

    font-family:"IBM Plex Mono", monospace;

    position:relative;

}


.nav-name a{

    text-decoration:none;

    color:#222;

    font-size:34px;

}


.nav-links{

    display:flex;

    align-items:center;

    gap:55px;

    list-style:none;

    margin:0;

    padding:0;

}


.nav-links li{

    position:relative;

}


.nav-links a{

    text-decoration:none;

    color:#222;

    font-size:28px;

    transition:.2s;

}


.nav-links a:hover{

    opacity:.55;

}


/* ---------- DROPDOWN ---------- */

.submenu{

    position:absolute;

    top:100%;

    left:0;

    background:#faf9f4;

    border:1px solid #d7d2c7;

    min-width:240px;

    padding:10px 0;

    display:none;

    list-style:none;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    z-index:100;

}


.submenu li{

    width:100%;

}


.submenu a{

    display:block;

    padding:10px 18px;

    font-size:18px;

    white-space:nowrap;

}


.dropdown:hover .submenu{

    display:block;

}


/* ---------- BURGER ---------- */

#menu-toggle{

    display:none;

}


.burger{

    display:none;

    font-size:36px;

    cursor:pointer;

    user-select:none;

}


/* ---------- MOBILE ---------- */

@media (max-width:900px){

    .burger{

        display:block;


    }


    .nav{

        flex-wrap:wrap;

    }


    .nav-links{


    width:100%;

    display:none;

    flex-direction:column;

    align-items:flex-end;

    text-align:right;

    gap:0;

    margin-top:25px;


    }


    #menu-toggle:checked ~ .nav-links{

        display:flex;

    }


    .nav-links li{

        width:100%;

    }


.nav-links a{

    display:block;

    width:100%;

    padding:14px 0;

    font-size:24px;

    text-align:right;

}


    /* Dropdown becomes part of flow */

.submenu{

    position:static;

    display:block;

    border:none;

    box-shadow:none;

    background:none;

    padding-right:20px;

    text-align:right;

}


    .submenu a{

        font-size:18px;

        color:#666;

        padding:8px 0;

        text-align:right;

    }

}

/* TWO NOTEBOOK SECTIONS */

.desktop {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1300px;
    margin: auto;
    padding-top: 30px;

}



/* NOTEBOOKS */

.window {

    background: #faf9f4;
    border: 1px solid #d5d0c5;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.08);

}



/* SIMPLE LABEL */

.title {

    padding: 18px 25px 12px;
    border-bottom: 1px solid #ddd7ca;
    font-size: 20px;
    color: #777;
    letter-spacing: 0.05em;
    font-weight: bold;

}



/* CONTENT */

.content {

    padding: 30px;

}



/* NOTES */

.notes ul {

    margin: 0;
    padding-left: 25px;

}


.notes li {

    margin-bottom: 14px;
    line-height: 1.6;

}

.event-header{

    font-weight: bold;
}

.content a{
    text-decoration: none;
    color: black;

}

/* JOURNAL SCROLL AREA */

.journal-content {

    max-height: 650px;
    overflow-y: auto;

}



/* ENTRIES */

.entry {

    padding: 18px 0;
    border-bottom: 1px solid #e3ded3;

}

.red-font {
    color:red
}

.entry:last-child {

    border-bottom: none;

}



/* CLICKABLE AREA */

.entry summary {

    cursor: pointer;
    list-style: none;

}


.entry summary::-webkit-details-marker {

    display:none;

}

.close-entry{

    margin-top:40px;

    background:none;

    border:none;

    cursor:pointer;

    font-family:inherit;

    font-size:16px;

    color:#777;

    padding-bottom:20px;

    font-weight: bold;

}

.close-entry:hover{

    color:#000;

}

/* DATE */

.date {

    display:block;
    font-size:13px;
    color:#888;
    margin-bottom:8px;

}



/* PREVIEW */

.preview {

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.7;

}



/* FULL TEXT */

.entry p {

    margin-top:20px;
    line-height:1.8;

}



/* SUBTLE SCROLLBAR */

.journal-content::-webkit-scrollbar {

    width:8px;

}


.journal-content::-webkit-scrollbar-thumb {

    background:#ccc6b8;

}


.journal-content::-webkit-scrollbar-track {

    background:transparent;

}



/* MOBILE */

@media(max-width:800px){

    body {

        padding:20px;

    }


    .desktop {

        grid-template-columns:1fr;

    }

}