@import "./fonts.css";
@import "./typography.css";
@import "./utils.css";
@import "./header.css";


:root {
  --site-bg: white;
  --site-text-color: black;
  --highlight: rgb(195, 236, 195);
  --cta-bg-color: black;
  --cta-bg-hover-color: white;
  --cta-text-hover-color: black;
  --cta-border-hover-color: black;
  --hover-shadow: black;
  --paragraph-link-color: black;
  --cta-color: white;
  --nav-font-size: 14px;
  --paragraph-size: 18px;
  --default-font: "HelveticaNeue-Med", Arial, Helvetica, sans-serif;
  --default-font-bold: "HelveticaNeue-Bold", Arial, Helvetica, sans-serif;
  --special-font: "Vollkorn", "Times New Roman", Times, serif;
  --special-font-bold: "VollkornBold", "Times New Roman", Times, serif;
  --svg-icon-fill: black;
  --transition: all 0.18s ease-in-out;
}
body {
  font-family: var(--special-font);
  color: var(--site-text-color);;
  background-color: var(--site-bg);
}

main {
  max-width: 1030px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-inline: auto;
}

a {
  text-decoration: none;
  display: inline-block;
  font-family: var(--default-font);
  color: var(--site-text-color);
  position: relative;
  cursor: pointer;
  &:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }
}

a:not(.cta, .link) {
  &:before {
    opacity: 1;
    content: "";
    position: absolute;
    background-color: var(--highlight);
    width: 100%;
    left: -6px;
    top: -6px;
    height: 100%;
    z-index: -1;
    padding: 6px;
    transition: var(--transition);
    border-radius: 6px;
  }
  &:hover {
    &:before {
      opacity: 1;
      transition: var(--transition);
    }
  }
}


.link {
  font-size: var(--nav-font-size);
  font-family: var(--default-font-bold);
  display: inline;
}

.avatar {
  width: 110px;
  height: 110px;
  /* float: right; */
}


.ctas {
  margin-top: 80px;
  margin-bottom: 60px;
  gap: 30px;
  display: flex;
  flex-direction: row;
}

.cta {
  font-family: var(--default-font);
  font-size: 16px;
  background-color: var(--cta-bg-color);
  color: var(--cta-color);
  padding: 10px;
  font-weight: 600;
  transition: var(--transition);
  border: 1px solid var(--cta-border-hover-color)
}

.cta:hover {
  background-color: var(--cta-bg-hover-color);
  color: var(--cta-text-hover-color);
  opacity: 1;
  transition: var(--transition);
  box-shadow: -5px 6px 0px 0px var(--hover-shadow);
  text-decoration: none;
}

@media (min-width: 780px) {
  :root {
    --paragraph-size: 24px;
  }
  main {
    margin-top: 200px;
    display: grid;
    gap: 42px;
    grid-template-columns: 244px 1fr;
  }

  .avatar {
    width: 224px;
    height: 224px;
    float: none;
  }

 
}



/* Theme Mode */
body.evening {
  --site-bg: rgb(19, 19, 19);
  --site-text-color: white;
  --highlight: #42ad71;
  --cta-bg-color: white;
  --cta-color: black;
  --cta-border-hover-color: white;
  --paragraph-link-color: black;
  --svg-icon-fill: white;
  --hover-shadow: white;
  --cta-bg-hover-color: black;
  --cta-text-hover-color: white;
}