/*
============================================================== 
IMPORTS 
==============================================================
*/
@import url("https://fonts.googleapis.com/css2?family=Days+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&display=swap');
/*
============================================================== 
RESET 
==============================================================
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*
============================================================== 
VARIABLES 
==============================================================
*/
:root {
  --color-white: #f7f8fd;
  --color-dark-blue: #000e40;
  --color-almost-black-blue: #010a2d;
  --color-navy-blue: #0024a1;
  --color-light-blue: #2E50FA;
  --color-light-gray: #f7f8fd5d;
  --color-gray: #303C69;
  --color-yellow: #fdca30;

  --default-transition-time: 250ms;

  --text-size-minus-4: clamp(0.3127rem, 0.6366rem + -0.4179vw, 0.5425rem);
  --text-size-minus-3: clamp(0.4421rem, 0.7365rem + -0.3798vw, 0.651rem);
  --text-size-minus-2: clamp(0.63rem, calc(0.83rem + -0.22vw), 0.78rem);
  --text-size-minus-1: clamp(0.88rem, calc(0.95rem + -0.08vw), 0.94rem);
  --text-size-0: clamp(1.13rem, calc(1.09rem + 0.18vw), 1.25rem);
  --text-size-1: clamp(1.35rem, calc(1.23rem + 0.6vw), 1.77rem);
  --text-size-2: clamp(1.62rem, calc(1.37rem + 1.26vw), 2.5rem);
  --text-size-3: clamp(1.94rem, calc(1.49rem + 2.27vw), 3.53rem);
  --text-size-4: clamp(2.33rem, calc(1.57rem + 3.81vw), 5rem);
  --text-size-5: clamp(2.8rem, calc(1.58rem + 6.09vw), 7.07rem);

  --space-4xs: clamp(0.125rem, 0.0994rem + 0.1136vw, 0.1875rem);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  --space-4xl: clamp(9rem, 8.5909rem + 1.8182vw, 10rem);
  --space-5xl: clamp(11.25rem, 10.7386rem + 2.2727vw, 12.5rem);
  --space-6xl: clamp(13.5rem, 12.8864rem + 2.7273vw, 15rem);

  --border-radius: 6px;
}

/* 
==============================================================
DEFAULT FORMATTING 
==============================================================
*/
body {
  min-height: 100vh;
  /* display: flex; */
  /* flex-direction: column; */
  font-family: "Roboto", sans-serif;
  color: var(--color-white);
  font-size: var(--text-size-0);
  background-color: var(--color-dark-blue);
  line-height: 1.4;
}

h1,
h2,
h3,
h5,
h6 {
  font-family: "Days One", sans-serif;
  font-weight: 200;
  letter-spacing: 0.8px;
  line-height: 1.1;
}

h1{
  font-size: var(--text-size-4);
}

h2{
  font-size: var(--text-size-3);
}

h3{
  font-size: var(--text-size-2);
}

h4{
  font-size: var(--text-size-0);
  font-family: "Intel One Mono", monospace;
}

strong{
  color: var(--color-yellow);
  font-style: normal;
}

small{
  font-style: italic;
  font-size: var(--text-size-0);
  color: var(--color-light-gray);
}

a {
  text-decoration: none;
  color: var(--color-white);
  transition: all var(--default-transition-time);
}

a:hover{
  transition: all var(--default-transition-time);
  color: var(--color-gray);
}

img,
video{
  max-width: 100%;
  display: block;
  border-radius: var(--border-radius);
}

section{
  margin-bottom: var(--space-l);
}

.default-wrapper{
  width: min(100% - 3rem, 100ch);
  margin-inline: auto;
}

.spacing-small{
  margin-bottom: var(--space-s)
}

.spacing-medium{
  margin-bottom: var(--space-m)
}

.spacing-large{
  margin-bottom: var(--space-xl)
}

section{
  margin-bottom: var(--space-2xl);
}

.top-section{
  background-image: linear-gradient(var(--color-navy-blue) -50%, var(--color-dark-blue) );
}

.bottom-section{
  padding-bottom: var(--space-5xl);
  background-image: linear-gradient(var(--color-dark-blue), var(--color-navy-blue) 160%);
  margin-bottom: 0;
}

.secondary-links {
  color: #565d81;
  transition: all var(--default-transition-time);
}

.secondary-links:hover {
  color: var(--color-navy-blue);
  transition: all var(--default-transition-time);
}


/*
============================================================== 
HEADER 
==============================================================
*/
header{
  height: fit-content;
  padding: var(--space-2xs);
  display: flex;
  align-items: center;
  background-color: var(--color-dark-blue);
  width: 100%;
}

.header-flex{
  display: flex;
  align-items: center; 
}

.logo {
  display:inline;
  height: var(--text-size-3);
}

.navigation-links {
  display: inline;
  white-space: nowrap;
  list-style: none;
}

.navigation-link {
  display: inline-block;
}

.nav-link-content {
  text-decoration: none;
  transition: all var(--default-transition-time);
  padding: var(--space-xs);
}

.nav-link-content:hover {
  color: #565d81;
  transition: all var(--default-transition-time);
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resume-button {
  background-color: var(--color-navy-blue);
  border-radius: 6px;
  padding: 11px 32px;
  transition: all var(--default-transition-time);
}

.resume-button:hover {
  background-color: var(--color-light-blue);
  color: var(--color-white);
  transition: all var(--default-transition-time);
}

/* 
==============================================================
HERO SECTION
==============================================================
*/

h2 {
  font-size: var(--text-size-3);
  margin-bottom: var(--space-s);
  text-wrap: balance;
}

.hero-section {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  height: fit-content;
}

.hero-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  column-gap: var(--space-s);
  padding: var(--space-4xl) 0px;
}

.hero-headshot {
  height: 300px;
  width: auto;
}

.hero-skill-unit {
  font-size: var(--text-size-0);
  display: inline-block;
  white-space: nowrap;
  background-color: var(--color-navy-blue);
  border-radius: var(--border-radius);
  border-width: 2px;
  border-color: var(--color-gray);
  padding: var(--text-size-minus-2) var(--text-size-minus-1);
  margin: var(--space-3xs) var(--space-4xs);
}

/* 
==============================================================
CALL TO ACTION SECTION
==============================================================
*/

.call-to-action-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.call-to-action-pic {
  object-fit: cover;
}

.call-to-action-button {
  font-size: var(--text-size-1);
  padding: 12px 30px;
  background-color: var(--color-navy-blue);
  margin-inline: auto;
  border-radius: 10px;
  transition: all var(--default-transition-time);
}

.call-to-action-button:hover {
  color: var(--color-white);
  background-color: var(--color-light-blue);
  padding: 18px 40px;
  transition: all var(--default-transition-time);
}

/* 
==============================================================
FOOTER
==============================================================
*/

footer {
  background-color: var(--color-dark-blue);
  bottom: 0;
}

.footer-flex-container {
  padding-top: 90px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
}

.page-list,
.website-list,
.socials-list {
  list-style-type: none;
}

.socials-list li {
  display: inline-block;
  padding: 10px;
}

.website-list li,
.page-list li {
  margin-bottom: 20px;
}

.footer-link {
  transition: all var(--default-transition-time);
}

.footer-link:hover {
  color: var(--color-gray);
  transition: all var(--default-transition-time);
}

.social-link:hover {
  filter: invert(37%) sepia(43%) saturate(359%) hue-rotate(192deg)
    brightness(87%) contrast(87%);
  transition: all var(--default-transition-time);
}

.footer-copyright {
  color: var(--color-gray);
  text-align: center;
  padding-bottom: 40px;
}

.no-break {
  white-space: nowrap;
}

/* 
==============================================================
PORTFOLIO PIECE SECTION
==============================================================
*/

.piece-info-section{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  column-gap: var(--space-s);
  padding-top: var(--space-2xl);
}

.piece-info-list{
    list-style: none;
}

.piece-code-block{
    font-size: var(--text-size-minus-1);
    border-radius: var(--border-radius);
    max-width: 100%;
    font-size: 14px;
}

.piece-code-block pre{
  font-size: var(--text-size-minus-2);
  font-family: "Intel One Mono", monospace;  
}

.piece-code-details{
  background: #232629;
  padding: var(--space-xs);
  border-radius: var(--border-radius);
  overflow: auto;
}
/* 
==============================================================
MEDIA QUERIES
==============================================================
*/

@media screen and (max-width: 624px) {
  /* -------HEADER------- */
  .navigation-link {
    margin-inline: auto;
    display: inline;
    margin-inline: 0;
  }

  .navigation-links {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  /* -------PIECE------- */
  .piece-code-block{
    font-size: var(--text-size-minus-2);
  }

  /* -------FOOTER------- */
  .footer-flex-container {
    flex-direction: column;
    gap: 30px;
  }

  .footer-logo{
    display: none;
  }
}

@media screen and (max-width: 425px) {
  /* -------HEADER------- */
  .navigation-links {
    font-size: var(--text-size-minus-1);
  }
}