/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- BASIC PAGE ---------- */

body {
    background-color: #9D8983;
    color: #FCF6E7;
    font-family: Helvetica;
    margin: 0;
    text-align: center;
}


/* ---------- HEADER ---------- */

header {
    position: relative;
    width: 100%;
    height: 90px;
}

.top-line {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 90%;
    height: auto;
}

.wordmark {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 60px;
    height: auto;
}


/* ---------- VESSEL ---------- */

.vessel-illustration {
    width: 90px;
    height: auto;
    display: block;
    margin: auto;
    padding-top: 10px;
}


/* ---------- MAIN CONTENT ---------- */

main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 10px;
}


/* ---------- WELCOME ---------- */

.welcome {
    text-align: center;
}

.welcome p {
  padding-top: 70px;
    font-size: 15px;
    letter-spacing: -0.4px;
    margin: 0 0 20px 0;
}


/* ---------- TWO COLUMN CONTENT ---------- */

.content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0 45px;
    margin-top: 70px;
}



/* ---------- INTRO ---------- */

.intro {
    color: #FCF6E7;
    font-size: 15px;
    letter-spacing: -0.4px;
    line-height: 1.45;
    text-align: left;
    padding-top: 70px;
    max-width: 600px;
}

.intro p {
    margin-bottom: 30px;
}


/* ---------- ENTRIES ---------- */

.entries {
    color: #FCF6E7;
    font-size: 15px;
    letter-spacing: -0.4px;
    line-height: 1.5;
    text-align: right;
    padding-top: 20px;
}

.entries p {
    margin: 0 0 10px 0;
}

.entries ul {
    list-style: none;
    padding: 0;
    margin: 10px;
}

.entries li {
    margin-bottom: 10px;
}

.entries a {
    color: #FCF6E7;
    font-size: 15px;
    letter-spacing: -0.4px;
    text-decoration: underline;
}



/* ---------- 404 PAGE ---------- */

.not-found {
    text-align: center;
    margin-top: 30vh;
    color: #FCF6E7;
    font-size: 18px;
    letter-spacing: -0.4px;
}

.not-found a {
    color: #C1D6CA;
    text-decoration: underline;
}

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

@media (max-width: 600px) {

    /* PAGE */

    main {
        width: 100%;
        padding-top: 5px;
    }


    /* HEADER */

    header {
        width: 100%;
        position: relative;
    }

    .top-line {
        width: 190%;
        left: -420px;
        top: 10px;
        height: auto;
        display: block;
    }

    .wordmark {
        width: 50px;
        height: auto;
        top: 20px;
        right: 12px;
    }


    /* WELCOME */

    .welcome {
        margin-top: 40px;
    }

    .welcome p {
        font-size: 15px;
        letter-spacing: -0.4px;
        margin-bottom: 12px;
    }

    .vessel-illustration {
        width: 80px;
        height: auto;
        display: block;
        margin: 0 auto;
    }


    /* TWO COLUMN CONTENT */

    .content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 18px;
        padding: 0 25px;
        box-sizing: border-box;
        margin-top: 65px;
    }


    /* INTRO */

    .intro {
        width: 58%;
        margin: 45px 0 0 0;
        font-size: 15px;
        letter-spacing: -0.4px;
        line-height: 1.45;
        text-align: left;
    }


    /* ENTRIES */

    .entries {
        width: 35%;
        margin: 0;
        letter-spacing: -0.4px;
        font-size: 15px;
        line-height: 1.45;
        text-align: right;
    }

    .entries ul {
        padding: 0;
        margin: 10px 0 0 0;
        list-style: none;
    }

    .entries a {
        font-size: 15px;
        letter-spacing: -0.4px;
    }
}

/* ---------- LIGHT MODE ---------- */

body.light-mode {
    background-color: #FCF6E7;
    color: #9D8983;
}

body.light-mode .intro,
body.light-mode .entries,
body.light-mode .welcome p {
    color: #9D8983;
}

body.light-mode .entries a {
    color: #9D8983;
}


/* ---------- VESSEL ---------- */

.vessel-light {
    display: none;
}

body.light-mode .vessel-dark {
    display: none;
}

body.light-mode .vessel-light {
    display: block;
}


/* ---------- MODE BUTTON ---------- */

.mode-toggle {
    position: absolute;
    left: 25px;
    top: 80px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mode-toggle img {
    width: 100px;
    height: auto;
    display: block;
}

.mode-light {
    display: none;
}

body.light-mode .mode-dark {
    display: none;
}

body.light-mode .mode-light {
    display: block;
}


/* ---------- BLOG POST ---------- */

.post-page {
    max-width: 750px;
    margin: 0 auto;
    padding: 80px 30px;
    box-sizing: border-box;
    text-align: left;
}

.return-vessel {
    color: #FCF6E7;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: -0.4px;
}

.return-vessel:hover {
    color: #C1D6CA;
}

.post-page article {
    margin-top: 70px;
}

.post-date {
    font-size: 14px; letter-spacing: -0.4px;
    margin-bottom: 10px;
}

.post-page h1 {
    color: #C1D6CA;
    font-size: 28px;
    letter-spacing: -0.4px;
    margin: 0 0 50px 0;
    text-align: left;
}

.post-content {
    font-size: 18px; letter-spacing: -0.4px;
    line-height: 1.65;
}

.post-content p {
    margin-bottom: 30px;
}


/* ---------- LIGHT MODE POST ---------- */

body.light-mode .return-vessel {
    color: #9D8983;
}

body.light-mode .return-vessel:hover {
    color: #9FB8AA;
}

body.light-mode .post-page h1 {
    color: #9FB8AA;
}

/*------ LINK COLOURS ------*/

/* DARK MODE */

.entries a,
.entries a:visited {
    color: #C1D6CA;
}

.entries a:hover,
.entries a:active {
    color: #FCF6E7;
}


/* LIGHT MODE */

body.light-mode .entries a,
body.light-mode .entries a:visited {
    color: #9FB8AA;
}

body.light-mode .entries a:hover,
body.light-mode .entries a:active {
    color: #9D8983;
}