/* Variables */

:root {
  --bg-color-main: #ffefca;
  --bg-color-main-end: #ffefca;
  --bg-color-footer: #65a161;
  --bg-color-header: #aa470a;
  --bg-color-header-hover: #481e04;
  --color-main: #aa470a;
  --color-aux:  #402e32;
  --color-footer: #ffffff;
  --color-header: #ffffff;
}

/* Boilerplate */

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

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

/*section + section {
  margin-top: 4rem;
}*/

a {
  text-decoration-thickness: 8;
}

a:link {
  color: var(--color-main);
}

a:visited {
  color: var(--color-aux);
}

a:focus {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-aux);
}

a:active {
  color: var(--color-aux);
}


@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital@1&display=swap');

body {
  background-color: var(--bg-color-main);
  color: var(--color-main);
  font-family: 'Lato', sans-serif;
  font-size: 13pt;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

main {
  background-color: #FFEFCA;
  opacity: 1;
  background-image:
    linear-gradient(135deg, #fff7e8 25%, transparent 25%),
    linear-gradient(225deg, #fff7e8 25%, transparent 25%),
    linear-gradient(45deg, #fff7e8 25%, transparent 25%),
    linear-gradient(315deg, #fff7e8 25%, #FFEFCA 25%);
  background-position:  6px 0, 6px 0, 0 0, 0 0;
  background-size: 12px 12px;
  background-repeat: repeat;

  flex: 1 0 auto;
}

p, h3 {
  padding-left: 1ch;
  padding-right: 1ch;
  animation: p-fade 1000ms ease-out 0s 1 normal backwards;
}

img {
  animation: img-fade 500ms ease-in 0s 1 normal forwards;
}

@keyframes p-fade {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes img-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

h1,
h2 {
  text-align: center;
}

h1 {
  font-family: "Playfair Display", serif;
  font-optical-siing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: 38pt;
}

/* Layout */

html, body {
   height: 100dvh;
}

header {
  position: sticky;
  z-index: 10;
  width: 100%;
  background-color: var(--bg-color-header);

  a:link {
    color: var(--color-header);
    font-weight: bold;
    text-decoration: none;
  }

  a:visited {
    color: var(--color-header);
  }

  a:hover {
    cursor: pointer;
  }

  a:active {
    text-decoration: none;
  }
}

nav {
  a {
    vertical-align: middle;
    display: inline-block;
    padding: 1ch;
  }
  
  a:hover {
      background-color: var(--bg-color-header-hover);
    }
  }
}


.title {
/*   background-color: var(--bg-color-main); */
}

.introduction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: justify;
  gap: 1rem;

  div {
    flex: 0.5 1 60ch;
    background-color: rgba(255,255,255,0.25);
  }
}

.about-me {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: justify;
  padding-bottom: 4cm;
  gap: 1rem;
  
  div {
    flex: 0.5 1 60ch;
    background-color: rgba(255,255,255,0.25);
  }

  .portrait {
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 600px;
  }
}

.second-row {
  flex-wrap: wrap-reverse;
}

footer {
  background-color: var(--bg-color-footer);
  color: var(--color-footer);
  
  p {
    display: inline-block;
  }
  
  .copyright {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
  }
  
  & > *:not(:first-child) {
    margin-top: 0;
  }
  
  flex-shrink: 0;
}

.contact {
  text-align: center;

  .click-here {
    width: fit-content;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg-color-header);
    border-radius: 5px;
    font-weight: bold;
    padding: 1rem;
    margin-top: 4rem;
    margin-bottom: 4rem;

    a {
      color: var(--color-header);
      text-decoration: none;
    }
    
    &:hover {
      background-color: var(--bg-color-header-hover);
    }
  }
  
  .info {
    margin: 0 20% 0 20%;
  }

  p {
    text-align: justify;
  }
}