@font-face {
    font-family: 'GaramondLight'; /* Name your font family */
    src: url('CormorantGaramond-Light.ttf'); /* Locate the .ttf file within your directory*/
}

@font-face {
    font-family: 'GaramondRegular'; /* Name your font family */
    src: url('CormorantGaramond-Regular.ttf'); /* Locate the .ttf file within your directory*/
}

@font-face {
    font-family: 'GaramondMedium'; /* Name your font family */
    src: url('CormorantGaramond-Medium.ttf'); /* Locate the .ttf file within your directory*/
}

html{
    font-size:100%;
    @media screen and (min-width: 900px){
        font-size:150%;
    }
}

body {
    font-family: 'GaramondMedium', sans-serif;
    max-width: clamp(320px, 90%, 1000px);
    margin: auto;
    font-size: 1.25rem;
    line-height: 1.5;
    accent-color: #1d7ee3; /* use your favorite color */
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

.navigation {
    display: flex;
    justify-content: space-around;
    font-size: 1.0rem;

    .button {
        cursor: pointer;
    }
}

.title {
    display: flex;
    flex-direction: column;
    text-align: center;

    .button {
        cursor: pointer;
    }
}