body {background-image: url(backgroundimage3.jpg); background-repeat: no-repeat; background-size: cover;}

.container {display: grid;
  grid-template-areas:
  "image intro"
  "skills body"
  "skills body";
  grid-template-columns: 250px auto; column-gap: 10px}

.skills{grid-column: 1/ span auto; grid-row: 2/ span auto;}
.image{grid-column: 1/ span 1;}
.intro{grid-column: 2/ span auto;}
.body{grid-column: auto/ span auto;}

.container > div{background-color: #fffffc; opacity: 85%; box-shadow: 5px 5px 5px darkgray;}
.container > div.intro {grid-area:auto; text-align: center;font-size: 20px;padding-inline: 2% 2%;}
.container > div.menu {grid-area:auto; text-align: center;font-size: 20px;}
.container > div.skills {text-align: center;}
.container > div.body {padding-inline: 2% 2%;}

h1{font-size: 25px;font-family: Abril Fatface;}
h2{font-size: 22px;font-family: Lato;}
h3{font-size: 25px;text-align: center;}
h4{font-size: 22px; color: #4a4a4a;}
p1{font-family: Playfair Display;}
p2{font-size: 15px;font-family: Lato;}
p3{font-size: 20px;font-family: Playfair Display;}