/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
  "header "
  "content"
  "footer ";
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  color: hsl(0 0% 20% / 1.0);
  background: hsl(230 45% 40% / 1.0);
}

main {
  grid-area: content;
}

header {
  grid-area: header;
  position: relative;
}

header img {
  margin: 1em;
  outline: 3px solid hsl(230 45% 40% / 1.0);
  outline-offset: -7px;
  max-width: calc(100vw - 2em);
  border-top-left-radius: 64px 16px;
  border-top-right-radius: 16px 64px;
  border-bottom-right-radius: 64px 16px;
  border-bottom-left-radius: 16px 64px;
}

header p {
  font-family: 'Playfair Display';
  font-size: 4rem;
  line-height: 0.8;
  text-align: center;
  background: hsl(230 35% 35% / 0.7);
  display: inline;
  padding: 0.1em 0.3em 0.3em;
  border-top-left-radius: 32px 8px;
  border-top-right-radius: 8px 32px;
  border-bottom-right-radius: 32px 8px;
  border-bottom-left-radius: 8px 32px;
  color: white;
}

header p span {
  font-family: 'Open Sans';
  font-size: 2rem;
  margin: 0;
  line-height: 0.8;
}

.centered {
  position: absolute;
  left: 10%;
  top: 20%;
  transform: translate(-10%, -20%);
}

nav {
  grid-area: nav;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
}

nav li {
  display: inline;
}

article {
  background: hsl(0 0% 90% / 1.0);
  padding: 4em 8em 4em 2em;
  margin: 3em 8vw 2em 18vw;
  border-top-left-radius: 50% 3%;
  border-top-right-radius: 3% 50%;
  border-bottom-right-radius: 50% 3%;
  border-bottom-left-radius: 3% 50%;
}

.articleimg {
  float: left;
  outline: 1px solid hsl(230 45% 40% / 1.0);
  outline-offset: -5px;
  border-top-right-radius: 35% 50%;
  border-bottom-right-radius: 35% 50%;
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
  margin-right: 1.6em;
  margin-left: -180px;
  shape-outside: ellipse(150px 340px at left center);
}

.aboutimg {
  float: right;
  border-radius: 10px;
  margin-left: 1em;
}

footer {
  grid-area: footer;
  font-size: 1rem;
  text-align: center;
  color: white;
  font-weight: 600;
  font-family: 'Playfair Display';
}

p {
  margin: 0 0 1.3em;
}

a {
  padding: 0.1em 0.6em;
  text-decoration: none;
  border-top-left-radius: 3% 50%;
  border-top-right-radius: 50% 3%;
  border-bottom-right-radius: 3% 50%;
  border-bottom-left-radius: 50% 3%;
}

a:link {
  color: hsl(230 55% 40% / 1.0);
  background: hsl(0 0% 88% / 1.0);
}

a:visited {
  color: hsl(230 25% 50% / 1.0);
  background: hsl(0 0% 90% / 1.0);
}

a:focus {
  color: hsl(230 75% 50% / 1.0);
  background: hsl(230 40% 85% / 1.0);
}

a:hover {
  color: hsl(230 75% 50% / 1.0);
  background: hsl(230 40% 85% / 1.0);
}

a:active {
  color: hsl(230 75% 50% / 1.0);
  background: hsl(230 40% 85% / 1.0);
}

.headerimglink {
  background: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: 'Playfair Display';
  color: hsl(200 66% 36% / 1.0);
  margin: 0;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.2rem;
}

.contact-list li {
  list-style-position: inside;
}

@media (max-width: 440px) {
  * {
  }
  
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
    "header "
    "content"
    "footer ";
    font-size: 1.2rem;
  }
  
  header img {
    width: 100dvw;
    margin: auto;
    padding: 0;
  }
  
  header p {
    font-size: 1.6rem;
    text-align: left;
  }
  
  .centered {
    position: absolute;
    left: 30%;
    top: 6%;
    transform: translate(-10%, -10%);
  }
  
  header p span {
    font-size: 1rem;
  }
  
  nav ul {
    list-style-type: none;
    display: inline-block;
    margin: 1em auto auto auto;
    padding: 0;
  }
  
  nav li {
    display: inline-block;
    text-align: center;
    margin: 0.3em 2dvw 0 10dvw;
  }
  
  nav li a {
    width: 82dvw;
    display: inline-block;
  }
    
  article {
    max-width: calc(100dvw - 65px);
    padding: 2em;
    margin: 1em 2dvw 2em 10dvw;
  }

  .articleimg {
    width: 133px;
    height: 200px;
    margin-left: -90px;
  }

  .aboutimg {
    width: 100px;
    height: 120px;
  }

}