/* This Style is oriented for phone first */

@font-face {
  font-family: 'invisible';
  src: url(fonts/Invisible-ExtraBold.otf);
}
@font-face {
  font-family: 'courage';
  src: url(fonts/Courage-Regular-BF684a5711a6d41.otf);
}
@font-face {
  font-family: 'reanie';
  src: url(fonts/ReenieBeanie-Regular.ttf);
}
@font-face {
  font-family: 'gloria';
  src: url(fonts/GloriaHallelujah-Regular.ttf);
}


/* .blurred {
  filter: blur(5px);
  pointer-events: none;
} */

.main-container {
  position: relative;
}


.blurred {
  position: relative;
  filter: blur(5px);
  pointer-events: none;
}

.blurred::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.149); /* black tint */
  z-index: 9998;
  pointer-events: none;
}



.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.5s ease;
}

.popup img {
  max-width: 230px;
  height: auto;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
  cursor: pointer;
}

.popup p{
  text-align: center;
  font-family: gloria;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}


/* ========================= Global Styles ======================== */

* {
  margin: 0px 0px;
  padding: 0px 0px;
}

html {
  scroll-padding-top: 95px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* font-family: monoid; */
  background-color: #ffffff;
  color: black;
  cursor: url('trash/sexycursor.png'), auto;
}





/* ========================= Header ============================== */

/* Base header layout */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fefcfc;
  color: #000000;
  padding: 10px 20px;
  /* position: sticky; */
  /* position: relative; */
  top: 0;
  z-index: 999;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
}

/* If logo is a text */
.logo a {
  font-size: 37px;
  font-weight: bold;
  font-family: 'pasti';
  text-decoration: none;
  color: #161a1d;
  padding-top: 10px;
}

/* if log is a img */
.logo img {
  height: 50px;
  border-radius: 3px;
}

/* Nav lins */
nav a {
  color: #000000;
  text-decoration: none;
  margin-left: 20px;
  font-family: Elure;
  font-size: 17px;
  transition: color 0.3s;
}

/* nav hover */
nav a:hover {
  color: #0dcfa9;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.hamburger {
  /* For the hamburger menue in phone */
  display: none;
  font-size: 24px;
  cursor: pointer;
}






/* ============================ Section Styles =============================== */
section {
  /* border: 2px dashed #aaa; */
  padding: 20px;
  margin: 0px;
  min-height: 600px;
}

.hero {
  /* background: #ffae13; */
  font-size: 16px;
  /* background-image: url(image/imageonline-co-noisedimage\ \(2\).png); */
  background-size: cover;
  background-position: center;
  /* color: white; */
  /* border-top: 4px solid black; */
}

.about {
  background: #e5e7eb;
}

.projects {
  background: #ffffff;
}

.skills {
  background: #ebf2fa;
}

.contact {
  background: #ffffff;
}




/* ************************* Individual ************************************* */
/* HERO */

.hero-container .whoami{
  font-family: invisible;
  font-size: 20px;
  margin-top: 80px;
  margin-left: 50px;
}
.hero-container .hero-name{
  font-family: courage;
  font-size: 70px;
  margin-top: 0px;
  text-align: center;
  font-weight: normal;
  text-shadow: 1px 4px 8px rgba(0, 0, 0, 0.589);
}
.hero-container p{
  font-family: monospace;
  font-size: 18px;
  /* margin-top: 30px; */

}
.hero-container img{
  height: 220px;
  margin-top: -60px;
}


/* ========================================== MEdia Queries ============================================== */
/* Mobile styles */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background: #cccccc;
    padding: 10px;
    width: 100%;
  }

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

  .hamburger {
    display: block;
  }
}

/* Laptop Devices */
@media (min-width: 769px) {
  section {
    /* border: 2px dashed #aaa; */
    padding: 20px;
    /* margin: 40px 00px; */
    min-height: 700px;
  }

  .logo img {
    height: 60px;
  }
  .hero{
    background-position: center -546px;
    background-repeat: no-repeat;
  }
  html {
    scroll-padding-top: 125px;
    scroll-behavior: smooth;
  }
}