/* gradient */
:root {
  --old-rose: #d6a2ad;
  --deep-mocha: #4b3b40;
  --air-force-blue: #3a5a66;
  --air-force-blue_transparent: #8bb3c2e8;
  --ash-grey: #aec3b0;
  --ash-grey-transparent: #aec3b0e8;
  --beige: #eff6e0;
}

body {
    font-family: Helvetica,Consolas,Arial,sans-serif;
    /*background-color: var(--beige);*/
}
.container {
  max-width: 1160px;
  display: grid;
  margin-inline: auto;
  grid-template-areas:
    "header header"
    "title title"
    "content picture"
    "footer footer";
  grid-template-columns: 3fr 2fr;
  gap: 0px;
  padding: 0px;
  background-color: var(--air-force-blue);
}

div {
    font-size: medium;
    /*
    min-width: fit-content;
    min-height: fit-content;
    */
}

/* box model:
    Margin
    Border
    Padding top right bottom left*/
.box {
    background: var(--ash-grey);
    width: 100%;
    margin: 0px;
    margin-inline: auto;
    padding: 0px;
}

.container div {
  background-color: var(--beige);
  padding: 0px;
}

.container div.header {
    grid-area: header;
}
.container div.title {
  grid-area: title;
  text-align: center;
  background-image: url(../img/pcb.svg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:top center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.container div.picture {
    grid-area: picture;
}

.container div.content {
  padding: 20px;
  background-color: var(--ash-grey);
  grid-area: content; 
}

.header ul {
    display: flex;
    flex-wrap: nowrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--old-rose);
}
.header ul li {
  float: left;
}
.header ul li a {
  display: block;
  color: var(--beige);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.header ul li a:hover {
  background-color: var(--deep-mocha);
}

.container div.footer {
  grid-area: footer;
  background-color: var(--air-force-blue);
}

.footer button {
  margin-inline: auto;
  display: block;
  border: none;
  border: none;
  color: var(--deep-mocha);
  background-color: var(--old-rose);
  text-decoration: none;
  padding: 15px 32px;
}
.footer button:hover {
  color: var(--old-rose);
  background-color: var(--deep-mocha);
}
h1 {
  margin-inline: auto;
  max-width: fit-content;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 20px;
  font-size: 7em;
  color: var(--air-force-blue);
}
h2 {
  border-radius: 25px;
  margin-inline: auto;
  max-width: fit-content;
  padding: 20px;
  font-size: 2em;
  color: var(--deep-mocha);
  background-image: linear-gradient(to bottom right, var(--ash-grey-transparent), var(--air-force-blue_transparent));
  /*background-color: var(--ash-grey-transparent);*/
}

p {
    font-size: medium;
}

.picture img {
  max-width: 100%;
  height: auto;
  display: block; 
}