* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Anton";
  src: url("../font/Anton/Anton-Regular.ttf") format("truetype");
  }
  @font-face {
  font-family: "Nunito";
  src: url("../font/Nunito/Nunito-Regular.ttf") format("truetype");
  }
  @font-face {
  font-family: "NunitoBold";
  src: url("../font/Nunito/Nunito-Bold.ttf") format("truetype");
  }
  @font-face {
  font-family: "NunitoExtraBold";
  src: url("../font/Nunito/Nunito-ExtraBold.ttf") format("truetype");
  }
  @font-face {
  font-family: "NunitoItalic";
  src: url("../font/Nunito/Nunito-Italic.ttf") format("truetype");
  }
  @font-face { 
  font-family: "NunitoLight";
  src: url("../font/Nunito/Nunito-Light.ttf") format("truetype");  
  }
  @font-face {
  font-family: "NunitoSemiBold";
  src: url("../font/Nunito/Nunito-SemiBold.ttf") format("truetype"); 
}

body {
  font-family: Poppins, Nunito, Arial, Helvetica, sans-serif;         
  background-color: #b7e4c7;
  text-align: center;
  background: url(../img/ara.jpg) no-repeat center;
  background-position: 50% 0%;
}

/* Style the header */
.header {
  grid-area: header;  
  padding: 20px;
  text-align: center;
  width: 100%;
  margin-top: 0px;
}



/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left middle middle right right' 
    'footer footer footer footer footer footer';
  /* grid-column-gap: 10px; - if you want gap between the columns */
} 


.middle
 {
  padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px;  margin-top: 0px;
  min-height: 300px; /* Should be removed. Only for demonstration */
  background: rgba(103, 191, 103, 0.7);
}


/* Style the middle column */
.middle {
  grid-area: middle;
  top: 50%;
  width: 100%;
  border-radius: 0px;
  text-align: center;
}

.middle h1
{
color: white; 
padding: 0px;
font-size: 70px;
font-family: Anton;
background: rgba(4, 135, 87, 0.7);
border-radius: 0px;
left: 50%; 
letter-spacing: 2px;
}

.middle h2
{ 
letter-spacing: 1px;
font-size: 32px;
color: white;
/*font-family: Nunito;    */
}

.middle fieldset
{
border: 1px solid white;
border-radius: 0px;
text-align: center;
padding-bottom: 20px;
color: white;
}

.middle legend
{
font-size: 28px;
/* font-family: Nunito;  */
}

.log
{
color: white;
font-family: NunitoItalic;
font-size: 26px;
padding-top: 10px;
}

.input
{
color: black; 
padding: 10px;
height: 46px;
border: 0px;
font-size: 22px;
font-family: NunitoItalic;
}         

.send
{
background-color: #ccc; 
font-family: NunitoItalic;
margin-top: 15px;
padding: 10px;
width: 150px;
font-size: 22px;
transition-duration: 0.4s;
border: 0px;
}

.send:hover
{
background-color: #aaa; 
cursor: pointer;
color: white;
}


/* Style the footer */
.footer {
  grid-area: footer;
 /* background-color: #67bf67;  */
  font-family: Nunito, Arial, Helvetica, sans-serif;     
  padding-bottom: 20px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 900px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'middle middle middle middle middle middle' 
      'footer footer footer footer footer footer';
  }
}