/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
.noto-sans{
              font-family: "Noto Sans", sans-serif;
              font-optical-sizing: auto;
              font-weight: 300;
              font-style: normal;
              font-variation-settings:
                "wdth" 100;
            }

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #343434; /* Change this value to your desired color */
  color: #ffffff;
  font-size: 1em;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.4;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans", sans-serif;
}

p {
  color: rgb(85,85,85);
}

/* TRANSITION */

a, .btn {
  transition: all 300ms ease;
}
/* DESKTOP-NAV */

nav, .nav-links {
  display: flex;
}

nav {
  justify-content: space-around;
  align-items: center;
  height: 17vh;
}

.nav-links {
  gap: 2rem;
  list-style: none;
  font-size: 1.5rem;
}

a{
  color: white;
  text-decoration: none;
  text-decoration-color: black;
}

a:hover {
  color: #999999;
  text-decoration: underline;
  text-decoration-color: #999999;
  text-underline-offset: 1rem;
}

.logo {
  font-size: 3rem;
}

.logo:hover {
  cursor: default;
}

/* HAMBURGER MENU */
#hamburger-nav {
  display: none;
}.hamburger-menu {
  position: relative;
  display: inline-block;
 }

.hamburger-icon {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 24px;
 width: 30px;
 cursor: pointer;
}

.hamburger-icon span{
  width: 100%;
  height: 2px;
  background-color: white;
  transition: all 0.3ms ease-in-out;
}

.menu-links {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3ms ease-in-out;
}

.menu-links a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  transition: all 0.3ms ease-in-out;
}

.menu-links li {
  list-style: none;
}

.menu-links.open {
  max-height: 300px;
}

#home {
  display: flex;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

#home span {
  color: #875cd6;
}

.home-links {
  display: flex;
  gap: 1rem; /* Creates space between the icons */
}

.home-links li {
  list-style: none;
  width: 24px; /* Increased size for better visibility */
}

.home-links li img{
  width: 100%; /* Make image fill the container */
}

.hamburger-icon.open span:first-child {
  transform: rotate(45deg) translate(10px, 5px);
}
.hamburger-icon.open span:nth-child(2) {
  opacity: 0;
}
.hamburger-icon.open span:last-child {
  transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
  transform: none;
}
.hamburger-icon span:first-child {
  transform: none;
}
.hamburger-icon span:first-child {
  transform: none;
}

/* Individual Paragraph Styles */
.home-text .p1 {
  font-size: 2rem;
  color: #fafafa; /* Example color */
}

.home-text .p2 {
  font-size: 1.5rem;
  color: #cccccc; /* Example color */
}

.home-text .p3 {
  font-size: 1rem;
  color: #999999; /* Example color */
}

@media screen and (max-width: 1200px) {
  #desktop-nav {
    display: none;
  }
  #hamburger-nav {
    display: flex;
  }
}


/*!**/
/* * Remove text-shadow in selection highlight:*/
/* * https://twitter.com/miketaylr/status/12228805301*/
/* **/
/* * Customize the background color to match your design.*/
/* *!*/

/*::-moz-selection {*/
/*  background: #b3d4fc;*/
/*  text-shadow: none;*/
/*}*/

/*::selection {*/
/*  background: #b3d4fc;*/
/*  text-shadow: none;*/
/*}*/

/*!**/
/* * A better looking default horizontal rule*/
/* *!*/

/*hr {*/
/*  display: block;*/
/*  height: 1px;*/
/*  border: 0;*/
/*  border-top: 1px solid #ccc;*/
/*  margin: 1em 0;*/
/*  padding: 0;*/
/*}*/

/*!**/
/* * Remove the gap between audio, canvas, iframes,*/
/* * images, videos and the bottom of their containers:*/
/* * https://github.com/h5bp/html5-boilerplate/issues/440*/
/* *!*/

/*audio,*/
/*canvas,*/
/*iframe,*/
/*img,*/
/*svg,*/
/*video {*/
/*  vertical-align: middle;*/
/*}*/

/*!**/
/* * Remove default fieldset styles.*/
/* *!*/

/*fieldset {*/
/*  border: 0;*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/

/*!**/
/* * Allow only vertical resizing of textareas.*/
/* *!*/

/*textarea {*/
/*  resize: vertical;*/
/*}*/

/*!* ==========================================================================*/
/*   Author\'s custom styles*/
/*   ========================================================================== *!*/

/*!* ==========================================================================*/
/*   Helper classes*/
/*   ========================================================================== *!*/

/*!**/
/* * Hide visually and from screen readers*/
/* *!*/

/*.hidden,*/
/*[hidden] {*/
/*  display: none !important;*/
/*}*/

/*!**/
/* * Hide only visually, but have it available for screen readers:*/
/* * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility*/
/* **/
/* * 1. For long content, line feeds are not interpreted as spaces and small width*/
/* *    causes content to wrap 1 word per line:*/
/* *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe*/
/* *!*/

/*.visually-hidden {*/
/*  border: 0;*/
/*  clip: rect(0, 0, 0, 0);*/
/*  height: 1px;*/
/*  margin: -1px;*/
/*  overflow: hidden;*/
/*  padding: 0;*/
/*  position: absolute;*/
/*  white-space: nowrap;*/
/*  width: 1px;*/
/*  !* 1 *!*/
/*}*/

/*!**/
/* * Extends the .visually-hidden class to allow the element*/
/* * to be focusable when navigated to via the keyboard:*/
/* * https://www.drupal.org/node/897638*/
/* *!*/

/*.visually-hidden.focusable:active,*/
/*.visually-hidden.focusable:focus {*/
/*  clip: auto;*/
/*  height: auto;*/n/*  margin: 0;*/
/*  overflow: visible;*/
/*  position: static;*/
/*  white-space: inherit;*/
/*  width: auto;*/
/*}*/

/*!**/
/* * Hide visually and from screen readers, but maintain layout*/
/* *!*/

/*.invisible {*/
/*  visibility: hidden;*/
/*}*/

/*!**/
/* * Clearfix: contain floats*/
/* **/
/* * The use of `table` rather than `block` is only necessary if using*/
/* * `::before` to contain the top-margins of child elements.*/
/* *!*/

/*.clearfix::before,*/
/*.clearfix::after {*/
/*  content: "";*/
/*  display: table;*/
/*}*/

/*.clearfix::after {*/
/*  clear: both;*/
/*}*/

/*!* ==========================================================================*/
/*   EXAMPLE Media Queries for Responsive Design.*/
/*   These examples override the primary (\'mobile first\') styles.*/
/*   Modify as content requires.*/
/*   ========================================================================== *!*/

/*@media only screen and (min-width: 35em) {*/
/*  !* Style adjustments for viewports that meet the condition *!*/
/*}*/

/*@media print,*/
/*  (-webkit-min-device-pixel-ratio: 1.25),*/
/*  (min-resolution: 1.25dppx),*/
/*  (min-resolution: 120dpi) {*/
/*  !* Style adjustments for high resolution devices *!*/
/*}*/

/*!* ==========================================================================*/
/*   Print styles.*/
/*   Inlined to avoid the additional HTTP request:*/
/*   https://www.phpied.com/delay-loading-your-print-css/*/
/*   ========================================================================== *!*/

/*@media print {*/
/*  *,*/
/*  *::before,*/
/*  *::after {*/
/*    background: #fff !important;*/
/*    color: #000 !important;*/
/*    !* Black prints faster *!*/
/*    box-shadow: none !important;*/
/*    text-shadow: none !important;*/
/*  }*/

/*  a,*/
/*  a:visited {*/
/*    text-decoration: underline;*/
/*  }*/

/*  a[href]::after {*/
/*    content: " (" attr(href) ")";*/
/*  }*/

/*  abbr[title]::after {*/
/*    content: " (" attr(title) ")";*/
/*  }*/

/*  !**/
/*   * Don\'t show links that are fragment identifiers,*/
/*   * or use the `javascript:` pseudo protocol*/
/*   *!*/
/*  a[href^="#"]::after,*/
/*  a[href^="javascript:"]::after {*/
/*    content: "";*/
/*  }*/

/*  pre {*/
/*    white-space: pre-wrap !important;*/
/*  }*/

/*  pre,*/
/*  blockquote {*/
/*    border: 1px solid #999;*/
/*    page-break-inside: avoid;*/
/*  }*/

/*  tr,*/
/*  img {*/
/*    page-break-inside: avoid;*/
/*  }*/

/*  p,*/
/*  h2,*/
/*  h3 {*/
/*    orphans: 3;*/
/*    widows: 3;*/
/*  }*/

/*  h2,*/
/*  h3 {*/
/*    page-break-after: avoid;*/
/*  }*/
/*}*/