@font-face {
    font-family: MPLUS_Regular;
    src: url(../fonts/MPLUS1-Regular.ttf);
}

:root {
    --color-text: #1F2937;
    --color-accent: #FB7185;
    --color-background: #FAF9F6;
    --color-border: #74AD8A;
    --color-primary: #ADF3C8;
    --color-primary-hover: #74AD8A;
    --color-link-hover: #286D42;
}

body {
    font-family: 'MPLUS_Regular', monospace;
    margin: auto;
    max-width: 1280px;
    color: var(--color-text);
    background: var(--color-background);
    padding-left: 1rem;
    padding-right: 1rem;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

footer {
    height: 100px;
}

.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary);
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px;
}

.topnav a {
    color: var(--color-text);
    text-decoration: none;
    padding: 10px;
    border-right: 1px solid var(--color-border);
}

.topnav p {
    margin: 0;
    text-decoration: none;
}

.topnav a:last-child {
    border-right: none;
    border-left: 1px solid var(--color-border);
}

.topnav a:hover {
    background-color: var(--color-primary-hover);
    border-radius: 5px;
}

.cascanect-logo {
    max-width: 100px;
    background: black;
    border-radius: 25px;
}

.app-div {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
}

.app-link {
    display: flex;
    align-items: center;
    font-size: 30px;
}

.app-link img {
    margin-right: 15px;
    max-width: 100px;
}

@media (max-width: 768px) {
    .topnav a {
        border-right: none;
        border-left: none;
    }

    .topnav a:last-child {
        border-right: none;
        border-left: none;
    }
}