* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    /*justify-content: center;
    align-items: center;
    background-color: #f0f0f0;*/
}

.page-container{
  /*display: flex;*/
}

.section-container{
  display: grid;
  margin-left: auto;
  margin-right: auto;
}

.copy-container{
  display: flex;
  height: 100vh;
  position: fixed;
  align-items: center;
  justify-self: center;
  padding: 25px;
  max-width: 50%;
}

h1{
  font-family: sans-serif;
}

.fadein {
   animation: fadeInAnimation ease 2.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   }

@keyframes fadeInAnimation
{
   0%
   {
   opacity: 0;
   }

   100%
   {
   opacity: 1;
   }
}

.fadeout {
   animation: fadeOutAnimation ease 2.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   }

@keyframes fadeOutAnimation
{
   0%
   {
   opacity: 1;
   }

   100%
   {
   opacity: 0;
   }
}

.image-container{
  display: grid;
  /*flex-wrap: wrap;*/
}

.image{
  max-width: 25%;
  margin: 300px 0;
}

.image:first-child{
  padding-top: 100vh;
}

.image:last-child{
  padding-bottom: 100vh;
}

.left{
  justify-self: flex-start;
}

.right{
  justify-self: flex-end;
}