* {
    font-family: Quicksand, Arial;
    color: #625c40;
    margin: 0;
    padding: 0;
}


html {
    font-size: 25px;
    background-color: rgb(255, 251, 234);
}

nav {
    position:fixed;
    top: 0;
    height: 20px;
    z-index: 20;
    width: 100%;
    display: flex;
    justify-items: end;
    mix-blend-mode: difference;
}


ul {
    display: flex;
    text-decoration: none;
    list-style-type: none;
    padding: 0;
    margin: auto;
}

li a:link, li a:visited {
    text-decoration: none;
    padding: 10px;
    color: white;
}

#banner, #about, #projects, #resume, #recipes {
    top: 40px;
    position: relative;
    margin: auto;
}

h1 {
    font-size: clamp(1.5rem, 20vw, 2.5rem);
    margin: auto;
    width: auto;
    display: block;
    transition: color 500ms linear;
    text-align: center;
}

h2 {
    font-size: clamp(1.5rem, 20vw, 2.5rem);
    margin: auto;
    width: auto;
    display: block;
    transition: color 500ms linear;
}

h1:hover, h2:hover {
    color: #525252;
}

#about p {
    margin: 20px;
    width: 50%;
}

p {
    font-size: clamp(.5rem, 40vw, .8rem);
    line-height: 1.4rem;
}

.blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    height: auto;
    margin: auto 20%;
}

.block {
    background-color: #FFFBEA;
    margin: 8px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    transition: background-color 300ms ease, margin 350ms ease, font-size 300ms ease;
    box-shadow: 2px 2px 4px rgb(192, 185, 151);
    border-radius: 4px;
    display: flex;
}

.block p {
    margin: auto;
    padding: 0;
    transition: font-size 250ms 50ms ease, color 350ms ease, letter-spacing 350ms linear;
}

.block:hover {
    background-color: #fffdf5;
    margin: 2.5px;
    cursor: pointer;
    z-index: 10;
}

.block:hover p {
    font-size: 25px;
    letter-spacing: .05rem;
}

#whitespace {
    height: 40px;
}


/* Top fade overlay */
.fade-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* fade height */
  pointer-events: none;
  /*background: linear-gradient(to bottom, rgba(255, 251, 234, 1), rgba(255, 251, 234, 1),  rgba(255, 251, 234, 0.7),rgb(255, 251, 234, 0));*/
  z-index: 10;
}

/* Bottom fade overlay */
.fade-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* fade height */
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 251, 234, 1), rgba(255, 251, 234, 1), rgba(255, 251, 234, 0.7), rgb(255, 251, 234, 0));
  z-index: 10;
}