/*-------------------------------*/
/* CUSTOM PROPERTIES (Variables) */
/*-------------------------------*/
:root {
  /* Colors */
  --primary-bg-color: #001114;
  --primary-text-color: #e0e0e0;
  --muted-text-color: #b3b3b3;
  --dark-text-color: #001114;
  --creativity-color: #29badb;
  --tech-color: #efa243;
  --neutral-color: #8cae8f;
  --link-hover: #e0e0e0a4;

  --linear-gradient-tech: linear-gradient(
      -80deg,
      rgba(0, 0, 0, 0),
      rgb(239, 162, 67, 0.5)
    ),
    linear-gradient(rgb(0, 0, 0, 1), rgba(0, 0, 0, 0.6));
  --linear-gradient-creativity: linear-gradient(
      -80deg,
      rgba(0, 0, 0, 0.2),
      rgb(41, 186, 219, 0.5)
    ),
    linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6));
  --linear-gradient-neutral: linear-gradient(
      -80deg,
      rgba(0, 0, 0, 0.2),
      rgb(140, 174, 143, 0.5)
    ),
    linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6));

  /* Fonts*/
  --main-font: "Montserrat", sans-serif;

  --main-font-size: clamp(1rem, 3vw, 1.125rem);
  --small-font-size: clamp(0.75rem, 3vw, 1rem);

  --title-fs: clamp(2rem, 3vw + 1rem, 3.25rem);
  --subtitle-fs: clamp(1.25rem, 3vw + 1rem, 1.75rem);
  --section-title-fs: clamp(1.15rem, 3vw + 1rem, 1.5rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

/*------ */
/* RESET */
/*------ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

/*--------*/
/* GLOBAL */
/*--------*/

body {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  font-family: var(--main-font);
  font-size: 100%;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  margin: 0 auto;
  overflow-x: hidden;
}

p,
ul,
li {
  font-size: var(--main-font-size);
  font-weight: var(--fw-light);
}

p {
  margin-bottom: 1.5rem;
}

h1 {
  font-size: var(--title-fs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

h2 {
  font-size: var(--subtitle-fs);
  font-weight: var(--fw-light);
  line-height: 1.25;
}

h3 {
  font-size: var(--section-title-fs);
  font-weight: var(--fw-bold);
  padding-bottom: 0.5em;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

code {
  font-family: "Courier New", Courier, monospace;
  color: var(--dark-text-color);
  background-color: #f1f1f1;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 105%;
}

em {
  font-weight: var(--fw-bold);
}

ol {
  list-style-position: inside;
}

ol ::marker {
  content: "Step " counter(list-item) ") ";
  font-weight: var(--fw-medium);
  margin-right: 0.5em;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin: 2em 0 2em 0;
}

.copyright {
  font-size: 0.5rem;
}

.privacypolicy {
  font-size: 0.75rem;
  margin: 1em 0;
  color: var(--muted-text-color);
  text-decoration: underline;
}

.privacypolicy:hover {
  color: var(--primary-text-color);
}

.privacypolicy-container-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pp-title {
  text-align: center;
  position: relative;
  margin-bottom: 1em;
  margin-top: clamp(0em, 3vw - 1em, 1em);
  font-weight: var(--fw-medium);
  hyphens: manual;
}

.title {
  text-align: center;
  position: relative;
  margin-bottom: 1em;
  margin-top: clamp(0em, 3vw - 1em, 1em);
  font-weight: var(--fw-medium);
  overflow-wrap: break-word;
  hyphens: auto;
}

.project-title {
  text-align: left;
  margin-top: 1em;
  font-weight: var(--fw-regular);
  font-size: var(--title-fs);
}

.blog-title {
  text-align: left;
  font-weight: var(--fw-regular);
  font-size: var(--subtitle-fs);
}

.sub-title {
  text-align: left;
  font-weight: var(--fw-regular);
  font-size: var(--subtitle-fs);
  color: var(--primary-color);
  margin-bottom: 1em;
}

/*-------------*/
/* BACKGROUNDS */
/*-------------*/

.bg {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.home-bg {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.5),
      rgb(0, 17, 20, 0)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.5),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/Lac-Retaud.jpg) no-repeat center center/Cover;
}

.main-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 1)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/Lac-Retaud.jpg) no-repeat center center/cover;
}

.about-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 1)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/about-bg.jpeg) no-repeat center center/cover;
}

.web-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 1)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/webprojects-bg.jpg) no-repeat center center/cover;
}

.project-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 1)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/projects-bg.jpeg) no-repeat center center/cover;
}

.contact-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/Lac-Retaud.jpg) no-repeat center center/Cover;
}

.blog-bg {
  background: linear-gradient(
      to bottom,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    linear-gradient(
      to top,
      rgb(0, 17, 20, 1),
      rgb(0, 17, 20, 0.7),
      rgb(0, 17, 20, 0)
    ),
    url(./images/bg/blog-bg.jpg) no-repeat center center/cover;
  border: transparent;
}

/*-----------------*/
/* UTILITY CLASSES */
/*-----------------*/

strong {
  font-weight: var(--fw-bold);
}

.bold {
  font-weight: var(--fw-bold);
}

.italic {
  font-style: italic;
}

/* layout */
.main-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.container {
  width: min(1800px, 100% - 2em * 2);
  margin-inline: auto;
  margin-top: 3em;
  margin-bottom: 3em;
}

.flex {
  display: flex;
}

.col {
  flex: 1;
}

.page-links {
  display: flex;
  justify-content: space-between;
}

.page-links a {
  font-size: var(--small-font-size);
  color: var(--muted-text-color);
}

.page-links a:hover {
  color: var(--primary-text-color);
}

/* colors */
.creativity {
  color: var(--creativity-color);
}

.tech {
  color: var(--tech-color);
}

.neutral {
  color: var(--neutral-color);
}

.muted-text {
  color: var(--link-hover);
}

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

.img-shadow {
  box-shadow: 10px 20px 15px rgb(0, 0, 0, 0.5);
}

/* margin */
.mb-2 {
  margin-bottom: 2em;
}

.mb-4 {
  margin-bottom: 4em;
}

.mt-1 {
  margin-top: 1em;
}

.mt-2 {
  margin-top: 2em;
}

.mt-4 {
  margin-top: 4em;
}

/* Page Transitions */
.fadeIn {
  animation: fadeIn 0.7s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100;
  }
}

/*---------*/
/* Buttons */
/*---------*/

#scrollToTopButton {
  position: fixed;
  right: 2em;
  bottom: 3em;
  background-color: rgb(224, 224, 224, 1);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0.5em;
}

#scrollToTopButton:active {
  background-color: rgb(224, 224, 224, 0.3);
}

.btn {
  padding: 0.75em 1.75em;
  font-size: 0.875rem;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 0.8em;
  font-weight: var(--fw-medium);
}

.contact-btn {
  color: var(--primary-text-color);
  background-color: rgb(0, 17, 20, 0.5);
  border: 1px solid var(--primary-text-color);
  font-weight: var(--fw-medium);
}

.contact-btn:hover,
.contact-btn:active {
  color: var(--dark-text-color);
  background-color: rgb(224, 224, 224, 0.8);
  transition: all 0.3s ease-out;
}

.photo-btn {
  border: 1px solid var(--creativity-color);
  background-color: rgb(0, 17, 20, 0.7);
  color: rgba(41, 186, 219, 1);
}

.photo-btn:hover,
.photo-btn:active {
  color: var(--dark-text-color);
  background-color: rgba(41, 186, 219, 0.7);
  transition: all 0.3s ease-out;
}

.tech-btn {
  border: 1px solid var(--tech-color);
  background-color: rgb(0, 17, 20, 0.7);
  color: rgb(239, 162, 67, 1);
}

.tech-btn:hover,
.tech-btn:active {
  color: var(--dark-text-color);
  background-color: rgb(239, 162, 67, 1);
  transition: all 0.3s ease-out;
}

.btn-icon {
  display: inline;
}

.lang-button {
  width: 1.2rem;
  background: transparent;
  color: var(--primary-text-color);
  border: none;
  cursor: pointer;
}

.flag {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.language-btn-wrapper {
  display: flex;
  gap: 1em;
}

.language-btn-wrapper-mobile {
  display: flex;
  gap: 1em;
  cursor: pointer;
}

/*------------*/
/* Navigation */
/*------------*/

.logo-image {
  max-width: 85%;
}

.social-nav a {
  color: var(--link-hover);
}

.social-nav a:hover {
  color: var(--primary-text-color);
}

.footer-container ul {
  display: flex;
  gap: 3em;
}

.main-nav {
  overflow: hidden;
}

/* Desktop Naivagion */
.desktop-nav {
  display: none;
}

/* Mobile/Tablet Navigation */

.hamburger-nav-wrapper {
  margin-bottom: 3em;
  background-color: var(--primary-bg-color);
  display: flex;
  justify-content: flex-start;
}

.hamburger-logo {
  max-width: 90%;
  z-index: 999;
}

.mobile-nav-toggle {
  display: flex;
  position: absolute;
  z-index: 1000;
  background: url(../images/header/bars.svg) no-repeat;
  border: none;
  width: 1.5rem;
  aspect-ratio: 1;
  top: 2em;
  right: 2em;
  cursor: pointer;
}

.mobile-nav-toggle[aria-expanded="true"] {
  background-image: url(../images/header/closed-bars.svg);
}

.hamburger-links {
  position: fixed;
  z-index: 999;
  inset: 0;
  width: 100vw;
  height: 100vh;
  list-style: none;
  overflow: visible;
  padding: 6em 2em 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(0, 15, 18, 0.9);
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
  transform: translateX(100%);
  transition: transform 350ms ease-out;
}

.hamburger-links li {
  padding-block: 0.6em;
  font-size: 1.4rem;
}

.hamburger-links[data-visible="true"] {
  transform: translateX(0%);
}

.hamburger-links li a.current {
  position: relative;
}

.hamburger-links li a.current::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid white;
  bottom: -6px;
}

.screen-reader-only:not(:focus):not(:active) {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

/*------*/
/* Home */
/*------*/

.home-intro {
  text-align: center;
  padding-top: clamp(1em, 3vw + 1rem, 4em);
  padding-bottom: clamp(1em, 3vw + 1rem, 4em);
}

.home-title {
  font-size: clamp(1.5rem, 3vw + 1rem, 3.25rem);
  margin-bottom: 1.125rem;
}

.home-subtitle {
  font-size: clamp(1rem, 3vw + 1rem, 1.5rem);
}

/*-------*/
/* About */
/*-------*/

.about-container-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  column-gap: 4em;
  row-gap: 2em;
  align-items: center;
}

.about-container-text {
  max-width: 1000px;
}

.about-img img {
  height: auto;
  width: 300px;
  max-width: 100%;
  border-radius: 50%;
}

.icons-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* background-color: rgb(0, 17, 20, 0.5); */
  border-radius: 5px;
}

.icon-box {
  padding: 1em 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5em;
}

.icon-box > img {
  width: 35%;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(78deg)
    brightness(95%) contrast(102%);
}

.icon-box > p {
  font-size: 0.75rem;
  margin: 0;
  color: #fff;
}

/*-----------------*/
/* Photo Portfolio */
/*-----------------*/

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin-bottom: 4em;
}

.gallery-item img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.stretch {
  grid-column: span 2;
}

/*--------------*/
/* Web Projects */
/*--------------*/

.cards-wrapper {
  display: flex;
  gap: 3em;
  justify-content: center;
  flex-wrap: no-wrap;
}

@media screen and (max-width: 1199px) {
  .cards-wrapper {
    flex-wrap: wrap;
  }
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4em;
  justify-content: center;
}

.card {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: #000;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.1);
  scale: 1;
  transition: scale 0.3s ease;
}

.card:hover {
  scale: 1.05;
}

.card-img img {
  border-radius: 5px 5px 0 0;
  width: 100%;
  max-height: fit-content;
  object-fit: cover;
}

.card-title {
  font-size: clamp(1.25rem, 3vw + 1rem, 1.5rem);
  font-weight: var(--fw-medium);
  padding: 0;
}

.card-subtitle {
  font-size: clamp(1.15rem, 3vw + 1rem, 1.25rem);
  font-weight: var(--fw-light);
  padding: 0 0 0.5em 0;
  color: var(--primary-text-color);
}

.card-text {
  font-size: 1rem;
  padding: 0 0 1em 0;
  color: var(--muted-text-color);
}

.card-info {
  padding: 2em;
}

.project-container-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  column-gap: 4em;
  row-gap: 2em;
  align-items: center;
}

.project-container-text {
  max-width: 1200px;
}

.project-container-text a:hover,
a:focus {
  opacity: 0.7;
}

.web-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.web-img img {
  width: 1200px;
  max-width: 100%;
}

.work-list {
  list-style-position: inside;
  text-align: left;
  text-indent: -20px;
  margin-left: 20px;
}

.work-list > li {
  margin-bottom: 0.75em;
}

.tech-list li {
  display: inline;
  font-size: 0.875rem;
  background-color: #1e3539;
  color: var(--primary-text-color);
  border-radius: 5px;
  padding: 1em;
  margin-right: 1em;
  line-height: 4;
}

.project-icons-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.links-wrapper {
  text-align: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 2rem;
}

/*------*/
/* Blog */
/*------*/

.post-10 {
  background: var(--linear-gradient-tech),
    url("images/blog/coding-a-pomodoro-timer-part-5.jpg");
}

.post-9 {
  background: var(--linear-gradient-tech),
    url("images/blog/coding-a-pomodoro-timer-part-4.jpg");
}

.post-8 {
  background: var(--linear-gradient-tech),
    url("images/blog/coding-a-pomodoro-timer-part-3.jpg");
}

.post-7 {
  background: var(--linear-gradient-tech),
    url("images/blog/coding-a-pomodoro-timer-part-2.jpg");
}

.post-6 {
  background: var(--linear-gradient-tech),
    url("images/blog/coding-a-pomodoro-timer-part-1.jpg");
}

.post-5 {
  background: var(--linear-gradient-tech),
    url("images/blog/creating-a-web-app-part-3.jpg");
}

.post-4 {
  background: var(--linear-gradient-tech),
    url("images/blog/creating-a-web-app-part-2.jpg");
}

.post-3 {
  background: var(--linear-gradient-tech),
    url("images/blog/creating-a-web-app-part-1.jpg");
}

.post-2 {
  background: var(--linear-gradient-tech), url("images/blog/Git-Logo-Black.jpg");
}

.post-1 {
  background: var(--linear-gradient-neutral),
    url("images/blog/learning-how-to-learn.jpg");
}

.blog-filter-tag {
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 5px;
  padding: 0.5em 1em;
  background: none;
  color: var(--primary-text-color);
  border: 1px solid;
  cursor: pointer;
}

.blog-filter-tag:hover {
  color: var(--dark-text-color);
  background-color: var(--link-hover);
}

.active-tag {
  color: var(--dark-text-color);
  background-color: var(--primary-text-color);
}

#blog-filter {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}

.hide {
  display: none;
}

.blog-img img {
  width: 1200px;
  max-width: 100%;
  box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}

.blog-card-container {
  display: flex;
  max-width: 60em;
  flex-direction: column;
  gap: 3em;
  margin: 0 auto;
}

.blog-card {
  align-items: start;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  opacity: 1;
  transition: scale 0.3s ease;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blog-card:hover {
  box-shadow: rgba(100, 100, 111, 0.7) 0px 7px 29px 0px;
}

.blog-card-title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--fw-medium);
  padding: 0;
  line-height: 1.5;
}

.card-content {
  display: flex;
  justify-content: space-between;
  padding: 2em;
}

.blog-card-info {
  padding: 2em;
  max-width: 55%;
}

.blog-card-text {
  font-size: 1rem;
  padding: 0 0 1em 0;
  color: var(--primary-text-color);
  font-weight: var(--fw-light);
}

.blogpost-link {
  font-weight: var(--fw-medium);
}

.category li {
  display: inline;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 5px;
  padding: 0.5em 1em;
  margin-right: 0.5em;
  line-height: 3.5;
}

.blogpost-category li {
  display: inline;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 5px;
  padding: 0.5em 1em;
  margin-right: 0.5em;
  line-height: 3.5;
}

.date {
  font-size: var(--small-font-size);
}

.tech-category li {
  background-color: var(--tech-color);
  color: var(--dark-text-color);
}

.neutral-category li {
  background-color: var(--neutral-color);
  color: var(--dark-text-color);
}

.creativity-category li {
  background-color: var(--creativity-color);
  color: var(--dark-text-color);
}

.code-img {
  margin-bottom: 1.5rem;
}

/*--------------*/
/* Contact Page */
/*--------------*/

.contact-wrapper {
  min-height: 50vh;
  max-width: 1000px;
  margin: 0 auto;
}

form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2em;
  padding-block: 2em;
}

#my-form-button {
  color: var(--primary-text-color);
  background-color: rgb(0, 17, 20, 0.5);
  border: 1px solid var(--primary-text-color);
  padding: 1em 1.5em;
}

#my-form-button:hover {
  color: var(--dark-text-color);
  background-color: rgb(224, 224, 224, 0.8);
  transition: all 0.3s ease-out;
}

#my-form-button:active {
  background-color: rgb(224, 224, 224, 0.6);
}

.form-group label {
  display: block;
  margin-bottom: 0.5em;
}

.form-group input,
.form-group textarea {
  appearance: none;
  outline: none;
  border: none;
  display: block;
  width: 100%;
  border-radius: 2px;
  padding: 0.5em 1em;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border: 2px solid var(--tech-color);
}

.form-group select {
  outline: none;
  border: none;
  display: block;
  border-radius: 2px;
  padding: 0.5em 1em;
}

.form-group textarea {
  resize: none;
}

.submit-group input {
  width: 100%;
  appearance: none;
  border: none;
  outline: none;
  color: var(--dark-text-color);
  background-color: var(--primary-text-color);
  font-weight: var(--fw-medium);
  border-radius: 2px;
  padding: 0.2em 1.5em;
  cursor: pointer;
}

.submit-group input:hover {
  background-color: rgba(224, 224, 224, 0.5);
  transition: 200ms ease-in-out;
}

/*---------------*/
/* Media Queries */
/*---------------*/

/* maximal 381px */
@media screen and (max-width: 381px) {
  .btn {
    padding: 0.75em 0.875em;
    margin: 0.1em;
  }
  .privacypolicy-container-content {
    display: flex;
  }
}

/* maximal 498px */
@media screen and (max-width: 28em) {
  .links-wrapper {
    flex-direction: column;
    margin-top: 1rem;
  }
  .icons-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-image {
    max-width: 100%;
  }

  .home-bg {
    background: linear-gradient(
        to bottom,
        rgb(0, 17, 20, 1),
        rgb(0, 17, 20, 0.5),
        rgb(0, 17, 20, 0)
      ),
      linear-gradient(
        to top,
        rgb(0, 17, 20, 1),
        rgb(0, 17, 20, 0.5),
        rgb(0, 17, 20, 0)
      ),
      url(./images/bg/Lac-Retaud_mobile.jpg) no-repeat center center/Cover;
  }
}

/* maximal 768px */
@media screen and (max-width: 48em) {
  .card-content {
    display: inline;
  }

  .category {
    padding-left: 1.6em;
  }

  .blog-card-info {
    max-width: 100%;
  }
}

/* maximal 600px */
@media screen and (max-width: 37.5em) {
  .gallery-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* FOR TABLET minimum 600px */
@media screen and (min-width: 37.5em) {
  /* Fonts and Spaces */
  section {
    margin-top: 2em;
    margin-bottom: 4em;
  }

  .container {
    width: min(1800px, 100% - 4em * 2);
  }

  .btn {
    font-size: 1rem;
  }

  .copyright {
    font-size: 0.875rem;
  }

  .privacypolicy {
    font-size: 0.875rem;
  }

  .hamburger-links {
    padding: 6em 4em 0 0;
    overflow: scroll;
  }

  .hamburger-links li {
    padding-block: 0.6em;
    font-size: 2.4rem;
  }

  .hamburger-nav-wrapper {
    justify-content: center;
  }

  /* Contact Page */
  form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
    padding-block: 2em;
  }

  form .full-line {
    grid-column: 1 / -1;
  }

  .submit-group input {
    width: fit-content;
  }

  /* About Page */
  .icons-container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Projects */
  .project-icons-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
}

/* minimum 768px */
@media screen and (min-width: 48em) {
  /* About Page */
  .icons-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* FOR DESKTOP minimum 960px*/
@media screen and (min-width: 60em) {
  /* Fonts and Spaces */
  .copyright {
    font-size: 1rem;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    margin: 4em 0 2em 0;
  }

  .privacypolicy {
    font-size: 1rem;
  }

  section {
    margin-top: 6em;
    margin-bottom: 8em;
  }

  .project-icons-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* minimum 1400px */
@media screen and (min-width: 90em) {
  /* Mobile/Tablet Navigation */
  .hamburger-nav-wrapper {
    display: none;
  }

  /* Desktop Navigation */
  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo-link {
    width: 40%;
    min-width: 40%;
  }

  .list-nav {
    display: flex;
    gap: clamp(2em, 3vw, 4em);
    font-weight: var(--fw-regular);
  }

  .list-nav li a.current {
    position: relative;
  }

  .list-nav li a.current::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    border-bottom: 1px solid white;
    bottom: -6px;
  }

  .list-nav li a {
    position: relative;
    font-size: 1.125rem;
  }

  .list-nav li a::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 1px;
    border-bottom: 1px solid var(--link-hover);
    bottom: -6px;
    transition: width 0.3s;
  }

  .list-nav li a:hover::before {
    width: 100%;
  }
}