:root{
  --animation-time: 4s;
  --checkpoint-1: 25%
}

body {
    display:grid;
    font-family: system-ui;
    background-color: rgb(25, 25, 25);
    color: rgba(255, 255, 255, 0);
}
  
a{
  color: rgba(255, 255, 255, 0);
  animation-name: link-onload;
  animation-duration: var(--animation-time);
  animation-fill-mode: forwards;
}

@keyframes link-onload{
  25%{
    color: rgba(255, 255, 255, 0);
    text-decoration: none;
  }
  50%{
    color: rgba(255, 255, 255, 0);
  }
  75%{
    color: rgba(255, 255, 255, 1);
  }
  80%{
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
  }
  100%{
    color: rgba(0, 0, 255, 1);
    text-decoration: none;
  }
}

#main {  
  width: 85vw;
  height: 100%;
  padding: 25px 10px 25px 10px;
  animation-name: onload;
  animation-duration: var(--animation-time);
  animation-fill-mode: forwards;
  justify-self: center;
  text-align: center;
}

@keyframes onload{
  0%{
    background-color: rgba(50, 200, 255,0);
  }
  25%{
    background-color: rgba(50, 200, 255,0.5);
  }
  35%{
    color: rgba(255, 255, 255, 0);
    background-color: rgb(25, 100, 175);
  }
  75%{
    color: rgba(255, 255, 255, 1);
    background-color: rgb(25, 100, 175);
  }
  80%{
    color: rgba(255, 255, 255, 1);
    background-color: rgb(25, 100, 175);
  }
  100%{
    color: rgba(255, 255, 255, 1);
    background-color: rgb(25, 100, 175);
  }
}

#img-div{
  display: grid;
  width: 100%;
  justify-self: center;
}
#image{
  width: 75%;
  border-radius: 50%;
  justify-self: center;
  animation-name: image-onload;
  animation-duration: var(--animation-time);
  animation-fill-mode: forwards;
  transform: scale(1)
}
/*
@keyframes image-onload{
  0%{
    transform: scale(0);
  }
  30%{
    transform: scale(0);
  }
  51%{
    border-radius: 50%;
    transform: scale(1.25);
  }
  80%{
    border-radius: 5%;
    transform: scale(1)
  }
  100%{
    border-radius: 5%;
    transform: scale(1)
  }
}
*/
#img-caption{
  justify-self: center;
  text-align:left;
  width: 75%;
  font-size:2vw;
}

#grid-list{
  padding: 25px 10px 25px 10px;
  display:grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap:20px;
  grid-row-gap:10px;
  background:rgba(200,200,200,0.3);
  text-align:left;
}

.date{
  text-align:right;
  font-weight:bold
}

.font-10{
  font-size: 10px;
}