@font-face {
    font-family: Montserrat;
    src: url('./fonts/Montserrat/Montserrat-VariableFont_wght.ttf');
}
@font-face {
    font-family: Cabin;
    src: url('./fonts/Cabin/Cabin-VariableFont_wdth,wght.ttf');
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: "Montserrat";
}

:is(p, a) {
    font-family: "Cabin";
}

p {
    font-size: larger;
}

/* TEST */
/* div {
    border: 1px outset black;
    background-color: rgba(255, 99, 71, 0.4)
} */

body {
    height: 95vh;
}

.page-shell {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

.about-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 65rem;
}

.about-col {
    margin: 0.5rem;
    padding: 0.5rem;
    display: grid;
    grid-template-rows: 85% 15%;
}

.about-greet {
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 0rem;
    padding: 0rem;
}

.email {
    font-family: monospace; 
    font-size: 1.1rem
}

.about-links {
    display: flex;
    justify-content: right;
    height:auto;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 16px 8px;
  text-decoration: none;
}

img {
    width: 100%;
    display: block;
    border-radius: 2px;
}

.social {
     opacity: 0.7;
}

@media (min-width: 200px) and (max-width: 767px) {
    .page-shell {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .about-page { 
        grid-template-columns: 1fr; 
        max-width: 20rem;
    }
    :is(p, a) {
        font-size: medium;
    }
    .about-col {
        display: grid;
        grid-template-rows: 85% 15%;
        margin: 0;
        padding: 0;
    }
    .email {
        font-family: monospace; 
        font-size: 0.9rem
    }
}