/* ============================================================
   runyoussef.me — styles
   Split out of index.html for organization.
   ============================================================ */

/* local Monocraft */
@font-face{font-family:'Monocraft';src:url('./fonts/Monocraft.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap;}

:root{
  --primary-color:#e96224;
  --hover-color:#ff6600;
  --title:"Monocraft","JetBrains Mono",ui-monospace,monospace;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
body{margin:0;padding:0;background-color:#fff;color:#111;font-family:var(--mono);font-size:15px;line-height:1.6;}
html.dark-mode{background-color:#000;}
html.dark-mode body{background-color:#000;}
button:focus{outline:1px solid #777 !important;}

/* ---- header / dark switch / typewriter ---- */
.Header{text-align:center;align-items:center;justify-content:center;display:flex;flex-direction:column;height:100vh;font-family:var(--title);z-index:1;}
.Header h1{color:#000;text-align:center;font-size:clamp(3rem,7.5vw,5.5rem);line-height:1.15;margin-top:0;}
.Header p{margin:40px 0 0;}
.see{background-color:var(--primary-color);color:#fff;border:0;outline:0;padding:10px 22px;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;}
.see:hover{background-color:var(--hover-color);}
.see .fa-eye{color:#fff;font-size:18px;padding-left:12px;}
.switch{position:relative;display:inline-block;width:60px;height:34px;margin-top:22px;z-index:1;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--primary-color);transition:0.4s;}
.slider:before{content:"";position:absolute;height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:0.4s;}
input:checked + .slider{background-color:#000;}
input:focus + .slider{box-shadow:0 0 1px #000;}
input:checked + .slider:before{transform:translateX(26px);}
.slider.round{border-radius:34px;}
.slider.round:before{border-radius:50%;}
.line-1{position:relative;width:15em;margin:14px auto;border-right:2px solid rgba(25,25,25,0.75);font-size:clamp(1rem,2.2vw,1.6rem);text-align:center;white-space:nowrap;overflow:hidden;color:#000;font-family:var(--mono) !important;}
.anim-typewriter{animation:typewriter 4s steps(27) 1s 1 normal both,blinkTextCursor 0.5s steps(27) infinite normal;}
@keyframes typewriter{from{width:0;}to{width:15em;}}
@keyframes blinkTextCursor{from{border-right-color:rgba(25,25,25,0.75);}to{border-right-color:transparent;}}

/* ---- dark theme (real colors) ----
   The template's filter-invert-on-<html> approach doesn't actually recolor
   content (text stays black on the black background) and breaks fixed elements,
   so dark mode is implemented with explicit overrides instead. */
html.dark-mode{background-color:#0f1115;}
html.dark-mode body{background-color:#0f1115;color:#e8e8e8;}
html.dark-mode .Header h1{color:#e8e8e8;}
html.dark-mode .line-1{color:#e8e8e8;border-right-color:rgba(232,232,232,0.75);}
html.dark-mode .effect2{background:#16181d;border-color:#333;}
html.dark-mode .Photo{background:#11131a;filter:none;}
html.dark-mode .project-card{background:#16181d;border-color:#2e3340;}
html.dark-mode .project-card h3{color:#98a0aa;}
html.dark-mode .skill__square i,.skill__square svg{color:#8b93a0;}
html.dark-mode .skill__square h6{color:#c2c8d0;}
html.dark-mode .git-form{background:rgba(20,24,30,0.94);}
html.dark-mode .half form input,.half form textarea{background:#10131a;border-color:#3a4150;color:#e8e8e8;}
html.dark-mode .half form input:focus,.half form textarea:focus{border-color:var(--primary-color);}
html.dark-mode .half p{color:#cfd4dc;}
html.dark-mode .mailto a{color:#f2915e;}
html.dark-mode .parallax{position:relative;}
html.dark-mode .parallax::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:0;pointer-events:none;}
html.dark-mode .Copy{background:rgba(12,14,18,0.75);}
html.dark-mode ::selection{background:var(--primary-color);color:#fff;}

/* ---- about / skills ---- */
.effect2{position:relative;width:100%;max-width:1200px;margin:6% auto;background:#fff;padding:5% 6%;border-radius:8px;border-bottom:solid 1px #777;}
.Photo{background:#eee;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:8px;min-height:320px;}
.about-text{width:100%;padding:2%;}
.red-line{color:var(--primary-color);font-weight:500;font-family:var(--title);font-size:clamp(1.5rem,3vw,2.1rem);}
.About-title-box{box-sizing:border-box;width:60%;padding-bottom:5px;border-bottom:solid 2px var(--primary-color);margin-bottom:15px;}
.skills{padding:4%;}
.skill__square{margin:15px 0;min-width:96px;}
.skill__square i{font-size:50px;color:#777;}
.skill__square svg{width:38px;height:38px;color:#777;}
.skill__square h6{text-align:center;margin:auto;font-size:0.95em;padding-top:5px;color:#333;font-family:var(--mono);}
.skill__square i:hover,.skill__square svg:hover{color:#ff4753;}
.skill__square h6:hover{color:#ff4753;}

/* ---- works: projects + miscellaneous ---- */
.third{width:100%;max-width:1200px;margin:6% auto;align-items:center;padding:5% 8%;justify-content:center;}
.project-card{padding:18px;margin-top:20px;box-shadow:rgba(17,12,46,0.15) 0 20px 60px 0;border:0.5px solid #eee;border-radius:12px;background:#fff;}
.project-card h2{color:var(--primary-color);margin-top:0;font-weight:500;font-size:1.35rem;font-family:var(--title);}
.project-card h2:hover{color:var(--hover-color);}
.project-card h3{text-align:left;font-size:0.9rem;color:#666;font-family:var(--mono);}
.pp-head-line{box-sizing:border-box;width:auto;padding-bottom:6px;border-bottom:solid 2px var(--primary-color);margin:0 auto 24px;}
.pp-head{text-align:center;}

/* ---- contact / parallax ---- */
.parallax{background-image:url('./assets/pexels-photo-691668.jpeg');background-attachment:fixed;background-repeat:no-repeat;background-size:cover;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.git-form{width:100%;max-width:1160px;box-sizing:border-box;margin:0 auto;background-color:rgba(255,255,255,0.94);max-height:80vh;border-radius:10px;padding:28px;}
.git-head-div{box-sizing:border-box;padding-top:2%;padding-bottom:12px;width:70%;border-bottom:3px solid var(--primary-color);text-align:center;margin:0 auto;}
.git-head{color:var(--primary-color);font-weight:500;font-family:var(--title);font-size:2rem;}
.half{vertical-align:top;}
.half form{padding:1.5rem 1rem;}
.half form input,.half form textarea{width:100%;margin:10px 0;padding:12px;border-radius:5px;outline:0;border:1px solid #777;font-family:var(--mono);background:#fff;}
.half form textarea{min-height:120px;}
.half form input:focus,.half form textarea:focus{border:1px solid var(--primary-color);}
.half form button{padding:12px 28px;font-size:1rem;border-radius:2rem;color:#fff;background-color:var(--primary-color);border:none;margin:20px auto 0;display:block;cursor:pointer;font-family:var(--mono);}
.half form button:hover{background-color:var(--hover-color);}
.half p{padding:2.5rem 1rem 0;text-align:center;line-height:1.7;color:#222;}
.git-cont .fab{vertical-align:middle;padding:10px;font-size:34px;height:34px;text-align:center;text-decoration:none;color:var(--primary-color);}
.git-cont .fab:hover{color:var(--hover-color);}
.Copy{position:static;background:rgba(0,0,0,0.55);color:#fff;font-weight:500;padding:8px 16px;border-radius:6px;margin-top:20px;font-family:var(--mono);font-size:0.9rem;}
.see-wrap{margin-top:10px;}

/* ---- theme switch ---- */
.theme-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;}
.mailto{margin-top:20px;text-align:center;font-family:var(--mono);font-size:0.95rem;}
.mailto a{color:var(--primary-color);text-decoration:none;border-bottom:1px dotted var(--primary-color);}
.mailto a:hover{color:var(--hover-color);}

/* ---- responsive ---- */
@media (max-width:800px){
  .Header h1{font-size:2.6rem;}
  .line-1{font-size:1.05rem;}
  .effect2{width:100%;padding:8% 5%;}
  .skills{padding:8% 4%;}
  .third{width:100%;padding:6% 4%;}
  .project-card{width:100% !important;}
  .pp-head-line{width:75%;}
  .git-form{width:94%;padding:16px;}
  .git-head-div{width:85%;}
  .git-head{font-size:1.5rem;}
  .skill__square{min-width:74px;}
  .skill__square i{font-size:38px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .anim-typewriter{animation:none;}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}