/* Poppins Loading */
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLufntAKPY.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucHtA.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19VGdeOcEg.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19VF9eO.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VGdeOcEg.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* CSS RESET */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html {
  scroll-behavior: smooth;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* CSS Starts Here */
:root {
  --col-royal: #2980b9;
  --col-navy: #2b2b31;
  --col-red: #ff4242;
  --col-yellow: #ffbe53;
  --col-white: #f8f0e5;

  --rgb-royal: 41, 128, 185;
  --rgb-navy: 43, 43, 49;
  --rgb-red: 255, 66, 66;
  --rgb-yellow: 255, 190, 83;
  --rgb-white: 248, 240, 229;

  --text-sm: 0.875rem;
  --text-base: 1.125rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2x: 2.75rem;
  --text-3x: 4rem;

  --weight-light: 300;
  --weight-reg: 400;
  --weight-semi: 600;
  --weight-bold: 700;

  --size-1: 1rem;
  --size-2: 2rem;
  --size-3: 3rem;
  --size-4: 4rem;
  --size-5: 5rem;

  /* Hero Padding */
  --hero-pad: 5rem;
  --hero-link-pad: 2rem;
}

body * {
  font-family: "Poppins", sans-serif;
  font-size: var(--text-base);
  line-height: normal;
}

body {
  color: var(--col-navy);
  background-color: var(--col-white);
}

/* Utility Classes */
.text-sm {
  font-size: var(--text-sm);
  line-height: normal;
}
.text-base {
  font-size: var(--text-base);
  line-height: normal;
}
.text-md {
  font-size: var(--text-md);
  line-height: normal;
}
.text-lg {
  font-size: var(--text-lg);
  line-height: normal;
}
.text-xl {
  font-size: var(--text-xl);
  line-height: normal;
}
.text-2x {
  font-size: var(--text-2x);
  line-height: normal;
}
.text-3x {
  font-size: var(--text-3x);
  line-height: 3.5rem;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}

.weight-light {
  font-weight: var(--weight-light);
}
.weight-reg {
  font-weight: var(--weight-reg);
}
.weight-semi {
  font-weight: var(--weight-semi);
}
.weight-bold {
  font-weight: var(--weight-bold);
}

.text-navy {
  color: var(--col-navy);
}
.text-royal {
  color: var(--col-royal);
}
.text-red {
  color: var(--col-red);
}
.text-yellow {
  color: var(--col-yellow);
}
.text-white {
  color: var(--col-white);
}
.bg-navy {
  background-color: var(--col-navy);
}
.bg-royal {
  background-color: var(--col-royal);
}
.bg-red {
  background-color: var(--col-red);
}
.bg-yellow {
  background-color: var(--col-yellow);
}
.bg-white {
  background-color: var(--col-white);
}

/* Margin Utility */
.m-1 {
  margin: var(--size-1);
}
.m-2 {
  margin: var(--size-2);
}
.m-3 {
  margin: var(--size-3);
}
.m-4 {
  margin: var(--size-4);
}
.m-5 {
  margin: var(--size-5);
}
.mb-1 {
  margin-bottom: var(--size-1);
}
.mb-2 {
  margin-bottom: var(--size-2);
}
.mb-3 {
  margin-bottom: var(--size-3);
}
.mb-4 {
  margin-bottom: var(--size-4);
}
.mb-5 {
  margin-bottom: var(--size-5);
}
.mt-1 {
  margin-top: var(--size-1);
}
.mt-2 {
  margin-top: var(--size-2);
}
.mt-3 {
  margin-top: var(--size-3);
}
.mt-4 {
  margin-top: var(--size-4);
}
.mt-5 {
  margin-top: var(--size-5);
}
.ml-1 {
  margin-left: var(--size-1);
}
.ml-2 {
  margin-left: var(--size-2);
}
.ml-3 {
  margin-left: var(--size-3);
}
.ml-4 {
  margin-left: var(--size-4);
}
.ml-5 {
  margin-left: var(--size-5);
}
.mr-1 {
  margin-right: var(--size-1);
}
.mr-2 {
  margin-right: var(--size-2);
}
.mr-3 {
  margin-right: var(--size-3);
}
.mr-4 {
  margin-right: var(--size-4);
}
.mr-5 {
  margin-right: var(--size-5);
}

/* Padding Utility */
.p-1 {
  padding: var(--size-1);
}
.p-2 {
  padding: var(--size-2);
}
.p-3 {
  padding: var(--size-3);
}
.p-4 {
  padding: var(--size-4);
}
.p-5 {
  padding: var(--size-5);
}
.pb-1 {
  padding-bottom: var(--size-1);
}
.pb-2 {
  padding-bottom: var(--size-2);
}
.pb-3 {
  padding-bottom: var(--size-3);
}
.pb-4 {
  padding-bottom: var(--size-4);
}
.pb-5 {
  padding-bottom: var(--size-5);
}
.pt-1 {
  padding-top: var(--size-1);
}
.pt-2 {
  padding-top: var(--size-2);
}
.pt-3 {
  padding-top: var(--size-3);
}
.pt-4 {
  padding-top: var(--size-4);
}
.pt-5 {
  padding-top: var(--size-5);
}
.pl-1 {
  padding-left: var(--size-1);
}
.pl-2 {
  padding-left: var(--size-2);
}
.pl-3 {
  padding-left: var(--size-3);
}
.pl-4 {
  padding-left: var(--size-4);
}
.pl-5 {
  padding-left: var(--size-5);
}
.pr-1 {
  padding-right: var(--size-1);
}
.pr-2 {
  padding-right: var(--size-2);
}
.pr-3 {
  padding-right: var(--size-3);
}
.pr-4 {
  padding-right: var(--size-4);
}
.pr-5 {
  padding-right: var(--size-5);
}

/* Custom CSS */

*[visually-hidden="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  height: 200vh;
}
li > a,
li > a:hover,
button > a,
button > a:hover,
.btn > a,
.btn > a:hover {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

/* Inputs */
button,
.btn,
input[type="submit"] {
  padding: 0.75rem 1.5rem;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  font-size: var(--text-base);
  transition: 300ms;
}

input[type="submit"][value="Send"] {
  float: right;
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
  transform: translate(0.25rem, 0.25rem);
  box-shadow: none;
}

button:active,
.btn:active,
input[type="submit"]:active {
  filter: brightness(85%);
  transform: translate(0.25rem, 0.25rem);
  box-shadow: none;
}

button:active,
.btn:active,
input[type="submit"]:active {
  filter: brightness(85%);
  transform: translate(0.25rem, 0.25rem);
  box-shadow: none;
}

.btn--primary {
  color: var(--col-navy);
  background-color: var(--col-yellow);
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-navy);
}
.btn--alternative {
  color: var(--col-navy);
  background-color: var(--col-white);
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-yellow);
}

.btn--secondary {
  color: var(--col-navy);
  background-color: var(--col-white);
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-red);
}

.btn--tertiary {
  color: var(--col-white);
  background-color: var(--col-navy);
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-yellow);
}

form.contact {
  max-width: 700px;
}

input[type="text"],
input[type="email"],
input[type="password"],
label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--col-white);
  border: 1px solid var(--col-navy);
  border-radius: none;
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-yellow);
  transition: 300ms;
}
input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
  transform: translate(0.25rem, 0.25rem);
  box-shadow: none;
  outline: none;
}

input[type="text"][dark="true"],
input[type="email"][dark="true"],
input[type="password"][dark="true"],
textarea[dark="true"] {
  color: var(--col-white);
  background-color: var(--col-navy);
  border: 1px solid var(--col-white);
  box-shadow: 0.25rem 0.25rem 0 0 var(--col-yellow);
}

textarea {
  resize: none;
}

/* Content Containers */
.container-block--white {
  padding: 2rem;
  color: var(--col-navy);
  background: var(--col-white);
  border: 1px solid var(--col-navy);
  box-shadow: 0.5rem 0.5rem 0 0 var(--col-yellow);
}

.container-block--navy {
  padding: 2rem;
  color: var(--col-white);
  background: var(--col-navy);
  border: 1px solid var(--col-white);
  box-shadow: 0.5rem 0.5rem 0 0 var(--col-yellow);
}
.simple-link,
.simple-link:visited {
  text-decoration: none;
  color: inherit;
}
.simple-link:hover {
  color: var(--col-royal);
}
/* Hero Nav Bar */
.hero__container {
  position: relative;
  height: 100vh;
}
.hero__container::after {
  content: "";
  position: absolute;
  top: var(--hero-pad);
  left: var(--hero-pad);
  right: var(--hero-pad);
  bottom: var(--hero-pad);
  border: 5px solid var(--col-white);
  font-weight: bold;
  z-index: 0;
}
.hero__container * {
  z-index: 1;
}
.hero__container h2 {
  position: absolute;
  top: var(--hero-pad);
  right: var(--hero-pad);
  outline: 2rem solid var(--col-navy);
}
.hero__nav {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: var(--hero-pad);
  left: var(--hero-pad);
}
.hero__container * {
  transition: 300ms;
}

.hero__nav h1 {
  outline: 2rem solid var(--col-navy);
  margin-right: var(--hero-pad);
}
.hero__nav > ul {
  display: flex;
  margin-bottom: -0.75rem;
}
.hero__nav li {
  padding: 0 var(--hero-link-pad);
  margin: 0 var(--hero-link-pad);
  transition: 300ms;
}
.hero__nav li:hover {
  transform: scale(1.1);
  transition: 300ms;
}

@media only screen and (max-width: 1420px) {
  :root {
    --text-sm: calc(0.875rem * 0.9);
    --text-base: calc(1.125rem * 0.9);
    --text-md: calc(1.25rem * 0.9);
    --text-lg: calc(1.5rem * 0.8);
    --text-xl: calc(2rem * 0.8);
    --text-2x: calc(2.75rem * 0.6);
    --text-3x: calc(4rem * 0.6);

    --hero-pad: 2rem;
  }
  .hero__nav {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .hero__nav h1 {
    margin-top: var(--hero-pad);
    margin-right: 0rem;
  }
  .hero__nav > ul {
    flex-direction: column-reverse;
    margin-left: -0.75rem;
    margin-bottom: 0rem;
  }

  .hero__nav li {
    padding: calc(var(--hero-link-pad) * 0.5) 0;
    margin: calc(var(--hero-link-pad) * 0.5) 0;
  }
  .hero__nav li a {
    writing-mode: vertical-lr;
    text-orientation: sideways;
    transform: rotate(180deg);
  }
}

/* Section Grid */
section {
  display: flex;
  justify-content: center;
}

section > div {
  margin: 12rem 2rem;
  width: 100vw;
  max-width: 1000px;
}

/* About Section */
.about__container {
  max-width: 700px;
}
.skills__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2rem;
  grid-auto-columns: auto;
}

/* Experience Section */
.experiences__container {
  display: grid;
  gap: 2rem;
}
.experience__list {
  list-style: square;
}
.experience__list li {
  margin-left: 1rem;
}

.experience__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.experience__tags li {
  font-size: var(--text-sm);
  padding: 0.25rem 0.5rem;
  background-color: rgba(var(--rgb-royal), 0.25);
  width: max-content;
}

/* Work Section */
.project-card {
  padding: 0;
  display: flex;
}
.project-card > img {
  max-width: 33%;
  aspect-ratio: 1;
  object-fit: cover;
}
.project-card > div {
  padding: 2rem;
}

@media only screen and (max-width: 700px) {
  /* Work Section */
  .project-card {
    flex-direction: column;
  }
  .project-card > img {
    max-width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  .project-card > div {
    padding: 2rem;
  }
}

/* Lighthouse Section */
.lighthouse__wrapper > div{
  background-color: #202124;
  color: var(--col-white);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2rem;
  grid-auto-columns: auto;
  width: 100%;
  max-width: 1000px;
  border-radius: 1rem;
  box-shadow: 0 0 44px 0 rgba(var(--rgb-navy), 0.25);
}

.lighthouse__wrapper > div > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.lighthouse__wrapper img {
  width: 100%;
  height: auto;
}


footer {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
}

footer > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2rem;
  grid-auto-columns: auto;
  width: 100%;
  max-width: 1000px;
}