@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');


body{
 font-family:Arial,sans-serif;
 margin:0;
 padding:0;
 background:#fff5f8;
 color:#2a2a2a;
}


.navbar{
 background-color:#ffffff;
 padding:15px;
 border-bottom:3px solid #ff4444;
 position:sticky;
 top:0;
 z-index:100;
 box-shadow:0 2px 10px rgba(255,68,68,0.1);
}

.navbar button{
 background-color:#ffd4e5;
 color:#2a2a2a;
 border:2px solid #ffb3cc;
 padding:10px 20px;
 margin:5px;
 border-radius:25px;
 cursor:pointer;
 font-size:14px;
 font-weight:600;
 transition:all 0.3s ease;
}

.navbar button:hover{
 background-color:#ff4444;
 color:#ffffff;
 border-color:#ff4444;
 transform:translateY(-2px);
 box-shadow:0 4px 8px rgba(255,68,68,0.3);
}

.navbar button.active{
 background-color:#ff4444;
 color:#ffffff;
 border-color:#ff4444;
}


.container{
 max-width:1000px;
 margin:40px auto;
 padding:20px;
}


h1{
 text-align:center;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 font-size:42px;
 font-weight:700;
 color:#ff4444;
 margin-bottom:30px;
 letter-spacing:-0.5px;
}


h1.main-name{
 font-family:'Fugaz One',cursive;
 font-size:64px;
 font-weight:400;
 text-shadow:4px 4px 0px #2a2a2a;
 margin-bottom:10px;
 letter-spacing:0px;
 transition:all 0.3s ease;
}

h1.main-name:hover{
 transform:scale(1.05);
 text-shadow:5px 5px 0px #2a2a2a;
}


h2{
 color:#ff4444;
 border-bottom:3px solid #2a2a2a;
 padding-bottom:10px;
 font-weight:700;
 margin-top:0;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 font-size:26px;
 letter-spacing:-0.3px;
 transition:all 0.3s ease;
}

p{
 line-height:1.8;
 font-size:16px;
 color:#4a4a4a;
}


.project-card{
 background:#ffffff;
 border:3px solid #2a2a2a;
 border-radius:0;
 padding:30px;
 margin:25px 0;
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}


.project-card:hover{
 transform:translateY(-8px) scale(1.03);
 border-color:#ff4444;
 box-shadow:0 10px 30px rgba(255,68,68,0.4);
 background:#fffbfc;
}

.project-card:hover h2{
 color:#ff4444;
 font-weight:900;
}

.project-card:hover p{
 color:#1a1a1a;
 font-weight:600;
}




@keyframes vertical-slice{
 0%,100%{transform:translateY(-8px) translateY(0px);}
 25%{transform:translateY(-10px) translateX(-1px);}
 75%{transform:translateY(-6px) translateX(1px);}
}

.project-card.home-week::before{
 content:'';
 position:absolute;
 inset:0;
 background:
 repeating-linear-gradient(
 0deg,
 rgba(255,68,68,0.2) 0px,
 rgba(255,68,68,0.2) 8px,
 rgba(255,170,0,0.2) 8px,
 rgba(255,170,0,0.2) 16px,
 transparent 16px,
 transparent 18px
 );
 opacity:0;
 transition:opacity 0.3s ease;
}

.project-card.home-week:hover{
 animation:vertical-slice 0.1s infinite;
 border-color:#ff4444;
 box-shadow:0 0 20px rgba(255,68,68,0.5);
}

.project-card.home-week:hover::before{
 opacity:1;
}

.project-card.home-week:hover h2,
.project-card.home-week:hover p{
 color:#000000;
 font-weight:700;
 position:relative;
 z-index:2;
}


@keyframes fast-shake{
 0%,100%{transform:translateY(-8px) rotate(0deg);}
 10%{transform:translateY(-8px) rotate(-1deg) translateX(-3px);}
 20%{transform:translateY(-8px) rotate(1deg) translateX(3px);}
 30%{transform:translateY(-8px) rotate(-1deg) translateX(-2px);}
 40%{transform:translateY(-8px) rotate(1deg) translateX(2px);}
 50%{transform:translateY(-8px) rotate(-0.5deg) translateX(-1px);}
 60%{transform:translateY(-8px) rotate(0.5deg) translateX(1px);}
 70%{transform:translateY(-8px) rotate(-0.5deg) translateX(-2px);}
 80%{transform:translateY(-8px) rotate(0.5deg) translateX(2px);}
 90%{transform:translateY(-8px) rotate(-0.5deg) translateX(-1px);}
}

.project-card.home-final::before{
 content:'';
 position:absolute;
 inset:0;
 background:
 repeating-linear-gradient(
 50deg,
 rgba(255,68,68,0.25) 0px,
 rgba(255,68,68,0.25) 8px,
 rgba(255,170,0,0.25) 8px,
 rgba(255,170,0,0.25) 16px,
 transparent 16px,
 transparent 20px
 );
 opacity:0;
 transition:opacity 0.2s ease;
}

.project-card.home-final:hover{
 animation:fast-shake 0.15s infinite;
 border-color:#ff4444;
 box-shadow:0 0 25px rgba(255,68,68,0.7);
}

.project-card.home-final:hover::before{
 opacity:1;
}

.project-card.home-final:hover h2,
.project-card.home-final:hover p{
 color:#000000;
 font-weight:800;
 position:relative;
 z-index:2;
}

.project-btn{
 display:inline-block;
 background:#ff4444;
 color:#ffffff;
 padding:12px 30px;
 text-decoration:none;
 border-radius:0;
 margin-top:15px;
 font-weight:700;
 border:2px solid #2a2a2a;
 transition:all 0.3s ease;
 box-shadow:4px 4px 0px #2a2a2a;
}

.project-btn:hover{
 background:#2a2a2a;
 color:#ffffff;
 transform:translate(2px,2px);
 box-shadow:2px 2px 0px #2a2a2a;
}


.dropdown{
 display:inline-block;
 position:relative;
}

.dropdown-content{
 display:none;
 position:absolute;
 background-color:#ffffff;
 min-width:160px;
 box-shadow:4px 4px 0px #2a2a2a;
 border:2px solid #2a2a2a;
 border-radius:0;
 z-index:1;
}

.dropdown-content a{
 color:#2a2a2a;
 padding:12px 16px;
 text-decoration:none;
 display:block;
 font-weight:600;
 transition:all 0.2s ease;
}

.dropdown-content a:hover{
 background-color:#ff4444;
 color:#ffffff;
 padding-left:20px;
 font-size:15px;
 border-left:4px solid #ffaa00;
}

.dropdown:hover .dropdown-content{
 display:block;
}

.dropdown:hover button{
 background-color:#ff4444;
 color:#ffffff;
 border-color:#ff4444;
}

/* Responsive image gallery used by some week pages */
.img-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
  align-items:center;
  margin:20px auto;
  max-width:1200px;
  padding:0 16px;
}
.img-gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  transition:all 0.3s ease;
  object-fit:contain;
}
.img-gallery img:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 36px rgba(255,68,68,0.2);
}
/* rotate the 3rd image counter-clockwise 90deg */
.img-gallery img:nth-child(3){
  transform:rotate(-90deg);
}
.img-gallery img:nth-child(3):hover{
  transform:rotate(-90deg) translateY(-6px);
}
/* Responsive for tablets */
@media (max-width:768px){
  .img-gallery{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:0 12px;}
}
/* Responsive for phones */
@media (max-width:480px){
  .img-gallery{grid-template-columns:1fr;gap:10px;padding:0 8px;}
}

/* Responsive video wrapper for YouTube embeds */
.video-wrapper{
  position:relative;
  width:100%;
  max-width:1000px;
  margin:14px auto;
  padding-top:56.25%; /* 16:9 aspect ratio */
}
.video-wrapper iframe{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border:0;
}