/* LEFT OFF AT PART 2 2:09 */

/* This document contains boilerplate css tips/tricks
 * garnered from the youtuber, coder_coder's youtube series, "Building a
 * portfolio website with HTML & CSS 4 Part Series
 * https://www.youtube.com/@TheCoderCoder
 * */

/* :root */
/* custom css variables should be set in root so they do not have to redefined
 * each time and keeps a consistent look, reference using var(--variable-name) syntax*/

/* note the naming scheme is changed from generic color names to descriptions of
 * the elements they are applied to */

/* coder coder prefers hsl */
:root {
  --body-bg: #151515;
  --contact-bg: #242424;
  --accent: #4ee1a0;
  --text1: #ffffff;
  --text2: #d9d9d9;
  --invalid: #ff6f5b;

  /* font-sizes */
  /* note the use of --fs-pxl-size to indicate pixel size converted from rem */
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-72: 4.5rem;
  --fs-88: 5.5rem;
  --fs-48: 3rem;

  --container: 69.375rem;

  --transition: 250ms ease-in-out;
}

/* Padding doesn't add to the width or height of elements */
/* font-size is set to 100% so that fonts reference browser's font-styles */
html {
  box-sizing: border-box;
  font-size: 100%;
}

/* box-sizing is inherited from the html element */
*,
*::before,
**::after {
  box-sizing: inherit;
}

/* 0 out all margin all body to clear default margins */
body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--bg-body);
  color: var(--text1);
  font-size: var(--fs-18);
  line-height: 1.56;
  padding-bottom: 30rem;
}

/* removes default margins */
h1, h2, h3, p {
    margin-top: 0;
}

h1, h2, h3 {
    line-height: 1;
}

/* once again she uses fluid-topgraphy-calculator to calculate clamp of h1 font
 * size*/
/*
 * min font size 40px
 * max font size 88px
 * min viewport 375px
 * max viewport 1000px
 */
h1 {
    font-size: 2.5rem;
    font-size: clamp(2.5rem, 0.7rem + 7.68vw, 5.5rem);
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    h1 {
        margin-bottom: 60px;
    }
}

@media (min-width: 600px) {
    h1 {
        margin-bottom: 43px;
    }
}

p {
    /* coder coder's default line-height for p tags */
    /* line-height: 1.3; */
    line-height: 1.5;
    font-size: 1rem;
    font-size: clamp(1rem, 0.8rem + 0.9vw, 1.125rem);
    color: var(--text2);
    margin-bottom: 24px;
}

a {
  /* automatically adds an ease-in-out animation on color property whenever
     * there's a hover event change */
  transition: color var(--transition);
}

a.underline {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.625;
    letter-spacing: 2.29px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--text1);
    background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
    background-position: 0 2.1em;
    background-repeat: repeat-x;
    background-size: 8px 2px;
}

a:hover {
  color: var(--accent);
}

/* taken from https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/
 * see notes in coder_coder.html by the nav element */
.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wrapper {
  /* width is always contained by 16px */
  width: calc(100% - 2rem);
  max-width: var(--container);
  /* centers margin on a left-right orientation */
  margin-inline: auto;
}

/* she calculates the rough difference between tablet and mobile */
/* note that she uses ems instead of pixels for accessibility reasons
 * simply stating that the break points happen at times when you don't want them
 * to when using pixels*/
@media (min-width: 37.5em) {
  /* 600px */
  .wrapper {
    width: calc(100% -3.75rem);
  }
}

/* HEADER */
.header {
  margin-top: 20px;
}

.header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  /* gap: row-gap column-gap */
  /* note the use of px here, this is intentionally keeping the gap inbetween
     * the header__nav children at these fixed px amounts*/
  gap: 20px 25px;
}

/* uses fluid-typography-calculator: https://royalfig.github.io/fluid-typography-calculator/ */
/* she uses it to calculate a clamp function using dimensions retrieved from figma layout
 * min-font-size: 24px max-font-size: 32px min-viewport: 375px max-viewport: 768px */
.header__home {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.02rem + 2.04vw, 2rem);
  line-height: 1;
  color: var(--text1);
  text-decoration: none;
  /* tells flex box to place items on its own row as it takes up 100% width ,
   * this is utilized with the parent elem(header__nav) flex-wrap*/
  /* flex: flex-grow flex-shrink flex-basis*/
  flex: 1 0 100%;
}

/* .header__social, */
.header__social svg {
  /* she got stuck here for a while... */
  /* display: inline-block; */
  display: block;
  /* outline: 2px solid red; */
}

.header__social > svg > path {
  /* automatically adds an ease-in-out animation on fill property whenver there's
     * a hover event change */
  transition: fill var(--transition);
}

.header__social:hover > svg > path {
  fill: var(--accent);
}

@media (min-width: 37.5em) {
  /* 600px */
  .header__nav {
    justify-content: flex-start;
    align-items: center; /* vertically centered */
    text-align: left;
    gap: 32px;
  }

  .header__home {
    /* flex: 1 0 0%; */
    flex: 1;
    margin-inline-end: auto;
  }
}

/* HERO */
.hero {}

.hero__wrapper {
    padding-bottom: 80px;
    border-bottom: 1px solid var(--text2);
}

.hero__image {
    position: absolute;
    top: 0;
    /* how to center position:absolute elems */
    left: 50%;
    translate: -50%;
    display: block;
}

.hero__rings {
    position: absolute;
    right: 50%;
    top: 130px;
    z-index: -1;
}

.hero__circle {
    position: absolute;
    top: 254px;
    right: 0;
    translate: 50%;
}

.hero__text {
    position: relative;
    /* calculated by the header height - the image height + space below towards
     * main content*/
    /* she realizes not to use top, but instead margin-top, because top doesn't
     * effect the entire flow of the page, while margin-top does */
    margin-top: 335px;
    text-align: center;
}

/* she grabs an interesting css tricks here, using a linear gradeint to create an
 * underline and using background-position to position it where she desires*/
h1 > span {
    background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
    background-position: 0 1.18em;
    background-repeat: repeat-x;
    background-size: 8px 4px;
}
/* .hero__description {} */

/* .hero__contact {} */