* {
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(65, 63, 63);
  height: 100vh;
  display: grid;
  grid-template-columns: 20% auto auto;
  grid-template-rows: max-content 5% auto auto max-content;
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "Images main main"
    "Images main main"
    "footer footer footer";
}

input,
textarea {
  display: block;
  margin-bottom: 20px;
}

input[type="submit"] {
  margin-left: 135px
}

form {
  padding-left: 10px;
  margin-left: auto;
  margin-right: auto;
}



header {
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 25px;
  background: linear-gradient(90deg, rgba(245, 15, 46, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 75%, rgba(245, 15, 46, 1) 100%);
  grid-area: header;
}

ul {

  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
  padding: 10px;
}

#nav_menu {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 20px;
  background-color: rgb(68, 66, 66);
  grid-area: nav;
}

nav ul {
  padding-bottom: 5px;
}

nav li {
  list-style-type: none;
  color: red;
  text-decoration: none;
}

nav a {
  text-decoration: none;
  color: white;
}

nav a:hover {
  background-color: darkred;
  color: white;
}

table {
  border: 1px solid #003300;
  width: 80%;
  border-spacing: 0;
  border-collapse: collapse;

}


td,
th {
  padding: 5px;
  border: 1px solid #3399CC;
}

td {
  text-align: center;
}

tr:nth-of-type(odd) {
  background-color: #f00f00
}

footer {
  grid-area: footer;
  color: white;
  text-align: center;
  background: linear-gradient(90deg, rgba(245, 15, 46, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 75%, rgba(245, 15, 46, 1) 100%);
}

#words1 {
  background-color: white;
  color: black;
  grid-area: main;
  padding: 20px;
  font-size: large;
}

#images {
  grid-area: Images;
}

#info {
  grid-area: main;
  display: block;
}


@media only screen and (max-width: 767px) {
  .images {
    display: none;
  }

  body {
    padding: 0%;
    height: 100vh;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: max-content max-content auto auto max-content;
    grid-template-areas:
      " header header"
      " nav nav"
      " main main"
      " main main"
      " footer footer";
  }

  nav li {
    display: block;
    margin: 0;
    border: solid 2px #f0eeee;
  }

  nav {
    float: none;
    width: auto;
    text-align: center;
    padding: .5em;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .images {
    display: none;
  }

  body {
    padding: 0%;
    height: 100vh;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: max-content max-content auto auto max-content;
    grid-template-areas:
      " header header"
      " nav nav"
      " main main"
      " main main"
      " footer footer";
  }

  nav li {
    display: block;
    margin: 0;
    border: solid 2px #f1eeee;
  }

  nav {
    float: none;
    width: auto;
    text-align: center;
    padding: .5em;
  }
}