#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #f5f5f5; 
  color: #007AFF;
  z-index: 9999;
  gap: 10px;
  overflow: hidden;
  animation: load 1.5s ease;
}
#loader h4 {
  font-weight: bold;
  color: #007AFF;
  animation: fap 0.4s ease;
  margin: 0;
}
@keyframes fap{
 0%{
  transform: translateY(-300px);
  opacity: 0;
 }
 100%{
  opacity: 1;
  transform: translateY(0);
 }
}
  @keyframes load{
    0% ,50%{
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-150%);
      opacity: 0;
    }
  }
:root {
 --bg-color: #faf8ff;
 --font-family: sans-serif;

 --topbar-bg: rgba(255,255,255,0.85);
 --border-color: #e6e1f5;
 --shadow-weak: rgba(60,40,120,0.08);

 --muted-gray: #6f6a80;
 --text-color: #1e1b2e;
 --muted-text: #5c566e;
 --muted-light: #9a95b3;

 --accent-blue: #7a5cff;

 --brand-gradient: linear-gradient(45deg,#7a5cff,#a855f7,#f59e0b);
 --hero-button-gradient: linear-gradient(40deg,#8b5cf6,#a855f7,#f59e0b);
 --greet-gradient: linear-gradient(#7a5cff,#a855f7);
 --skills-h4-gradient: linear-gradient(45deg,#7a5cff,#a855f7,#f59e0b);

 --brand-box-shadow: rgba(120,100,255,0.15);
 --brand-hover-shadow: rgba(160,120,255,0.25);

 --nav-hover-text: #3a3550;
 --mobile-menu-bg: rgba(255,255,255,0.96);
 --mobile-menu-shadow: rgba(0,0,0,0.08);
 --menu-bar-bg: rgba(122,92,255,0.08);
 --mobile-menu-hover-bg: rgba(122,92,255,0.12);

 --hero-bg-gradient: linear-gradient(180deg,#ffffff,#f6f3ff);
 --hero-border: #e6e1f5;
 --hero-brand-shadow: rgba(0,0,0,0.12);

 --my-photo-gradient: linear-gradient(45deg,#7a5cff,#a855f7,#f59e0b);
 --my-photo-hover-shadow: rgba(122,92,255,0.12);
 --my-photo-border: #faf8ff;

 --card-bg: #ffffff;
 --card-shadow: rgba(0,0,0,0.05);
 --card-hover-shadow: rgba(122,92,255,0.12);
 --img-drop-shadow: rgba(0,0,0,0.1);

 --about-text: rgba(70,65,90,0.95);
 --about-text-strong: rgba(60,55,85,0.98);

 --contacts-accent: #7a5cff;
 --connect-me-bg: #f6f3ff;
 --connect-me-box-shadow: rgba(0,0,0,0.06);

 --button-bg: #7a5cff;
 --button-text: #ffffff;
 --button-hover-bg: #ffffff;

 --input-border: #cfc7f5;
 --input-text: #5c566e;
 --input-bg: #ffffff;
 --input-focus-border: #7a5cff;

 --contact-me-bg: #7a5cff;
 --contact-me-text: #ffffff;
 --contact-icon-bg: rgba(122,92,255,0.18);
 --contact-icon-border: rgba(255,255,255,0.5);
 --contact-icon-shadow: rgba(255,255,255,0.08);
 --contact-link-color: #ffffff;
 --contact-link-hover: rgba(255,255,255,0.7);

 --responsive-shadow: rgba(0,0,0,0.08);
 --contacts-border-bottom: rgba(90,80,120,0.12);

 --footer-border: #dcd6f5;
 --footer-bg: #2c2555;
 --footer-text: #f6f4ff;
 --footer-link: #ddd6ff;
 --footer-link-plain: #ffffff;

 --social-bg: rgba(255,255,255,0.16);
 --social-border: rgba(255,255,255,0.38);
 --social-shadow: rgba(255,255,255,0.12);

 --white: #ffffff;
 --muted-gray-2: #6f6a80;
}


:root[data-theme="dark"] {
 --bg-color: #0f0c1c;

 --topbar-bg: rgba(22,18,40,0.85);
 --border-color: #2a2544;
 --shadow-weak: rgba(0,0,0,0.6);

 --text-color: #ecebff;

 --brand-box-shadow: rgba(0,0,0,0.5);
 --brand-hover-shadow: rgba(150,120,255,0.25);

 --nav-hover-text: #d6d1ff;
 --mobile-menu-bg: rgba(18,15,35,0.95);
 --mobile-menu-shadow: rgba(0,0,0,0.6);
 --menu-bar-bg: rgba(122,92,255,0.06);
 --mobile-menu-hover-bg: rgba(122,92,255,0.1);

 --hero-bg-gradient: linear-gradient(180deg,#141028,#1b1535);
 --hero-border: #2a2544;
 --hero-brand-shadow: rgba(0,0,0,0.6);

 --my-photo-hover-shadow: rgba(122,92,255,0.1);
 --my-photo-border: #0f0c1c;

 --card-bg: #18142c;
 --card-shadow: rgba(255,255,255,0.05);
 --card-hover-shadow: rgba(245,158,11,0.12);
 --img-drop-shadow: rgba(0,0,0,0.6);

 --about-text: rgba(230,225,255,0.92);
 --about-text-strong: rgba(240,235,255,0.98);

 --contacts-accent: #a78bfa;
 --connect-me-bg: #141028;
 --connect-me-box-shadow: rgba(0,0,0,0.6);

 --button-bg: linear-gradient(45deg,#7a5cff,#a855f7,#f59e0b);
 --button-text: #0f0c1c;

 --input-border: #3a3560;
 --input-text: #dcd9ff;
 --input-bg: #141028;

 --contact-icon-bg: rgba(122,92,255,0.12);
 --contact-icon-border: rgba(255,255,255,0.06);
 --contact-icon-shadow: rgba(255,255,255,0.02);
 --contact-link-color: #ecebff;
 --contact-link-hover: rgba(236,235,255,0.7);

 --responsive-shadow: rgba(0,0,0,0.6);
 --contacts-border-bottom: rgba(255,255,255,0.04);

 --footer-border: #1b1535;
 --footer-bg: #0b0820;
 --footer-text: #eae8ff;
 --footer-link: #a78bfa;
 --footer-link-plain: #eae8ff;

 --social-bg: rgba(255,255,255,0.04);
 --social-border: rgba(255,255,255,0.06);
 --social-shadow: rgba(0,0,0,0.6);
}
#js{
 border-radius: 20px;
}
html {
 scroll-behavior: smooth;
 transition: all 0.001s ease-in;
}

body {
 background-color: var(--bg-color);
 font-family: var(--font-family);
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

a {
 -webkit-tap-highlight-color: transparent;
 -webkit-focus-ring-color: transparent;
 outline: none;
 text-decoration: none;
}

.top-bar {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 height: 50px;
 width: 100%;
 background: var(--topbar-bg);
 border-bottom: 1px solid var(--border-color);
 backdrop-filter: blur(8px);
 box-shadow: 0 6px 28px var(--shadow-weak);
 display: flex;
 align-items: center;
 z-index: 999;
}

#info-bar {
 
 font-size: 8px;
 text-align: left;
 color: var(--muted-gray);
}

#info-bar span {
 font-size: 10px;
 font-weight: 600;
 color: var(--accent-blue);
}

.brand {
 
 margin: 7.5px;
 padding: 0;
 width: 35px;
 height: 35px;
 border-radius: 5px;
 background: var(--brand-gradient);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.95;
 box-shadow: 0 0 4px var(--brand-box-shadow);
 transition: all 0.3s ease-in;
}

.brand:hover {
 transform: scale(1.02);
 box-shadow: 0 1px 5px var(--brand-hover-shadow);
}

.brand p {
 text-align: center;
 color: var(--white);
 font-size: calc(120%);
 font-weight: 500;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav {
 
 margin-left: auto;
 margin-right: 50px;
 padding: 0;
 font-size: 13px;
 font-weight: 500;
 display: none;
 gap: 40px;
}

nav a {
 color: var(--accent-blue);
 position: relative;
 transition: all 0.3s ease-in;
}

nav a:after {
 content: "";
 position: absolute;
 left: 0;
 top: 18px;
 background-color: var(--accent-blue);
 width: 0;
 height: 1.5px;
 transition: all 0.3s ease-in;
}

nav a:hover::after {
 width: 100%;
}

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

#toggle {
 
 width: 35px;
 height: 15px;
 background-color: transparent;
 border-radius: 20px;
 display: flex;
 align-items: center;
 position: relative;
 border: 1px solid var(--accent-blue);
}

#toggle p {
 position: absolute;
 transition: all 0.15s ease;
 margin-left: 2px;
 font-size: 11px;
}

#toggle p:after {
 content: '🌕';
}

#toggle input {
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: 2;
}

#toggle input:checked+p {
 margin-left: 20px;
}

#toggle input:checked+p:after {
 content: '🌑';
}

#menu-btn {
 
 display: inline-block;
 all: unset;
 margin-left: auto;
 margin-right: 5px;
 width: 30px;
 height: 30px;
 font-weight: 100;
 color: var(--muted-light);
 transition: all 0.2s ease-out;
}

#menu-btn:active {
 transform: scale(1.1);
}

#mobile-menu {
 z-index: 1000;
 height: 100vh;
 width: 200px;
 margin: 0;
 padding: 0;
 position: fixed;
 right: 0;
 top: 0;
 border-top-left-radius: 5px;
 background-color: var(--mobile-menu-bg);
 backdrop-filter: blur(8px);
 box-shadow: 0 0 5px var(--mobile-menu-shadow);
 overflow: scroll;
 transform: translateX(200px);
}

#mobile-menu #menu-bar {
 display: flex;
 align-items: center;
 height: 40px;
 border-top-left-radius: 5px;
 background-color: var(--menu-bar-bg);
}

#menu-bar p {
 font-size: 15px;
 margin: 20px;
 font-weight: 500;
 color: var(--text-color);
}

#menu-bar #close {
 all: unset;
 margin-left: auto;
 margin-right: 10px;
 font-size: 25px;
 color: var(--muted-light);
}

#mobile-menu a {
 font-weight: 600;
 font-size: 14px;
 margin: 20px;
 color: var(--text-color);
 display: block;
 padding: 10px;
 border-radius: 5px;
 transition: all 0.2s ease-out;
}

#mobile-menu a:hover {
 background-color: var(--mobile-menu-hover-bg);
}

@keyframes close {
 from{
  transform: translateX(0);
 }
 
 to{
  transform: translateX(200px);
 }
}

@keyframes open {
from{
  transform: translateX(200px); 
 }
 
 to {
  transform: translateX(0);
 }
}

.main {
 margin-top: 50px;
 display: flex;
 align-items: center;
 flex-direction: column;
}

.hero-section,
.about-section {
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 box-sizing: border-box;
 padding-top: 30px;
 padding-bottom: 60px;
 
}

.hero-section {
 background: var(--hero-bg-gradient);
 width: 100vw;
 border-bottom: 1px solid var(--hero-border);
}

.hero-section .brand {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 font-size: 30px;
 box-shadow: 0 0 10px var(--hero-brand-shadow);
 background: var(--brand-gradient);
}

.hero-section #greet {
 margin-top: 20px;
 margin-bottom: 10px;
 font-size: 35px;
 font-weight: 510;
 text-align: Center;
 color: var(--text-color);
 
}

#greet span {
 font-size: 40px;
 background: var(--greet-gradient);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 
}

.works {
 font-size: 15px;
 margin-bottom: 25px;
 padding: 0;
 text-align: center;
 color: var(--muted-text);
 
}


.hero-section a {
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--hero-button-gradient);
 color: var(--white);
 border: 1px solid transparent;
 height: 35px;
 width: 170px;
 border-radius: 5px;
 text-align: center;
 font-size: 15px;
 font-weight: 500;
 transition: all 1s ease-out;
}

.hero-section a:hover {
 color: var(--accent-blue);
 border: 1px solid var(--accent-blue);
 background: none;
}

.hero-section a:active {
 transform: scale(1.1);
}

.about-section {
 padding-bottom: 0;
 padding-top: 60px;
}

.my-photo {
 background: var(--my-photo-gradient);
 align-items: center;
 justify-content: center;
 display: flex;
 height: 112px;
 width: 112px;
 padding: 0;
 border-radius: 50%;
 transition: all 0.5s ease-out;
 
 
}

.my-photo:hover {
 transform: translateY(-2px);
 box-shadow: 0px 5px 8px var(--my-photo-hover-shadow);
}

.my-photo img {
 border-radius: 50%;
 margin: 0;
 padding: 0;
 border: 3px solid var(--my-photo-border);
}

.about-section h2 {
 padding: 15px;
 margin: 0;
 font-weight: 900;
 font-size: 18px;
 text-align: Center;
 color: var(--accent-blue);
}

.about-section p {
 width: 80%;
 font-size: 15px;
 color: var(--about-text);
 font-weight: 400;
 margin: 0;
 padding: 0;
 line-height: 20px;
 letter-spacing: 0.6px;
}

.about-section p span {
 font-weight: bold;
 color: var(--about-text-strong);
}

#about-info {
 padding-top: 10px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
}

.skills-section h4 {
 background: var(--skills-h4-gradient);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-decoration: underline 2px solid var(--accent-blue);
 text-underline-offset: 8px;
}

.skills-section {
 display: flex;
 align-items: center;
 flex-direction: column;
 margin-top: 10;
 padding-top: 50px;
}

.skills-section h3 {
 color: var(--accent-blue);
 padding-bottom: 10px;
 margin-bottom: 0;
 transition: all 0.3s ease-out;
}

.cards {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 20px;
 padding: 20px;
 width: calc(100vw - 40px);
}

.skill-card {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 flex-direction: column;
 gap: 10px;
 width: calc(100vw - 80px);
 height: 140px;
 background-color: var(--card-bg);
 border-radius: 10px;
 box-shadow: 0px 0px 8px var(--card-shadow);
 transition: all 0.3s ease;
 padding: 20px;
}

div.skill-card:hover {
 transform: translateY(-10px) scale(0.95);
 box-shadow: 0px 0px 8px var(--card-hover-shadow);
}

.skill-card img {
 margin: 0;
 filter: drop-shadow(1px 1px 15px var(--img-drop-shadow));
 width: 40px;
 height: 40px;
 transition: all 0.3s ease;
}

.skill-card:hover img {
 transform: scale(1.1) translateY(5px);
}

.skill-card .name {
 font-weight: bold;
 font-size: 15px;
 margin: 0;
 color: var(--text-color);
}

.skill-card .skill-info {
 color: var(--muted-gray);
 font-size: 14px;
 margin: 10px;
}

.contacts-section {
 margin-top: 100px;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 flex-direction: column;
 transition: all 0.3s ease-out;
 width: 100vw;
 color: var(--contacts-accent);
}

.contacts-section .connect-me {
 width: 100vw;
 display: flex;
 align-items: center;
 flex-direction: column;
 background-color: var(--connect-me-bg);
 border-radius: 20px 20px 0px 0px;
 box-shadow: 0px 0px 8px var(--connect-me-box-shadow);
 padding-bottom: 60px;
}

.connect-me button {
 background-color: var(--accent-blue);
 border: none;
 border-radius: 5px;
 color: var(--button-text);
 width: 320px;
 height: 40px;
 margin-top: 15px;
 font-weight: 600;
 transition: all 0.3s ease-out;
}

.connect-me button:hover {
 background-color: transparent;
 color: var(--accent-blue);
 border: 1px solid var(--accent-blue);
}

.connect-me button:active {
 transform: scale(1.05);
}

.connect-me input,
textarea {
 width: 300px;
 height: 20px;
 padding: 10px;
 border-radius: 10px;
 outline: none;
 border: 1px solid var(--input-border);
 color: var(--input-text);
 background-color: var(--input-bg);
 transition: all 0.2s linear;
}

.connect-me textarea {
 height: 100px;
}

.connect-me input:focus,
textarea:focus {
 border: 0.5px solid var(--input-focus-border);
}

.contacts-section .contact-me {
 background-color: var(--contact-me-bg);
 color: var(--contact-me-text);
 width: 100vw;
 padding: 0px 0px 20px 0px;
 display: flex;
 flex-direction: column;
}

.contact-me .contacts {
 display: flex;
 flex-direction: column;
 gap: 25px;
}

.contact-me .contact {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
 line-height: 25px;
 font-size: 15px;
 gap: 15px;
 padding: 0;
 margin: 0;
 margin-left: 20px;
 transition: all 0.5s ease;
}

.contact .contact-icon {
 background-color: var(--contact-icon-bg);
 border: 0.5px solid var(--contact-icon-border);
 box-shadow: 0 0 5px var(--contact-icon-shadow);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 15px;
 border-radius: 50px;
}

.contact-icon img {
 height: 20px;
 width: 20px;
}

.contact p {
 padding: 0;
 margin: 0;
}

.contact a {
 color: var(--contact-link-color);
 font-size: 14px;
}

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

h4 {
 transition: all 0.3s ease-out;
}

h4:hover {
 transform: scale(0.95);
}

@media (orientation:landscape) and (min-height:800px) {
 .hero-section {
  height: 100vh;
 }
}

@media (min-width:600px) {
 nav {
  display: flex;
 }
 
 #menu-btn {
  display: none !important;
 }
 
 .cards {
  flex-direction: row;
 }
 
 .contacts-section {
  flex-direction: row;
  border-radius: 20px 20px 0px 0px;
  box-shadow: 0px -4px 8px var(--responsive-shadow);
  border-bottom: 1.2px solid var(--contacts-border-bottom);
 }
 
 .contacts-section .connect-me {
  padding-top: 40px;
  height: 400px;
  border-top-right-radius: 0px;
  box-shadow: none;
 }
 
 .contacts-section .contact-me {
  border-top-right-radius: 20px;
  width: 600px;
  height: 480px;
  border-right: 20px;
  align-items: center;
 }
 
 .contacts-section .connect-me h3 {
  color: var(--contacts-accent);
  margin-top: 20px;
  padding-bottom: 20px;
 }
 
 .contact-me h3 {
  margin-top: 60px;
  padding-bottom: 20px;
 }
 
 .contact-me:hover,
 .connect-me:hover {
  
  box-shadow: 0px -5px 8px var(--contact-me-hover-shadow);
 }
}

footer {
 border-top: 1px solid var(--footer-border);
 background-color: var(--footer-bg);
 max-width: 100vw;
 width: 100vw;
 display: flex;
 gap: 5px;
 align-items: center;
 flex-direction: column;
 padding-top: 20px;
 padding-bottom: 20px;
 color: var(--footer-text);
}

footer p {
 font-size: 12px;
}

footer .social-medias {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 10px;
}

footer .foot-links {
 display: flex;
 justify-content: center;
 gap: 10px;
 font-size: 15px;
 margin-top: 10px;
 color: var(--footer-link);
}

footer .foot-links a {
 color: var(--footer-link-plain);
}

.social-medias:hover a,
.contact:hover {
 transform: scale(1.05);
}
.social-medias a:hover{
 transform: scale(0.95);
}

footer p {
 text-align: center;
 color: #ddd6ff;
}
footer a:active{
 color: #ddd6ff;
}
.social-medias a {
 transition: all 0.3s ease;
 width: 10px;
 height: 10px;
 background-color: var(--social-bg);
 border: 1px solid var(--social-border);
 box-shadow: 0 0 5px var(--social-shadow);
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 30px;
 padding: 12px;
}

@keyframes fadeUp {
 from {
  transform: translateY(15px);
  opacity: 0;
 }
 
 to {
  transform: translateY(0);
  opacity: 1;
 }
 
}

@keyframes fade {
 from {
  opacity: 0;
 }
 
 to {
  opacity: 1;
 }
}

#ah {
 display: none;
}

.anim {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim.visible {
 text-shadow: unset ;
 opacity: 1;
 transform: translateY(0);
}
@keyframes pulse {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  25% {
    transform: scale(1.01) translateY(-2.5px);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.03) translateY(-5px);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.01) translateY(-2.5px);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes snap{
 0%,100%{transform: translateY(0);}
 50%{transform: translateY(-2.5px);}
}