@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-VariableFont_wght.ttf") format('truetype');
}

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/ArchivoBlack-Regular.ttf") format('truetype');
}

:root {

  /*COLORS*/
  --offwhite: #FAF9F2;
  --offwhite__dark: #edead6;
  --offblack: #1C1F31;
  --blue: #0478BC;
  --orange: #D67900;
  --red: #a5122c;
  --green: #5b7c30;
  --grey: #5b5e57;
  --lightgrey: #70746a;
  --gold: #FFBF0F;

  /*FONTS*/
  --font-family__heading: "Archivo Black", sans-serif;
  --font-family__body: "Lexend", sans-serif;

  --font-size__hero: clamp(1rem, 0.735rem + 0.882vw, 1.2rem);
  --font-size__h2: clamp(1.5rem, 1.059rem + 1.471vw, 2rem);

  --font-weight__bold: 700;

}

/* See 'style-toc.txt' for table of contents. */

/*** 01. FOUNDATION ***/

body {
  background-color: var(--offwhite);
  font-family: var(--font-family__body);
  overflow-x: hidden;
}

::selection {
  background-color: var(--blue);
  color: var(--offwhite);
}


/** 01.1 FONT STYLING **/

/*heading style*/
h1,
h2 {
  font-family: var(--font-family__heading);
  font-size: var(--font-size__h2);

  letter-spacing: -1px;
  text-transform: uppercase;

  z-index: 0;
}

/*color classes*/
.font-color--blue {
  color: var(--blue);
}

.font-color--green {
  color: var(--green);
}

.font-color--red {
  color: var(--red);
}

.font-color--orange {
  color: var(--orange);
}

.font-color--grey {
  color: var(--grey);
}

/*body styling*/
a {
  text-decoration: none;
}

strong {
  font-weight: var(--font-weight__bold);
}

/*style keyboard focus*/
a:focus-visible,
button:focus-visible {
  outline: solid 2px var(--offblack);
}

li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/*skills section list styling*/
.skills ul{
  @media (min-width:0) {
    columns: 2;
  }

  @media (min-width: 48rem) {
  columns: 3; }
  list-style: none;
}

.skills ul li {
  margin-bottom: 1rem;
}

/************/



/*** 02 LAYOUT ***/

.fixedwidthContainer {
  margin: 0 auto;
  padding: 0 2rem;
  max-width: 75rem;
}


/** 02.1 Header and Footer Layouts**/

.headerContainer,
.footerContainer {
  display: flex;
  flex-direction: row wrap;
  justify-content: space-between;
  align-items: center;
}

.footerContainer {
  @media (width < 22.5rem) {
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
  }
}

/* 02.1.1 [Footer] Social Icons */
footer .social-icons {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
}


/** 02.2 Section Layouts**/

/* 02.2.1 General Section */
section {
  display: flex;
  flex-flow: column wrap;
  gap: 3rem;
  padding: 8rem 0;
}

/* 02.2.2 Frog Section Layout */
section.frog-section {
  /* position: relative; */
  z-index: 0;
}

/* 02.2.3.1 About Layout */
section.about {
  flex-direction: row;
  justify-content: space-between;
  gap: 5rem;
  margin-top: 2rem;
  padding: 3rem 3rem 0;

  background-color: white;
  border-radius: 0.8rem;
  border: solid 2px var(--offwhite__dark);

  @media (width < 64rem) {
    flex-wrap: wrap-reverse;
  }

  @media (width >=64rem) {
    flex-wrap: nowrap;
  }
}

section.about>div {
  @media (min-width: 0) {
    width: 100%;
  }

  @media (min-width: 64rem) {
    width: 50%;
  }
}

/* 02.2.3 Contact Layout */
section.contact {
  flex-direction: row;
  justify-content: space-between;
  gap: 5rem;
  padding: 4rem 0 1rem;

  

  @media (width >=64rem) {
    flex-wrap: nowrap;
  }
}

section.contact>div {
  @media (min-width: 0) {
    width: 100%;
  }

  @media (min-width: 64rem) {
    width: 50%;
  }
}

/* 02.2.4 Skills Layout */
section.skills {
  padding-bottom: 4rem;
}



/** 02.3 Container Layouts **/

/* 02.3.1 Text Containers */
.textContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}

.frog-section .textContainer {
  gap: 1.5rem;
  z-index: 0;
}

/* 02.3.2.1 About Section Containers */

.about .contentContainer {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3.25rem;

  @media (width < 64rem) {
    align-items: left;
    margin-bottom: 0;
  }
}

.about .textContainer p{
  font-size: var(--font-size__hero);
}

.about .imgContainer {
  display: flex;

  @media (width < 64rem) {
    justify-content: center;
  }
}

.about .buttonContainer {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  width: min-content;
}

/* 02.3.2 Contact Section Containers */
.contact .contentContainer {
  display: flex;
  flex-flow: column wrap;
  gap: 3rem;

  @media (width < 64rem) {
    align-items: center;
  }
}

.contact .imgContainer {
  display: flex;

  @media (width < 64rem) {
    justify-content: center;
  }
}

.contact .buttonContainer {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  width: min-content;
}


.youtube-embed {
  aspect-ratio: 16 / 9;
  width: 1200px;
  height: 675px;
  max-width: 100%;
  max-height: calc((100vw - 40px) / (16/9));
}

/************/



/*** 03 HEADER ***/

/** 03.1 Positioning **/
header {
  position: sticky;
  top: 0;
  padding: 1.5rem 0;
  background-color: var(--offwhite);
  z-index: 100;
}

/** 03.2 Logo **/
header .logo{
  display: flex;
  align-items: center;
  gap: 1rem;
}

header .logo a {
  font-family: var(--font-family__heading);
  font-size: 2rem;
  color: var(--offblack);
  letter-spacing: -2px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

header .logo span {
  color: var(--grey);
}

/*remove list style*/
header ul,
header .menu-button,
header .navigation {
  list-style: none;
}

/** 03.3 Mobile Navigation **/

@media screen and (width <=48rem) {

  /* 03.3.1 Layout and Positioning */
  header {
    position: static;
  }

  header .navigation[data-visible="false"] {
    display: none;
  }

  header .navigation[data-visible="true"] ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: end;
    gap: 1rem;
  }

  /* 03.3.2 Menu Styling */
  header .mobile-nav {
    position: fixed;
    bottom: 54px;
    right: 2rem;
    padding: 0.75rem 1.5rem;

    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;

    background-color: var(--offblack);
    color: var(--offwhite);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    z-index: 100;
  }

  /* 03.3.3 Button Styling */
  header .menu-button {
    width: auto;
    cursor: pointer;

    background: none;
    border: none;
    color: var(--offwhite);
    font-weight: var(--font-weight__bold);
  }

}

/* 03.3.4 Responsiveness */

/*vertical menu at small screens*/
@media screen and (width <=32rem) {
  header .navigation[data-visible="true"] ul {
    display: block;
    text-align: right;
    line-height: 2em;
  }
}


@media screen and (width > 48rem) {
  header .logo a:hover {
    color: var(--green);
  }

  header .menu-button {
    display: none;
  }

  header .navigation ul {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}


@media screen and (min-width: 64rem) {
  header .navigation a {
    border-bottom: solid 2px transparent;
    transition: all 0.2s ease;
  }

  header .navigation a:hover {
    border-bottom: solid 2px var(--offblack);
    transition: all 0.2s ease;
  }
}

/************/



/*** 04 FOOTER ***/

footer {
  background: var(--offwhite__dark);
  color: var(--grey);
  font-size: 0.9rem;
}

.footerContainer {
  min-height: 54px;
}

.social-icons img {
  height: 1.32rem;
  width: auto;
  transition: all 0.2s ease;
}

/************/



/*** 05 SECTIONS ***/

/** 05.1 Hero Section **/

.frog-section a {
  color: var(--red);
  text-decoration: underline;
}

.frog-section p {
  font-size: var(--font-size__hero);
}


/****/

/** 05.2 Contact Section **/

.contact .textContainer p {
  max-width: 80ch;

  @media (width < 64rem) {
    text-align: center;
  }
}

.buttonContainer a {
  background: none;
  border: solid 2px transparent;
  font-weight: var(--font-weight__bold);
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}

/* 05.2.1 Button Styling */
.buttonContainer .contact-button,
.buttonContainer .resume-button {
  transition: all 0.2s ease;
}

.buttonContainer .contact-button {
  background: var(--green);
  color: var(--offwhite);
}

.buttonContainer .resume-button {
  border: solid 2px var(--grey);
  color: var(--grey);
}

/****/

/** 05.3 Portfolio Items **/
.portfolioBox p {
  margin-top: 0.4rem;
  color: var(--lightgrey);
  text-align: center;
  font-size: 0.9rem;

  @media (width < 30rem) {
    /* text-align: left; */
    /* display: none; */
    font-size: 0.7rem;
  }

  @media (width >= 64rem) {
    opacity: 0.7;
    transition: all 0.2s ease;
  }
}

/************/



/*** 98 RESPONSIVENESS ***/

/** 98.1 [Small Screens] **/

@media screen and (min-width: 0) {
  /*98.1.1 Hero Section*/
  .frog-section {
    min-height: 20rem;
    height: calc(95vh - 10rem);
    max-height: 700px;
    justify-content: end;
  }

  .frog {
    position: absolute;
    top: 20vh;
    margin-left: clamp(0.1rem, -9.091rem + 45.455vw, 20rem);
  }

  #meme {
    display: none;
  }

  /*98.1.2 Portfolio Items [Small Screen]*/
  
  .portfolioBox.border img {
    border: solid 1px lightgrey;
  }

  .view-more::before {
    content: 'View More \279C';
    position: absolute;
    top: 0;
    right: 0;
    padding-top: clamp(0.25rem, 0.25rem + 0.391vw, 0.5rem);
    padding-bottom: clamp(0.25rem, 0.25rem + 0.391vw, 0.5rem);
    padding-left: clamp(0.5rem, 0.5rem + 0.781vw, 1rem);
    padding-right: clamp(0.5rem, 0.5rem + 0.781vw, 1rem);
    font-size: clamp(0.8rem, 0.8rem + 0.312vw, 1rem);
    background-color: var(--gold);
    color: var(--offblack);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
  }
}

/*reduce frog opacity when text overlays*/
@media screen and (height <=35rem) and (width <= 48rem) {

  .frog img {
    opacity: 0.2;
  }
}

/** 98.2 Large Screens **/
@media screen and (min-width: 64rem) {

  /* 98.2.1 Header */
  header .navigation a {
    border-bottom: solid 2px transparent;
    transition: all 0.2s ease;
  }

  header .navigation a:hover {
    border-bottom: solid 2px var(--offblack);
    transition: all 0.2s ease;
  }


  /* 98.2.2 Hero Section */
  .frog-section {
    padding: 6.25rem 0;
  }

  #meme {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    transform: translateY(-345px);
  }


  /* 98.2.3 Portfolio Items [Large Screens] */
  .portfolioBox {
    transition: all 0.2s ease;
  }

  .portfolioBox:hover {
    transform: scale(102%);
  }

  .portfolioBox:hover p{
    opacity: 1;
  }
  
  .view-more:hover::before {
    background-color: var(--orange);
    color: var(--offwhite);
  }

  .view-more.logo::before {
    padding: 1rem 2rem;
  }


  /* 98.2.4 Contact Section */
  .buttonContainer:hover>* {
    opacity: 0.5;
    border: solid 2px var(--offblack);
    color: var(--offblack);
    background: transparent;
  }

  .buttonContainer:hover>*:hover {
    transform: scale(1.1);
    opacity: 1;
    background: var(--green);
    border: solid 2px var(--green);
    color: var(--offwhite);
  }

  /* 98.2.5 Footer*/
  .social-icons img:hover {
    transform: scale(1.2);
    transition: all 0.2s ease;
  }

}

/************/



/*** 99 MASONRY SETTINGS ***/


/** 99.1 Graphic Design Section **/

.graphic .portfolioBox {
  margin-bottom: clamp(1rem, 1rem + 1.563vw, 1.5rem);
}

.graphic .masonrySize,
.graphic .portfolioBox {
  @media (min-width:0) {
    width: 48%;
  }

  @media (min-width: 64rem) {
    width: 32%;
  }
}

.graphic .masonryGutter {
  @media (min-width:0) {
    width: 4%;
  }

  @media (min-width: 64rem) {
    width: 2%;
  }
}

/** 99.2 Brand Section, Web Sections **/

.brand .portfolioBox {
  margin-bottom: clamp(1rem, 1rem + 1.563vw, 2rem);
}

.brand .masonrySize,
.brand .portfolioBox {
  @media (min-width:0rem) {
    width: 48%;
  }
}

.brand .masonryGutter {
  @media (min-width:0rem) {
    width: 4%;
  }

}

/** 99.3 Web Section **/

.web .portfolioBox {
  margin-bottom: 2rem;
}

.web .masonrySize,
.web .portfolioBox {
  @media (min-width:0) {
    width: 100%;
  }

  @media (min-width:30rem) {
    width: 48%;
  }
}

.web .masonryGutter {
  @media (min-width:0) {
    width: 0;
  }

  @media (min-width:30rem) {
    width: 4%;
  }
}

/************/