@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
*{
    margin: 0px;
    padding: 0px;
}
/*web*/
.grid-container {
    background: rgb(0,2,53);
    background: linear-gradient(90deg, rgba(0,2,53,1) 0%, rgba(30,30,30,1) 100%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "menu menu menu menu"
      "content content content content"
      "content content content content"
      "footer footer footer footer";
    font: Roboto;
    font-size: 12px;
    color: #fff;
  }
  .menu {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "logo nav";
    grid-area: menu;
  }
  .logo {
    grid-area: logo;
    display: flex;
    justify-content: center;

}
  .nav { grid-area: nav; }
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "item-1 item-2 item-3"
      "item-1 item-2 item-3"
      "item-1 item-2 item-3";
    grid-area: content;
  }
  .content h1{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu .logo img{
    width: 70%;
    height: 50%;
    padding: 20px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .nav ul{
    display: flex;
    vertical-align: middle;
    justify-content: flex-end;
    padding-top: 50px;
    margin-right:50px;
  }
  .nav ul li{
    list-style: none;
    padding: 10px;

  }
  .nav ul li a{
    text-decoration: none;
    color: #fff;
  }
  .content img{
    width: 400px;
    height: 250px;
    padding: 20px;

  }
  .content p{
    text-align: left;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
  }
  .item-1 { grid-area: item-1; }

  .item-2 { grid-area: item-2; }

  .item-3 { grid-area: item-3; }

  .footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "info copy social";
    grid-area: footer;
  }
  .footer h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font: Roboto;
    font-size: 15px;
    font-weight: bold;
  }
  .footer p{
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 25px;
    font: Roboto;
    font-size: 15px;
    font-weight: bold;
  }

  .info { grid-area: info; }

  .copy { grid-area: copy; }

  .social { grid-area: social;
    display: flex;
    justify-content: center;
    padding: 10px;

}
.social h3{
    padding: 0 5px;
}
.social img{
    display: flex;
    justify-items: space-between;
    width: 20px;
    height: 20px;

}