@charset "utf-8"; 

@font-face
{ 
  font-family:'manrope';
  src:url('../fonts/manrope.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

@font-face
{ 
  font-family:'aileron';
  src:url('../fonts/aileron.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

:root {
    /* Page colors */
    --backgroundColor: #030608;
    --backgroundColorSubtle: #285165;
    --accentColor: #436A7D;
    --extraColor: #668695;
    --mainColorDark: #052535;
    /* Font colors */
    --mainFontColor: #C7D4DA;
    /* Section colors */
    --software-bg: #285165;
    --software-highlight: #436A7D;
    --software-font-color: #668695;

    --recipes-bg: #2A7149;
    --recipes-highlight: #488D66;
    --recipes-font-color: #70A888;

    --coffee-bg: #9F713B;
    --coffee-highlight: #C59965;
    --coffee-font-color: #ECC79D;
}

* {
    margin: 0;
    padding: 0;
}

* > h1, * > h2, * > h3, * > p, * > a, * > ul > li, * > ol > li, * > div
{
  font-family:"manrope", "Trebuchet MS", sans-serif;
  line-height:1.5;
  color: var(--mainFontColor);
}

* > a, * > a:hover, * > a:visited {
    text-decoration: none;
}

* > ul, * > ol {
    margin-left: 2.5rem;
}

body {
    background-color: var(--backgroundColor);
}

.body-container {
    text-align: center;
}

/* ============================== BODY ============================== */

i.title-font {
    color: var(--mainColorDark);
    font-style: normal;
}

/* -------------------- desktop -------------------- */

@media only screen and (min-width: 721px) {

    .body-container {
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 30% 70%;
    }
}

/* -------------------- mobile -------------------- */

@media only screen and (max-width: 720px) {

    .body-container {
        width: 100%;
    }
}

/* ============================== NAVBAR ============================== */

/* -------------------- desktop -------------------- */

@media only screen and (min-width: 721px) {

    .navbar {
        width: 100%;
        background-color: var(--accentColor);
        color: var(--backgroundColor);
    }

    .navbar-contents {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: left;
        font-size: 1.5vw;
    }

    .navbar-contents > h1 {
        font-size: 2.25em;
        border-bottom: solid 3px var(--mainFontColor);
    }

    .navbar-contents > h2 {
        font-size: 1.75em;
        padding-top: 1rem;
    }

    .navbar-contents > h3 {
        font-size: 1em;
    }

    .nav-link {
        font-size: 1em;
        margin-left: 1.5rem;
        transition: 0.1s;
    }

    .nav-link:hover {
        text-decoration: underline;
    }

    .selected {
        color: var(--mainColorDark);
    }

}

/* -------------------- mobile -------------------- */

@media only screen and (max-width: 720px) {

    .navbar {
        width: 100%;
        background-color: var(--accentColor);
        color: var(--backgroundColor);
    }

    .navbar-contents {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: left;
        font-size: 5vw;
    }

    .navbar-contents > h1 {
        font-size: 2.25em;
        border-bottom: solid 3px var(--mainFontColor);
    }

    .navbar-contents > h2 {
        font-size: 1.75em;
        padding-top: 1rem;
    }

    .navbar-contents > h3 {
        font-size: 1em;
    }

    .nav-link {
        font-size: 1em;
        margin-left: 1.5rem;
        transition: 0.1s;
    }

    .nav-link:hover {
        text-decoration: underline;
    }

    .selected {
        color: var(--mainColorDark);
    }

}

/* ============================== MAIN CONTAINER ============================== */

/* -------------------- desktop -------------------- */

@media only screen and (min-width: 721px) {

    .main-content {
        width: 100%;
        text-align: center;
    }

    .content-container {
        width: 90%;
        height: 90vh;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .empty {
        width: 100%;
        height: 100%;
        border: dashed 5px var(--accentColor);
        border-radius: 40px;
    }

    .empty > img {
        width: 100%;
    }

    .active {
        display: grid;
    }

    .inactive {
        display: none;
    }

}

/* -------------------- mobile -------------------- */

@media only screen and (max-width: 720px) {

    .main-content {
        width: 100%;
        text-align: center;
    }

    .content-container {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        overflow-x: hidden;
    }

    .empty > img {
        display: none;
    }

    .active {
        display: grid;
    }

    .inactive {
        display: none;
    }

}

/* ============================== CONTENT ============================== */

/* -------------------- desktop -------------------- */

@media only screen and (min-width: 721px) {

    .content {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--accentColor) var(--backgroundColor);
        font-size: 2vw;
    }

    .empty { 
        overflow-y: hidden;
    }

    .content-title {
        display: grid;
        grid-template-columns: 25% 75%;
        margin-bottom: 1.5rem;
    }

    .content-title > div {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .content-title > div > img {
        width: 100%;

    }

    .content-title > div > h4 {
        font-size: 2em;
        text-align: left;
        margin-top: 1rem;
    }

    .content-body {
        width: 100%;
        text-align: left;
        font-size: 2vw;
    }

    .content-link-grid {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: center;
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(15vw, 1fr) );
    }

    .clg-link {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 1.5rem;
        border: solid 3px var(--backgroundColorSubtle);
        border-radius: 15px;
        font-size: 0.75em;
        padding: 1rem;
        transition: 0.1s;
        height: 60%;
        background-color: var(--backgroundColorSubtle);
    }

    .clg-link:hover {
        border-radius: 25px;
    }

    .content-body > h5 {
        font-size: 1.25em;
    }

    .content-body > p, .content-body > ol > li, .content-body > ul > li {
        font-size: 0.75em;
        padding-bottom: 1.5rem;
    }

    .content-body > p > a, .content-body > ol > li > a, .content-body > ul > li > a {
        text-decoration: underline;
    }

    .content-body > p > a:hover, .content-body > ol > li > a:hover, .content-body > ul > li > a:hover {
        color: var(--extraColor);
    }

    .content-body > img {
        text-align: center;
        width: 40%;
        margin-left: 30%;
        margin-right: 30%;
        padding-bottom: 1.5rem;
    }

}

/* -------------------- desktop -------------------- */

@media only screen and (max-width: 720px) {

    .content {
        width: 100%;
        font-size: 4vw;
    }

    .content-title {
        display: grid;
        text-align: center;
        grid-template-columns: 100%;
    }

    .content-title > div {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .content-title > div > img {
        width: 100%;
        margin-top: 1rem;
    }

    .content-title > div > h4 {
        font-size: 2.5em;
        margin-top: 1rem;
    }

    .content-body {
        width: 100%;
        text-align: left;
        font-size: 4vw;
    }

    .content-link-grid {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: center;
        display: grid;
        grid-template-columns: 100%;
    }

    .clg-link {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 2rem;
        border: solid 3px var(--backgroundColorSubtle);
        border-radius: 15px;
        font-size: 1.5em;
        background-color: var(--backgroundColorSubtle);
    }

    .clg-link > p {
        padding: 1rem;
    }

    .content-body > h5 {
        font-size: 1.5em;
    }

    .content-body > p, .content-body > ol > li, .content-body > ul > li {
        font-size: 1.25em;
        padding-bottom: 1.5rem;
    }

    .content-body > p > a, .content-body > ol > li > a, .content-body > ul > li > a {
        text-decoration: underline;
    }

    .content-body > p > a:hover, .content-body > ol > li > a:hover, .content-body > ul > li > a:hover {
        color: var(--extraColor);
    }

    .content-body > img {
        text-align: center;
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
        padding-bottom: 1.5rem;
    }

}