@font-face {
  font-family: "Wotfard";
  src: url('./assets/font/wotfard-regular-webfont.ttf') format("TrueType");
}

:root {
  --fs-300: 0.9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.375rem;
  --fs-600: 1.875rem;
  --fs-700: 2rem;

  --ff-body: "Wotfard", "Roboto", sans-serif;
  --ff-heading: "Wotfard", "Playfair Display", serif;

  --fw-400: 400;
  --fw-700: 400;

  --clr-primary-200: hsla(200, 100%, 95%, 1);
  /* Very soft light blue */
  --clr-primary-300: hsla(200, 90%, 70%, 1);
  /* Light blue */
  --clr-primary-400: hsla(200, 80%, 60%, 1);
  /* Medium-light blue */
  --clr-primary-500: hsla(200, 100%, 50%, 1);

  --clr-neutral-100: hsla(0, 0%, 100%, 1);
  --clr-neutral-200: hsla(0, 0%, 30%, 1);
  --clr-neutral-300: hsla(0, 0%, 45%, 1);
  --clr-neutral-400: hsla(0, 0%, 40%, 1);
  --clr-neutral-500: hsla(0, 0%, 60%, 1);
  --clr-neutral-900: hsla(0, 0%, 10%, 1);
}

:root[data-theme="dark"] {
  --clr-primary-200: hsla(200, 100%, 10%, 1);
  --clr-primary-300: hsla(200, 90%, 20%, 1);
  --clr-primary-400: hsla(200, 80%, 30%, 1);
  --clr-primary-500: hsla(200, 100%, 40%, 1);
  --clr-background-check : #213448;
  --clr-neutral-100: hsla(0, 0%, 10%, 1);
  --clr-neutral-200: hsla(0, 0%, 70%, 1);
  --clr-neutral-300: hsla(0, 0%, 60%, 1);
  --clr-neutral-400: hsla(0, 0%, 70%, 1);
  --clr-neutral-500: hsla(0, 0%, 80%, 1);
  --clr-neutral-900: hsla(0, 0%, 100%, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --clr-primary-200: hsla(200, 100%, 10%, 1);
    --clr-primary-300: hsla(200, 90%, 20%, 1);
    --clr-primary-400: hsla(200, 80%, 30%, 1);
    --clr-primary-500: hsla(200, 100%, 40%, 1);

    --clr-neutral-100: hsla(0, 0%, 10%, 1);
  --clr-neutral-200: hsla(0, 0%, 70%, 1);
    --clr-neutral-300: hsla(0, 0%, 60%, 1);
    --clr-neutral-400: hsla(0, 0%, 70%, 1);
    --clr-neutral-500: hsla(0, 0%, 80%, 1);
    --clr-neutral-900: hsla(0, 0%, 100%, 1);
  }
}
@media (min-width: 35em) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.5rem;
    --fs-600: 2.25rem;
    --fs-700: 3rem;
  }
}

/* //////////////////////
  RESET - source: https://piccalil.li/blog/a-modern-css-reset
  /////////////////////// */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Wotfard" , sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
a,
figure,
blockquote,
dl,
dd {
  margin: 0;
  color: rgb(52, 51, 51);
}

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

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

/* Set core body defaults */
body {
  
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;

}

/* 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 {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* //////////////////////
  General styling
  /////////////////////// */

body {
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  color: var(--clr-neutral-900);
  background-color: var(--clr-neutral-100);
  position: relative;
}

h1,
h2,
h3 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-400);
  line-height: 1.1;
  color: inherit;
}
p , span , a{
  color: inherit;
}
strong {
  font-weight: var(--fw-700);
}

section,
.section {
  padding: min(10vh, 7em) 0;
}

/* //////////////////////
  Utility Classes
  /////////////////////// */

/* select all direct childen of .flow
   and add margin to the top for proper
   spacing */

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

.container {
  margin-inline: auto;
  padding-inline: 1.5em;
  max-width: 80rem;
}

.container--narrow {
  max-width: 65rem;
}

.flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1em);
}

.text-center {
  text-align: center;
}
@media (max-width: 576px) {
  .container {
    padding: 0;
  }
}
/* typgraphy */

.article-title,
.section-title {
  color: var(--clr-primary-500);
}

.article-title {
  font-size: var(--fs-700);
}

.section-title {
  font-size: var(--fs-600);
}
/* 
Main Section
*/
.main-section {
  height: 100vh;
  padding: 0;
  position: relative;
}
#spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(72, 61, 139, 0.3) 0%, rgba(138, 43, 226, 0.1) 20%, transparent 40%);  z-index: 0;
  transition: background-position 0.05s;
}
.shape{
  position: fixed;
  transition: all 1s ease-in-out ;
}
@media screen and (max-width : 992px) {
  .shape{
    display:   none;
  }
}
.shape-1{
  top: 10vh;
  left: 50vw;
}.shape-2{
  top: 35vh;
  left: 80vw;
}.shape-3{
  top: 60vh;
  left: 30vw;
}.shape-4{
  top: 70vh;
  right: 30vw;
}.shape-5{
  top: 70vh;
  left: 20vw;
}.shape-6{
  top: 90vh;
  left: 80vw;
}.shape-7{
  top: 15vh;
  left: 25vw;
}
.shape-8{
  top: 40vh;
  left: 30vw;
}
/*
  Transition for theme toggling
*/

::view-transition-old(root){
  animation-delay:  1500ms;
}
::view-transition-new(root){
  animation: circle-in 1500ms;
}
@keyframes circle-in{
  from{
    clip-path: circle(0% at 50% 0%);
  }
  to{
    clip-path: circle(130% at 50% 0%);
  }
}

/* //////////////////////
  Header
  /////////////////////// */

.page-header {
  padding: 1em 0;
}

.page-header__content {
  display: flex;
  justify-content: space-between;
}
.nav {
  display: flex;
  align-items: center;
}
.nav-list {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 50px;
}
.logo-wrapper{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 20px;
}
#moon{
  display: none;
}
#sun{
  display: inline-block;
}
.theme-changer{
  width: 30px;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
}

.nav-list a {
  color: var(--clr-neutral-200);
  text-decoration: none;
  font-weight: bold;
}

.nav-list a:focus,
.nav-list a:hover {
  color: var(--clr-primary-400);
  text-decoration: underline;
}

.logo {
  width: 70px;
  object-fit: cover;
}
@media (max-width: 576px) {

  .page-header {
    display: flex;
  }
}
.nav-list{
  gap: 30px;
}
/*
Main Hero
*/
 .hero-container {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
 }

 .animated-gradient-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
   transform: scale(1.5);
   animation: gradientEntrance 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
 }

 @keyframes gradientEntrance {
   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 .gradient-inner {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background: radial-gradient(125% 125% at 50% 20%, #0A0A0A 35%, #2979FF 50%, #FF80AB 60%, #FF6D00 70%, #FFD600 80%, #00E676 90%, #3D5AFE 100%); */
   transition: transform 0.1s ease-out;
 }

 .hero-content {
   position: relative;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
   padding: 0 1rem;
   padding-top: 8rem;
   text-align: center;
 }

 .intro-section {
   /* margin-bottom: 2rem; */
   opacity: 0;
   animation: fadeInUp 1.2s ease-out 0.5s forwards;
 }

 .intro-greeting {
   font-size: 2rem;
   color: var(--clr-neutral-300);
   font-weight: 300;
   margin-bottom: 1rem;
   letter-spacing: 0.05em;
   opacity: 0;
   animation: fadeInUp 1s ease-out 0.8s forwards;
 }

 .intro-name {
   font-family: 'Orbitron', monospace;
   font-size: 4rem;
   font-weight: 900;
background: linear-gradient(135deg, #0D47A1, #880E4F, #F57F17, #1B5E20);
   background-size: 400% 400%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 1rem;
   opacity: 0;
   animation: fadeInUp 1s ease-out 1.1s forwards, gradientShift 4s ease-in-out infinite;
 }

 .intro-title {
   font-size: 2.2rem;
   color: var(--clr-neutral-900);
   font-weight: 500;
   letter-spacing: 0.05em;
   margin-bottom: 0.5rem;
   opacity: 0;
   animation: fadeInUp 1s ease-out 1.4s forwards;
 }

 .intro-subtitle {
   font-size: 1.8rem;
  color: var(--clr-neutral-300);
     font-weight: 400;
   opacity: 0;
   animation: fadeInUp 1s ease-out 1.7s forwards;
 }

 .lottie-container {
   width: 800px;
   height: 600px;
   opacity: 0;
   animation: fadeInScale 1.5s ease-out 2s forwards;
 }

 .description {
   margin-top: 1.5rem;
   font-size: 1.125rem;
   color: #cbd5e1;
   max-width: 32rem;
   line-height: 1.6;
   opacity: 0;
   animation: fadeInUp 1s ease-out 2.3s forwards;
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInScale {
   from {
     opacity: 0;
     transform: scale(0.8);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 @keyframes gradientShift {

   0%,
   100% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 .intro-name::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: linear-gradient(90deg, #2979FF, #FF80AB);
   border-radius: 2px;
   opacity: 0;
   animation: fadeInUp 1s ease-out 1.8s forwards;
 }

 .intro-name {
   position: relative;
   display: inline-block;
   animation: fadeInUp 1s ease-out 1.1s forwards, gradientShift 4s ease-in-out infinite, float 3s ease-in-out infinite;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
   .intro-name {
     font-size: 2.5rem;
   }

   .intro-title {
     font-size: 1.4rem;
   }

   .intro-greeting {
     font-size: 1.2rem;
   }

   .lottie-container {
     width: 600px;
     height: 500px;
   }

   .description {
     font-size: 1rem;
   }
 }

 @media (max-width: 480px) {
   .intro-name {
     font-size: 2rem;
   }

   .intro-title {
     font-size: 1.2rem;
   }

   .lottie-container {
     width: 450px;
     height: 400px;
   }
 }

/* 
Reach me
*/
.reach-me__heading {
  text-align: center;
  margin-bottom: 50px;
  font-family: inherit;
  position: relative;
  display: inline-block;
}

.reach-me__heading-wrapper {
  text-align: center;
}
.wave-three {
  position: absolute;
  top: -81px;
  right: 0;
  opacity: 0.3;
}
.reach-me {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
}
.reach-me__items {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
}
.reach-me__items-img {
  width: 40px;
  height: 40px;
}
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 576px) {
  .reach-me {
    padding: 0;
  }
}
/* //////////////////////
  Footer
  /////////////////////// */

.site-footer {
  --logo-color: currentColor;
  padding: 2em 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-500);
  text-align: center;
}

/* //////////////////////
  Homepage
  /////////////////////// */

.hero > div {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 3em;
}

.hero__image {
  width: 100%;
  /* max-height: max(15rem, 40vh); */
  object-fit: cover;
}

@media (min-width: 45em) {
  .hero > div {
    grid-auto-flow: column;
  }
}

.featured-articles {
  background-color: var(--clr-primary-200);
}

.articles__list {
  --flow-spacer: 3rem;
  margin: 6rem 0;
}

/* //////////////////////
  Individual article page
  /////////////////////// */

.main-article {
  margin-bottom: 3rem;
}

.main-article__figure figcaption {
  margin: 1rem 0;
  font-size: var(--fs-300);
  opacity: 0.9;
}

/* //////////////////////
  Article snippets
  /////////////////////// */

.snippet {
  display: grid;
  gap: 1em;
  grid-template-areas:
    "image"
    "title"
    "meta"
    "body"
    "button";
}

.snippet__image {
  grid-area: image;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.snippet__title {
  grid-area: title;
}
.snippet__meta {
  grid-area: meta;
  color: var(--clr-neutral-300);
}

.snippet__meta span {
  color: var(--clr-neutral-900);
}

.snippet .btn {
  grid-area: button;
}

.snippet__title {
  color: var(--clr-neutral-900);
  font-size: var(--fs-500);
}

.snippet__title a {
  color: inherit;
  text-decoration: none;
}

.snippet__title a:hover,
.snippet__title a:focus {
  color: var(--clr-primary-500);
}

@media (min-width: 45em) {
  .snippet {
    grid-template-areas:
      "title image"
      "meta image"
      "body image"
      "button image";
    grid-column-gap: 4em;
    grid-template-columns: 1fr 40%;
    grid-template-rows: min-content min-content min-content 1fr;
  }
}

.btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  padding: 0.75em 1.75em;
  border-radius: 0.25em;
  align-self: start;
  justify-self: start;
}

.btn:focus {
  outline: 0.125em solid var(--clr-primary-400);
  outline-offset: 0.25em;
}

.btn--primary {
  background: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  font-weight: var(--fw-700);
  border: 2px solid var(--clr-primary-400);
}
.btn--primary:hover,
.btn--primary:focus {
  background: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
}

.btn--neutral {
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
  font-weight: var(--fw-700);
  border: 2px solid var(--clr-neutral-900);
}

.btn--neutral:hover,
.btn--neutral:focus {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-900);
}

/*
  Animated Menu
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Animated-Radial-Menu {
  position: fixed;
  right: 10vw;
  top: 2vh;
  z-index: 100;
}

.Animated-Radial-Menu .menu {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Animated-Radial-Menu .menu .toggle {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #2f363e;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  font-size: 2em;
  transition: transform 0.5s;
}

.Animated-Radial-Menu .menu li {
  position: absolute;
  left: 0;
  list-style: none;
  transition: 0.3s;
  transition-delay: calc(0.04s * var(--i));
  transform: rotate(0deg) translateX(110px);
  transform-origin: 140px;
}

.Animated-Radial-Menu .menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  color: var(--clr);
  border: 2px solid var(--clr);
  border-radius: 50%;
  font-size: 1.5em;
  transform: rotate(calc(-45deg * var(--i)));
  transition: 0.3s;
}

.Animated-Radial-Menu .menu li a:hover {
  background: var(--clr);
  color: #333;
  box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr), 0 0 50px var(--clr);
}

.Animated-Radial-Menu .menu.active .toggle {
  transform: rotate(315deg);
}

.Animated-Radial-Menu .menu.active li {
  transform: rotate(calc(45deg * var(--i))) translateX(0px);
}
@media screen and (max-width : 992px) {
  .menu{
    display: none;
  }
  .Animated-Radial-Menu{
    display: none;
  }
}

/*
  About me
*/
.about-me{
  position: relative;
  z-index: 500;
  gap: 16px ;
  margin: 100px 0 200px 0;
  text-align: center;
  margin-inline-start: 4.5vw;
  
}
.about-me__wrapper{
  /* padding-inline-start: 4.5vw; */
}

.avatar{
  width: 180px;
  height: 180px;
  float: left;
  border-radius: 50%;
  margin-right: 1.5rem;
  shape-outside: circle();
  -webkit-shape-outside :circle();
  animation: move-in ease-in-out 0.5s;
    animation-range: cover 0% cover 100%;
    animation-timeline: scroll();
}
.about-me p {
  font-size: 24px;
  color: var(--clr-neutral-900);
  text-align: start;
  max-width: 65vw;
  animation: fade-in ease-in-out 0.5s;
    animation-range: cover 0% cover 100%;
    animation-timeline: scroll();
}
@keyframes move-in {
  0% {
    transform: translateX(-100%);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0) ;
    opacity: 1;
  }
}
@keyframes fade-in{
  from{
    opacity: 0;
  }to{
    opacity: 1;
  }
}
@media screen and (max-width: 992px) {
  .avatar{
    float: none;
    width: 120px;
    height: 120px;
  }
  .about-me__wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-inline-start: 0;
  }
  .about-me p {
    font-size: 18px;
    max-width: 100%;
  }
  .about-me{
    margin-inline-start: 0;
    padding: 0 8px;
    margin-top: 0;
  }
}