/* ////////// GLOBAL THINGS //////////// */

body {
  margin: 0;
  /* padding-top: 1vw; */
  background-color: #ffffff;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
}
.project_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
}
.header_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ////////// COLOR CONTROL //////////// */

.white_text {
    color: #ffffff;
}
.light {
  color: #ffffff;
  margin-top: 2vw;
}
.light:hover {
  color: #ffeb00;
}
.dark {
  color: #1c1c1c;
}
.dark:hover {
  color: #0026ff;
}

/* ////////// TEXT CONTROL //////////// */

a {
  text-decoration: none;
}
a:link {
  color: #1c1c1c;
}
/* visited link */
a:visited {
  color: #1c1c1c;
}
/* mouse over link */
a:hover {
  color: #0026ff;
}
/* selected link */
a:active {
  color: #0026ff;
}

h1 {
  font-family: "parabolica", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8vw;
  line-height: 7vw;
  text-transform: capitalize;
  color: #1c1c1c;
  margin-top: 0vw;
  padding: 0;
}
h2 {
  font-family: "parabolica", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 3vw;
  line-height: 3vw;
  text-transform: capitalize;
  color: #1c1c1c;
  margin-top: 2vw;
  padding: 0;
}
h3 {
  font-family: "parabolica", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3vw;
  line-height: 3vw;
  margin: 0.1vw;
  color: #1c1c1c;
}
h4 {
  font-family: "parabolica", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 2.5vw;
  color: #1c1c1c;
  margin-top: 0;
}
h6 {
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  color: #1c1c1c;
  margin: 0;
  padding: 0;
}
p {
  font-family: "century-old-style-std", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4vw;
  color: #1c1c1c;
  margin: 0;
  padding: 0;
}

/* ////////// BUTTONS //////////// */

#menu_button_dark {
  background-color: #ffffff;
  color: #1c1c1c;
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  /* line-height: 0; */
  text-transform: capitalize;
  color: #1c1c1c;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 3vw;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative; /* Essential for positioning the pseudo-element */
  overflow: hidden; /* Hides the line when it's outside the button */
  transition: background-color 0.3s ease; /* Smooth background change on hover */
}
#menu_button_dark::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Initially hidden */
  height: 2px; /* Thickness of the line */
  background-color: #0026ff; /* Color of the line */
  transition: width 0.3s ease; /* Animate the width change */
}
#menu_button_dark:hover {
  background-color: #ffffff;
  color: #0026ff;
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  /* line-height: 0; */
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 3vw;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative; /* Essential for positioning the pseudo-element */
  overflow: hidden; /* Hides the line when it's outside the button */
  transition: color 0.6s ease; /* Smooth background change on hover */
}
#menu_button_dark:hover::before {
  width: 100%;
}
#menu_button_light {
  background-color: #1c1c1c;
  color: #ffffff;
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  /* line-height: 0; */
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 3vw;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative; /* Essential for positioning the pseudo-element */
  overflow: hidden; /* Hides the line when it's outside the button */
  transition: background-color 0.3s ease; /* Smooth background change on hover */
}
#menu_button_light::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Initially hidden */
  height: 2px; /* Thickness of the line */
  background-color: #ffeb00; /* Color of the line */
  transition: width 0.3s ease; /* Animate the width change */
}
#menu_button_light:hover {
  background-color: #1c1c1c;
  color: #ffeb00;
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  /* line-height: 0; */
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 3vw;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative; /* Essential for positioning the pseudo-element */
  overflow: hidden; /* Hides the line when it's outside the button */
  transition: color 0.6s ease; /* Smooth background change on hover */
}
#menu_button_light:hover::before {
  width: 100%;
}
#menu_button_light_active {
  background-color: #1c1c1c;
  color: #ffeb00;
  font-family: "ibm-plex-mono", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.3vw;
  /* line-height: 0; */
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 3vw;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  position: relative; /* Essential for positioning the pseudo-element */
  overflow: hidden; /* Hides the line when it's outside the button */
  transition: background-color 0.3s ease; /* Smooth background change on hover */
}

/* ////////// ICONS //////////// */

span {
  display: inline-block;
}

.arrow_icon {
  background-image: url(ICONS/arrow_yellow.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
  background-size: 100%;
}
.arrow_icon:hover {
  background-image: url(ICONS/arrow_yellow.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
}

.instagram_icon {
  background-image: url(ICONS/instagram_light.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
  background-size: 100%;
}
.instagram_icon:hover {
  background-image: url(ICONS/instagram_yellow.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
}
.instagram_icon_dark {
  background-image: url(ICONS/instagram_dark.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
  background-size: 80%;
}
.instagram_icon_dark:hover {
  background-image: url(ICONS/instagram_yellow.svg);
  height: 4vw;
  width: 4vw;
  background-repeat: no-repeat;
  background-size: 80%;
}


/* ////////// HEADER & FOOTER //////////// */


.header_grid {
  display: grid;

  grid-template-rows: 1.2vw 2vw 1vw 0.1vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #ffffff;
}
#menu_items {
  grid-column-start: 2;
  grid-column-end: 7;

  grid-row-start: 2;
  grid-row-end: 2;

  display: flex;
  gap: 1vw;
}
#menu_line {
  grid-column-start: 1;
  grid-column-end: 9;

  grid-row-start: 4;
  grid-row-end: 4;

  background-color: #1c1c1c;
}
#name {
  grid-column-start: 6;
  grid-column-end: 8;

  grid-row-start: 2;
  grid-row-end: 2;
}



.footer_grid {
  display: grid;

  grid-template-rows: 0.1vw 2vw 3vw 0.1vw 3vw 2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #ffffff;
}
#footer_line_top {
  grid-column-start: 1;
  grid-column-end: 9;

  grid-row-start: 1;
  grid-row-end: 1;

  background-color: #1c1c1c;
}
#footer_name {
  grid-column-start: 2;
  grid-column-end: 9;

  grid-row-start: 3;
  grid-row-end: 3;
}
#footer_icons {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 3;
  grid-row-end: 3;
}
#footer_line {
  grid-column-start: 2;
  grid-column-end: 8;

  grid-row-start: 4;
  grid-row-end: 4;
  background-color: #1c1c1c;
}
#footer_text_one {
  grid-column-start: 2;
  grid-column-end: 3;

  grid-row-start: 5;
  grid-row-end: 5;

  z-index: 100;
}
#footer_text_two {
  grid-column-start: 3;
  grid-column-end: 4;

  grid-row-start: 5;
  grid-row-end: 5;
}
#footer_text_three {
  grid-column-start: 4;
  grid-column-end: 5;

  grid-row-start: 5;
  grid-row-end: 5;
}
#footer_text_four {
  grid-column-start: 5;
  grid-column-end: 6;

  grid-row-start: 5;
  grid-row-end: 5;
}


@media screen and (max-width: 700px) {

    /* ////////// GLOBAL THINGS //////////// */

    /* ////////// COLOR CONTROL //////////// */

    /* ////////// TEXT CONTROL //////////// */

    a {
    text-decoration: none;
  }
  h1 {
    font-family: "parabolica", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 8vw;
    line-height: 8vw;
    margin-top: 0vw;
    text-transform: capitalize;
    color: #1c1c1c;
  }
  h2 {
    font-family: "parabolica", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 6vw;
    line-height: 8vw;
    margin-top: 1vw;;
    margin-bottom: 0;
    text-transform: capitalize;
    color: #1c1c1c;
  }
  h3 {
    font-family: "parabolica", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3.5vw;
    color: #1c1c1c;
    line-height: 3vw;

    margin-top: 1vw;
  }
  h4 {
    font-family: "parabolica", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 4vw;
    color: #1c1c1c;
    line-height: 4vw;

    margin-top: 0;
  }
  h6 {
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    line-height: 3vw;
    text-transform: capitalize;
    color: #1c1c1c;
    /* margin-top: 1vw; */
  }
  p {
   font-family: "century-old-style-std", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2vw;
    color: #1c1c1c;

    margin-top: 1vw;
  }

    /* ////////// BUTTONS //////////// */

    #menu_button_dark {
    background-color: #ffffff;
    color: #1c1c1c;
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    /* line-height: 0; */
    text-transform: capitalize;
    color: #1c1c1c;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 3vw;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the line when it's outside the button */
    transition: background-color 0.3s ease; /* Smooth background change on hover */
  }
  #menu_button_dark::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Initially hidden */
    height: 2px; /* Thickness of the line */
    background-color: #0026ff; /* Color of the line */
    transition: width 0.3s ease; /* Animate the width change */
  }
  #menu_button_dark:hover {
    background-color: #ffffff;
    color: #0026ff;
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    /* line-height: 0; */
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 3vw;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the line when it's outside the button */
    transition: color 0.6s ease; /* Smooth background change on hover */
  }
  #menu_button_dark:hover::before {
    width: 100%;
  }
  #menu_button_light {
    background-color: #1c1c1c;
    color: #ffffff;
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    /* line-height: 0; */
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 3vw;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the line when it's outside the button */
    transition: background-color 0.3s ease; /* Smooth background change on hover */
  }
  #menu_button_light::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Initially hidden */
    height: 2px; /* Thickness of the line */
    background-color: #ffeb00; /* Color of the line */
    transition: width 0.3s ease; /* Animate the width change */
  }
  #menu_button_light:hover {
    background-color: #1c1c1c;
    color: #ffeb00;
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    /* line-height: 0; */
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 3vw;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the line when it's outside the button */
    transition: color 0.6s ease; /* Smooth background change on hover */
  }
  #menu_button_light:hover::before {
    width: 100%;
  }
  #menu_button_light_active {
    background-color: #1c1c1c;
    color: #ffeb00;
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.6vw;
    /* line-height: 0; */
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 3vw;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative; /* Essential for positioning the pseudo-element */
    overflow: hidden; /* Hides the line when it's outside the button */
    transition: background-color 0.3s ease; /* Smooth background change on hover */
  }

   
  /* ////////// ICONS //////////// */


      .arrow_icon {
    background-image: url(ICONS/arrow_yellow.svg);
    height: 12vw;
    width: 12vw;
    background-repeat: no-repeat;

    background-size: 100%;
  }
  .arrow_icon:hover {
    background-image: url(ICONS/arrow_yellow.svg);
    height: 8vw;
    width: 8vw;
    background-repeat: no-repeat;
  }
  .instagram_icon {
    background-image: url(ICONS/instagram_light.svg);
    height: 10vw;
    width: 10vw;
    background-repeat: no-repeat;

    background-size: 100%;
  }
  .instagram_icon:hover {
    background-image: url(ICONS/instagram_yellow.svg);
    height: 10vw;
    width: 10vw;
    background-repeat: no-repeat;
  }
  .instagram_icon_dark {
    background-image: url(ICONS/instagram_dark.svg);
    height: 12vw;
    width: 12vw;
    background-repeat: no-repeat;

    background-size: 100%;
  }
  .instagram_icon_dark:hover {
    background-image: url(ICONS/instagram_yellow.svg);
    height: 12vw;
    width: 12vw;
    background-repeat: no-repeat;

    background-size: 100%;
  }




   /* ////////// HEADER & FOOTER //////////// */


   .header_grid {
    display: grid;

    grid-template-rows: 1.1vw 4vw 1vw 0.2vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #ffffff;
    /* opacity: 90%; */
  }
  #menu_items {
    grid-column-start: 2;
    grid-column-end: 7;

    grid-row-start: 2;
    grid-row-end: 2;

    display: flex;
    gap: 1vw;
  }
  #menu_line {
    grid-column-start: 1;
    grid-column-end: 9;

    grid-row-start: 4;
    grid-row-end: 4;

    background-color: #1c1c1c;
  }
  #name {
    grid-column-start: 6;
    grid-column-end: 8;

    grid-row-start: 2;
    grid-row-end: 2;
  }

    .footer_grid {
    display: grid;

    grid-template-rows: 0.3vw 10vw 0.3vw 4vw 4vw 4vw 8vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1vw;

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #ffffff;

    /* display: none; */
  }
  #footer_name {
    grid-column-start: 2;
    grid-column-end: 3;

    grid-row-start: 2;
    grid-row-end: 2;

    margin-top: 2vw;
  }
  #footer_icons {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;
  }
  #footer_line {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 3;
    grid-row-end: 3;
    background-color: #1c1c1c;
  }
  #footer_text_one {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 4;
    grid-row-end: 4;
  }
  #footer_text_two {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 5;
    grid-row-end: 5;
  }
  #footer_text_three {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 6;
    grid-row-end: 6;
  }
  #footer_text_four {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;
  }

}






/* 

Parabolica Hairline
font-family: "parabolica", sans-serif;
font-weight: 100;
font-style: normal;
Parabolica Hairline Oblique
font-family: "parabolica", sans-serif;
font-weight: 100;
font-style: italic;

Parabolica Light
font-family: "parabolica", sans-serif;
font-weight: 200;
font-style: normal;
Parabolica Light Oblique
font-family: "parabolica", sans-serif;
font-weight: 200;
font-style: italic;

Parabolica Regular
font-family: "parabolica", sans-serif;
font-weight: 400;
font-style: normal;
Parabolica Regular Oblique
font-family: "parabolica", sans-serif;
font-weight: 400;
font-style: italic;

Parabolica Medium
font-family: "parabolica", sans-serif;
font-weight: 500;
font-style: normal;
Parabolica Medium Oblique
font-family: "parabolica", sans-serif;
font-weight: 500;
font-style: italic;

Parabolica Bold
font-family: "parabolica", sans-serif;
font-weight: 700;
font-style: normal;
Parabolica Bold Oblique
font-family: "parabolica", sans-serif;
font-weight: 700;
font-style: italic;

Parabolica Text Regular
font-family: "parabolica-text", sans-serif;
font-weight: 400;
font-style: normal;
Parabolica Text Medium
font-family: "parabolica-text", sans-serif;
font-weight: 500;
font-style: normal;

Parabolica Text Medium Oblique
font-family: "parabolica-text", sans-serif;
font-weight: 500;
font-style: italic; 
Parabolica Text Regular Oblique
font-family: "parabolica-text", sans-serif;
font-weight: 400;
font-style: italic;

__________________________________________________________________________________


IBM Plex Mono Thin
font-family: "ibm-plex-mono", sans-serif;
font-weight: 100;

font-style: normal;
IBM Plex Mono Thin Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 100;

font-style: italic;
IBM Plex Mono ExtraLight
font-family: "ibm-plex-mono", sans-serif;
font-weight: 200;
font-style: normal;

IBM Plex Mono ExtraLight Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 200;
font-style: italic;

IBM Plex Mono Light
font-family: "ibm-plex-mono", sans-serif;
font-weight: 300;
font-style: normal;

IBM Plex Mono Light Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 300;
font-style: italic;

IBM Plex Mono Regular
font-family: "ibm-plex-mono", sans-serif;
font-weight: 400;
font-style: normal;

IBM Plex Mono Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 400;
font-style: italic;

IBM Plex Mono Text
font-family: "ibm-plex-mono", sans-serif;
font-weight: 500;
font-style: normal;

IBM Plex Mono Text Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 500;
font-style: italic;

IBM Plex Mono Medium
font-family: "ibm-plex-mono", sans-serif;
font-weight: 600;
font-style: normal;

IBM Plex Mono Medium Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 600;
font-style: italic;

IBM Plex Mono SemiBold
font-family: "ibm-plex-mono", sans-serif;
font-weight: 700;
font-style: normal;

IBM Plex Mono SemiBold Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 700;
font-style: italic;

IBM Plex Mono Bold
font-family: "ibm-plex-mono", sans-serif;
font-weight: 800;
font-style: normal;

IBM Plex Mono Bold Italic
font-family: "ibm-plex-mono", sans-serif;
font-weight: 800;
font-style: italic;

__________________________________________________________________________________


Century Old Style Std Regular

    font-family: "century-old-style-std", serif;
    font-weight: 400;
    font-style: normal;

Century Old Style Std Italic

    font-family: "century-old-style-std", serif;
    font-weight: 400;
    font-style: italic;

Century Old Style Std Bold

    font-family: "century-old-style-std", serif;
    font-weight: 700;
    font-style: normal;


*/