:root{
    --headerYellow: #fdf49d;
    --mainLightYellow: #fefacf;
    --textBrown: #60463B;
}
body{
    background-color: var(--mainLightYellow);
    color: var(--textBrown);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
         "header"
        "main"
        "footer";
    width: 100vw;
    min-height: 100vh;
    margin: 0;
}
header{
    grid-area: header;
        display: flex;
    align-items: center;
    position: relative;
    background-color: var(--headerYellow);
}
header a{
    position: absolute;
    right: 0;
    color: var(--textBrown);
}
main{
    grid-area: main;
}
#timeline ol{
    position: relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "left right";
    gap: 24px;
    list-style: none;
    padding: 0 25px;
    margin: 0;
}
#timeline ol::before {
  content: "";
  position: absolute;
  width: 4px;
  background-color: var(--textBrown);
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
#timeline li:nth-child(odd) {
    justify-self: end;
}
li{
    border: solid;
    border-color: var(--textBrown);
    width:fit-content;
    height: fit-content;
    padding: 2px 15px;
}
.projectDate{
    width: fit-content;
    padding: 2px 15px;
}
footer{
    grid-area: footer;
    margin-top: 0;
    background-color: var(--headerYellow);
}
footer p{
    margin:0;
    top: 0;
    bottom: 0;
}