*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  min-width: 375px;
  max-height: 949px;
  font-size: 1.4em;
  font-family: 'Inconsolata', monospace;
  color: var(--gray1);
}

:root {
  --gray1: #333333;
  --gray2: #4F4F4F;
}

/* --- DIV. CONTAINER ---*/
.container{
 width: 95%;
 height: 100%;      
 margin: auto;       
}      

/* --- SECTION.NOTFOUND ---*/
.notFound{
  font-size: 2.4rem;
  line-height: 2.5rem;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  margin-left: 2.4rem;
  padding-top: 3.55%;
  margin-bottom: 10%;
}
/* --- SECTION.SCARECROW ---*/
.scarecrow{
  margin: auto;
  margin-bottom: 20%;
  /* width: 76.5%; */
}
.scarecrow img{
  width: 100%;
  height: auto;
}
/* --- SECTION.TITLE_SUBTITLE ---*/
.title{
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 7.11rem;
  letter-spacing: -0.035;
  font-family: 'Space Mono';
  margin-left: 2.4rem;
  margin-bottom: 8%;
}
.subtitle{
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.6rem;
  letter-spacing: -0.035em;
  font-family: 'Space Mono';
  color:var(--gray2);
  margin-left: 2.4rem;
  margin-top: 2rem;
  margin-bottom: 18%;
}
button{
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2.1rem;
  letter-spacing: -0.035rem;
   background-color: var(--gray1);
  color:#ffffff;
  padding: 2.5% 4.5%;
  text-transform: uppercase;
  margin-left: 2.4rem;
  border: none;
  margin-bottom: 30%;
}
button a{
  color: #fff;
  text-decoration: none;
}
/*--- SECTION.CREATEDBY ---*/
.createdBy{
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2.5rem;
  letter-spacing: -0.035em;
  margin-left: 2.4rem;
  margin-top: 2rem;
  color: #eb008a;
  margin: 0 auto;
}
footer p{
  width: 95%;
 text-align: center;
}
.createdBy a{
  color: #eb008a;
  text-decoration: none;
}

@media screen and (min-width: 768px) and (max-width:1440px) {
  .container{
    max-width: 1440px;
    background-color: lightpink;
    margin: 0 auto;
    display: grid;
    grid-template: 5% 60% 20%/repeat(2,45%);
  }
 .notFound{
    grid-area: 1/1/2/2;
  }
   .scarecrow{
    grid-area: 2/1/3/2;
    margin-top: 0;
  } 
  .scarecrow img{
    width: 100%;
    height: auto;
  }
  .title_subtitle{
    grid-area: 2/2/3/3;
  }
  .createdBy{
    grid-area: 3/2/4/3;
  } 
  }