@font-face {
    font-family: 'Phosphe`ne Font';
    src: url('fonts/PhospheneFont-Regular.woff2') format('woff2'),
        url('fonts/HealTheWebA-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Satoshi-Regular';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
       url('fonts/Satoshi-Variable.woff') format('woff'),
       url('fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono-Regular';
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Variable.woff') format('woff'),
       url('fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

:root{
    /* --pink: rgb(255, 56, 152); */
    --background: #ffffff;
    /* --yellow: #f9ff4b; */
    --green: #75fe66;
    --black: #111111;
    --spacing: 2rem;
    --morespacing: 4rem;
    font-family: 'JetBrainsMono-Regular';
    --heart-size: calc(var(--morespacing) * 5);
}

body{
    block-size: 100vh;
	display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    color: var(--black);
    background-color: var(--background);
}

main{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    align-items: center;
    align-content: center;
}

main p{
    padding: var(--morespacing);
}

ul{
    max-width: calc(var(--morespacing) * 4);
    display: grid;
    justify-content: center;
    padding: var(--spacing);
    border: calc(var(--spacing) / 8) dotted var(--green);
    margin-inline: var(--morespacing);
}

ul li{
    text-align: center;
}

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

main a:hover{
    color: var(--green);
    text-decoration: underline;
}

em{
    font-family: 'Phosphe`ne Font';
}

span{
    text-decoration: underline;
}

header{
    font-family: "Inter", sans-serif;
    font-size: var(--spacing);
    background: var(--green);
    padding: var(--morespacing);
}

footer{
   background-color: var(--green);
   padding: var(--morespacing);
    font-family: "Inter", sans-serif;
}

@media (width < 800px){

    ul {
        font-size: calc(var(--spacing)*0.75);
        margin-inline: auto;
    }

    main p{
        text-align: center;
    }

    header{
        text-align: center;
    }

    footer{
        text-align: center;
        font-size: calc(var(--spacing)*0.75);
    }

}