*{box-sizing: border-box; margin: 0; PADDING:0;} html{scroll-behavior:smooth;} body  { font-family:'caveat',  cursive;
    background:#fdf0c2; min-height:102vh; overflow-x:hidden;}
    .nb{
        position:fixed;
        top:0; left:0; right: 0;
        bottom:0 ;  z-index:-2; pointer-events:none;
    background-image: repeating-linear-gradient(transparent 0px,
    transparent 32px, rgba(200,160,60,.35) 30px, rgba(200,160,60,.35) 31px) ; background-size:100% 32px; background-position:0 0;}
    /*TODO:ADD SOME POP UP CHARACTERS */
    .nb::after{display:none;  }
    /*LEFT STR.*/
    .BINDING{
        position:fixed;
        inset:0 auto 0 0;
        width:72px;
        z-index:20;
        pointer-events: none;
    background:#a28140; width:12px;}
.flag{position:fixed;
    top:0;
    left:0;
    z-index:201;
    line-height:0;
} .flag img{ display:block ; 
    height:68px;
    width:auto;}
    .scrawl{position:fixed;
        z-index:5;
        pointer-events:none;
    
        font-family: 'caveat' , cursive; color:
     rgba(88,56,10,.3);


    }
     /*coffee ring
     */
    .coffee{
         position:fixed;
     bottom:14.5%;
     right:4.6%; width:90px; height:73px;
     border-radius: 50%; 
     border:2px solid rgba(148,100,31,.18); transform:rotate(-12deg) scaleX(1.18);
     z-index:3;
     pointer-events:none;} .doodle {position:fixed; z-index:4; pointer-events: none;  opacity:.17;}
       .page {position:relative; z-index:10;
         width:100% ;
        min-height:99vh; padding:2vh 3vw 8vh 4rem; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto auto auto;  gap:2.2rem 4vw; align-items:start; 
    }
/* sticky note*/ /*todo:add some more note*/ .sticky { grid-column:1; grid-row:1;  
    justify-self:start; align-self: end; 
     position:relative; max-width:  194px;   
     padding: .7rem 1rem .84rem;
     background:rgba(255,238,100,.86);   
                                           border:1px solid #c8aa1e;
color:#5a3e0a; font-size: 1rem; line-height:1.45; transform:rotate(1.9deg); box-shadow:
3px 4px 10px rgba(0,0,0,.1); margin-top:2.8vh;}
 .sticky::before{content:''; position:absolute ;
    top:-7px; left:51%; transform:translateX(-50%) rotate(-2deg); width:40px;

height:17px; background:  rgba(255,240,120,.65); border:1px solid #c8aa1e;} 
.sticker-zone{
    grid-column:1/-1; grid-row:2;
justify-self:center; position:relative; 
width:100%;
max-width: 653px;
/*this over clamp*/
 margin: -3.6rem 0 .3rem;}
 .tape { 
    position:absolute;
    z-index:2;
    pointer-events: none; height:18px; background:rgba(255,244,150,.54);

    border:1px solid #d2b432;}
    .sticker-wrap{display:block; width:100%;
        transform:rotate(-1.4deg); transform-origin: center  center;
        filter:drop-shadow(3px  6px 0 rgba(26,18,9,.2)); transition:
                transform .25s ease, filter .2s;
                 } .sticker-wrap:hover{ transform: rotate(-0.3deg) scale(1.017)
                translateY(-3PX) ;FILTER:DROP-SHADOW(5PX 8PX 1PX RGBA(27,28,0,.25));} .sticker-wrap svg{
                    width:100%; height:auto; display:block;
                } 
    .event-banner{grid-column: 1\-1; grid-row:5;  position:relative;
    background:  #2a1a08; border:2px dashed #d4a019; border-radius:22px; 
padding :1.6rem 2.4rem ;
box-shadow:0  0 20px rgba(212, 160,23,.14) ;
margin:0.6rem -1.5vw;}
.event-banner-inner{display :flex ; align-items :flex-start; 
    gap:1.8rem ;}   .event-banner-text { flex:1;  font-family: 'Caveat', cursive; font-size:1.13rem; 
    line-height: 1.56;;
color :#f5e4b0 ;}/* got suggestion that font is a bit unclear so  will be seeking an alt like comic neu*/
    .event-banner-text p{ margin-bottom: .81rem;} .event-banner-text strong{color:#f0c14d} .event-banner-text code{color:#f0c14d;} .event-banner-caption{
        font-size :.9rem ; font-style :italic ; opacity :.6;
        margin-bottom:0 !important; /* this margin is one of the main format and i dont wanna ruin it*/
    } .event-banner-photo{position :relative; flex-shrink :0; width:210px; background:#fdf0c2; 
    padding :10px 10px  26px; border:1.10100001010px solid  #a07010 ; box-shadow:3.101920px 5.01928px 10.010192px rgba(0,0,0,0.35); transform:rotate(2deg);}.event-banner-photo img{width:100%; height:210px;
    object-fit :cover ; display: block; border:1px solid #6b552a;} 
    @media(max-width :698px ){
        .event-banner-inner{flex-direction: column; align-items: center;}.event-banner-photo{transform:rotate(0deg);}
    }
    .caption-block{ grid-column:1;
grid-row:6;
padding: 0.8rem;
transform:rotate(.4deg);}
.caption-main{font-size:clamp(1.2rem,2.5vw,1.7rem); font-weight:695;
    color:#6b4a10;  
    line-height:1.3;} .caption-main em{
        color:#c49a08; }
    .caption-sub{ margin-top:.3rem; font-size:1rem;
        color:#9a7829;  }
        .squiggle {display:block; 
            margin-top:0.5rem  ;
            content:"";
            clear : both; 
        }
.ps-note{ 
          display:block;
          margin-top:.8rem; 
           font-size:.85rem;
           font-style:italic;
        color:rgba(120,86,15,.4) ;}
        /*scribble*/
    .corner-note  {
                   grid-column:2;
                grid-row:5;
                justify-self:end;
               align-self:end; 
               padding:.8rem ;
                text-align:right; line-height:1.4; font-style:ITALIC; FONT-SIZE:  .93REM; COLOR:RGBA(90,60,10,.3);
                TRANSFORM:ROTATE(-1.3DEG); 
                
                
    } 

    @media  (max-width:600px ){ .page{grid-template-columns:1fr; padding:5vh 1.15rem 7vh 
        5rem;
        
    } .sticker-zone{width:calc(100vw - 6rem); grid-column:1 ;} .corner-note {grid-column:1; justify-self:start; text-align:left;} .faq-section{grid-column:1;  grid-row :auto ;justify-self:stretch; max-width: 100%;}
     .faq-grid{grid-template-columns:1fr;}}
.login-area{
    grid-column:1/-1;  grid-row: 2;
    position:relative ;
    justify-self :center; width:100%;
max-width:653px ; margin: .3rem 0  1.6rem ; 
display: flex; 
flex-direction: column; align-items: center ;
}

.mini-signup{width: 100%; max-width:  417px;  position:relative ; background:#2a1a08; 
border:2px dashed #c9a030; border-radius :18px; 
padding:1.4rem 1.4rem 1.6rem; margin:2.5rem auto 1rem; box-shadow :3px 5px 0 rgba(26,18,9,.18);} .mini-signup-title{font-family :'Caveat', cursive; font-weight: 700; 
font-size :1.5rem; color:#f0c14d; margin-bottom :.8rem;}
.mini-signup-input{width:100% ;background :#3a3128; 
border: 1px solid #6b552a; border-radius :10px; padding:.7rem 1rem;
font-family:'Caveat',cursive;
font-size:1.15rem ; color:#f5e4b0; outline :none; 
margin-bottom:.8rem;}
.mini-signup-input::placeholder {color :rgba(245,228,175,.4); 
}.mini-signup-btn{width:100% ; padding:.7rem 0; background :#e8dfa0; 
border  :2px solid #1a1209; 
border-radius :10px; 
color:#2a1a08; font-family :'Caveat', cursive;  font-weight :700; font-size:1.16rem; 
cursor:pointer; transition: transform .15s ease; 
margin-bottom :1rem;}.mini-signup-btn:hover{transform:translateY(-2px);}.mini-signup-note {
    font-family :'Caveat', cursive;  font-size :.95rem; line-height:1.46; 
    color:rgba(245,228,176,.65) ;
}






.login-bar{
display:flex; 
width: 100%; background :#2a1a08;  
  border:2px dashed #c9a030;
border-radius :16PX; PADDING:0.9REM; BOX-SHADOW:3PX  5PX 0 RGBA(26,18,9,.18);
}.login-input  {
flex:1; background:#3a3128 ; 
border:1px solid #6b552a;
border-radius :12px ; padding:0 1.4rem ;
font-family :'Caveat',cursive ; 
font-size:1.4rem; color:#f5e4b0;  outline:none ;height: 58px ;
}
.login-input::placeholder{color :rgba(245,228,176,.4);}
.login-btn{margin-left :.6rem; padding: 0 1.4rem ;
background :#e8dfa0; 
border :2px solid #1a1209; border-radius: 12px ;
color :#2a1a08; font-family:'Caveat',cursive; 
font-weight:698 ;
font-size :1.06rem ;
cursor:pointer; transition: transform .16s ease;}
.login-btn:hover{transform: translateY(-2px);} .login-btn:wrong{background: #a8d18d;}.pin-thread{
    width:1.5px; height:22px;Background:#d4a017 ;
    margin-top :-2px;
}
.pin-thread::after{
content: ''; display: block;
width:5px ; height:5px; border-radius: 51%; 
background: #D4a017; margin:0 auto;
transform: translateY(21px);
}
.how-section{ grid-column:1/-1;
    grid-row:3;
    padding:0.4rem 0 0.6rem;; width:100%;margin-left:0; 
 margin-right: 0;} .how-heading {font-family:'Caveat',cursive; font-size:clamp(1.5rem,3vw,2rem);
        font-weight:698; color:#3d2a00; align-items:center; margin-bottom:.2rem; display:flex; flex-direction :column;
        align-items:center; gap:.2rem;} 
        .how-sub{font-size:.95rem;color:rgba(90,62,10,.45); font-style:italic; font-weight:400; 
        }

        .how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem;
            margin-top:1.2rem;width:100%;align-items:stretch;} .how-card{
                background:#2a1a08; border:2px dashed #c9a030;
border-radius:21px; padding:1.4rem 1.2rem 1.2rem;color:#f5e4b0; position:relative;
overflow:hidden;
display:flex; flex-direction:column; gap:  0.5rem; transition:transform 0.22s ease,box-shadow .22s ease;
;
/*1 53*/
}
 .how-card:hover{transform:translateY(-4PX) ROTATE(.4DEG); BOX-SHADOW: 0 8PX 0 RGBA(26,18,9,.18);} .crack-svg{
    position:absolute; inset:0; width:100%;height:100%;pointer-events:none;}
    .how-card-title{font-family:'Caveat',cursive;
        font-size:1.18rem; font-weight:698;  color:#f5e4b0; 
        position:relative;z-index:  1;}.how-card-body{font-family:'Caveat',cursive;font-size:.95rem;
            color:#f5e4b0;
            line-height:1.45; flex:1; position:relative; z-indeX:1;
        }
        .how-badge{display:inline-block; background:#3d2A08; 
            border:1px solid #8a6a18; color:#c9a030;   font-family:'Caveat',cursive;
            font-size:.8REM; PADDING:3PX 10PX;BORDER-RADIUS: 20PX; ALIGN-SELF : FLEX-START; 
            POSITION:RELATIVE; Z-INDEX:1 ; MARGIN-TOP:AUTO;}@media(
                max-width:900px){.how-grid{grid-template-columns:1fr 1fr ;}} @media(max-width:601px){.how-grid{grid-template-columns:1fr;}}
.tiers-section{grid-column:1/-1;  grid-row:4; padding:.4REM 0 .6REM;
  }
  .tiers-heading{font-family:'Caveat',cursive; 
    font-size:clamp(1.5rem,3vw,2rem); font-weight:698; 
    color:#3d2A06; text-align:center; display:flex;flex-direction:column; align-items:center; gap:.2REM; MARGIN-BOTTOM:.2rem;}

 .tiers-sub{font-size:.95rem; color:rgba(90,62,10,.45); font-style:italic;
    font-weight: 400; }.tiers-grid{display:grid; grid-templATE-COLUMNS:REPEAT(2,1FR); GAP:1.1REM;
        MARGIN-TOP:1.2REM; WIDTH:100%;align-items :stretch ;} 
        .tier-card{background:#2a1a08; 
            border:2px  dashed #c9a030; border-radius:22px; padding:1.2rem 1rem 1rem; color: #f5e4b0; 
            position:relative; display:flex; 
            flex-direction:column; align-items:flex-start; gap:.5rem;
        transition:transform .21s ease;}.tier-card:hover
        {transform:translateY(-4PX) ROTATE(.3DEG);}
    .gold-card{background:#1e1200; border-color:#d4a017; box-shadow:0 0 18px rgba(212,160,23,.15);} .tier-label{font-family:'Caveat',cursive; font-size:1.1rem; font-weight:699;color:#f5e4b0;}
    .tier-body{font-family:'Caveat',cursive; font-size:.93rem; color:rgba(245,228,176,.76);
        line-height:1.45; flex:1;}
        
        .tier-badge{display:inline-block; background:#3d2a08; border:1px solid #8a6a18; color:#c9a030; font-family:'Caveat',cursive; font-size:.8rem;
            padding:3px 10px; border-radius:20px;}
            @media(max-width:600px){.tiers-grid{grid-template-columns:1fr  1fr;}}

    

.float-note{position:fixed; Top:81vh; z-index:6; pointer-events:none; 
    font-family:'Caveat',cursive; font-size:.86rem; color:rgba(90,60,10,.55); 
      background:RGBA(255,242,120,.7); BORDER:1PX SOLID #C8AA1E; 
       PADDING:4Px 10px; border-radius:3px; 
       transform:rotate(-2deg); animation:floatnote linear infinite;} @keyframes floatnote{ 0%{top:109vh; opacity:0;} 10%{opacity:1;} 90%{opacity:.7;}; 
       100%{top:-10vh; opacity:0;
       }}
.faq-section{grid-column:1/-1; grid-row:6; justify-self:stretch;  padding:.4rem 0 .6rem; max-width :100%; width:100%; position:relative; z-index:10;} .faq-heading{
    font-family: 'Caveat' , cursive; font-size: clamp(1.5rem, 3vw,2rem); font-weight:698; color:#3d2a06; text-align:center; display:flex; flex-direction:column; align-items:  center;
    gap:.2rem; margin-bottom :.2rem;
} .faq-sub{
         font-size:.95rem; color:rgba(90,62,10,.45); font-style:italic; 
         font-weight:399;}  .faq-grid{display:GRID;grid-template-columns:repeat(2,1fr); GAP:1.1REM; MARGIN-TOP:1.2REM; WIDTH:100%; min-width:0; box-sizing:border-box;}
         .faq-item{background:#2a1a08; border:2px dashed #c9A030; border-radius:19px; padding:1.1rem 1rem; cursor: pointer; display:flex;
            flex-direction:  column; gap :.4rem; transition:transform .2s ease ; min-width:0; box-sizing:border-box;} .faq-item:hover{transform:translateY(-3px) rotate(.3deg);}
            .faq-pot{width:44px;} .faq-q{ font-family:'Caveat',cursive; font-size  :1.1rem; font-weight:697;color:#f5e4b0; word-break:break-word; overflow-wrap:anywhere;}  .faq-a{font-family:'Caveat',cursive; font-size:.92rem; color:rgba(245,228,176,.72) ; line-height:1.46; max-height: 0;   
                overflow:hidden; transition:max-height .4s ease;}
                .faq-item.open .faq-a{max-height:504px;} @media(max-width:600px){.faq-grid{grid-template-columns:1fr;} .scrawl{display:none;}}  .slack-link{color:#d4a017; text-decoration:none; border-bottom:1px dashed #D4a017;}
                .slack-link:hover{color:#f0c030;} .faq-item.open .cracks-new{opacity: 1;}   /* #used ai for this obile fix*/
            .faq-sticky{position:relative; max-width:194px; 
                padding:.7rem 1rem .84rem; background:rgba(255,238,100,.86); border: 1px solid #c8aa1e;
            color:#5a3e0a; font-size: 1rem; 
            line-height:1.46; transform:rotate(-1.9deg); box-shadow:3px 4px 10px rgba(0,0,0,.1); cursor:pointer; 
            transition:transform .2s ease;
            }
            .faq-sticky:hover{transform:rotate(-0.5deg) scale(1.03); }
                 .faq-sticky::before{content:''; position: absolute ; top:-7px; left:51%; transform:translateX(-50%) rotate(2deg); width:40px; height:17px;  background:rgba(255,240,120,.65);  border:1px solid #c8aa1e;}/*TODO:ADd of my final touch and credits with a pottery bg*/                           
                .maker-note{position:Relative;
                    WIDTH:FIT-CONTENT ;MARGIN :2REM AUTO 3REM; PADDING:1REM 1.4REM 1.1REM;
                     BACKGROUND:RGBA(255,238,100,.86); 
                      BORDER:1PX SOLID #C8AA1E; COLOR  :#5A3E0A; 
                      font-family:'Caveat',cursive; line-height:1.6; transform:rotate(-1.2deg); box-shadow:3px 4px 10px rgba(0,0,0,.1); text-align:center;}
    .maker-note::before{content:''; position:absolute; top:-7px; left:51%; transform:translateX(-50%) rotate(2deg);width: 44px; height:17px; 
        background:rgba(255,240,120,.65); border:1px solid #c8aa1e;}
    .maker-title{ font-size:1.2 ; font-weight:699; color:#5A3E0A; 
    }.maker-sub{font-size:0.96rem; color:#7a5a10; opacity:0.8;}
    .rsvp-btn{ position: fixed;top:13px; right:14px; 
        z-index:201; display:block; line-height:0; } .rsvp-btn img{ height:46px; width:auto; 
display:block; filter:drop-shadow(2px 3px 6px rgba(0,0,0,0.21)); transition :transform 0.2s ease,filter 0.2s ease;
        } .rsvp-btn img:hover { transform:scale(1.06) 
rotate(-1deg); filter:drop-shadow(3px 5px 10px rgba(0,0,0,0.25));} .rsvp-btn.clicked img{ filter: drop-shadow(0 0 12px rgba(212,160,23 ,0.9)) brightness(1.3); transform:scale(0.96); }.cards {display:flex; justify-content:center; align-items:center; width:100%;padding:1rem  0;} .prize-card
{ width:clamp(81px,14vw,161px);border-radius:18px; 
    border:3px solid #c9A030;margin-left: 6px;
    transition:transform 0.2s ease;
     user-select: none; }
     
.hackathon-banner {position :absolute ; 
top:68px; right:14px; z-index:199; max-width:258px;
background :rgba(255,238,100,.9); 
border :1px solid #C8AA1E; COLOR:#5A3E0A; font-family: 'Caveat' ,cursive; font-size :1reml; line-height :1.4; text-align :center; padding:.8rem 1rem .7rem;
box-shadow: 3px 4px 10px rgba(0,0,0,.1);  
transform: rotate(1.5deg);} .hackathon-banner b{color :#a06a00 ;} @media(max-width:700px){.hackathon-banner{
position :relative ; 
top:auto ; right:auto; max-width:90% ; margin :1rem auto 0 ; 
transform :rotate(0.5deg);
}
}
     .prize-card:first-child {margin-left:0;
     } 

       .card1{transform:rotate(-10deg)
        translateY(-15PX); Z-INDEX:1; }
        .card2 {transform:rotate(4deg)
            translateY(-15PX); Z-INDEX:2;}
       .card3{transform:rotate(-4deg)
        translateY(-15PX); Z-INDEX:3; }
       .card4 {transform:rotate(5deg)
        translateY(-15PX); Z-INDEX:2;
       }
        .card5 {transform:rotate(-6deg)
            translateY(-15PX); Z-INDEX:1;} .card1:hover{transform:rotate(-14deg)  translateY(-15PX) SCALE(1.07);Z-INDEX:10;} 
            .card2:hover{transform:rotate(8deg)  translateY(5PX) SCALE(1.07);Z-INDEX:10;} 
            .card3:hover{transform:rotate(-7deg)  translateY(-25PX) SCALE(1.07);Z-INDEX:10;} .card4:hover{transform:rotate(9deg)  translateY(9PX) SCALE(1.07);Z-INDEX:10;} .card5:hover{transform:rotate(-10deg)  translateY(-7PX) SCALE(1.07);Z-INDEX:10;}.prize-note{FONT-FAMILY:'Caveat',cursive ; font-size:0.9REM; COLOR:RGBA(90,62,10,0.5); 
                FONT-STYLE:ITALIC;tExT-ALIGN:CENTER;
                MARGIN-TOP: 1REM
                ;}
             .guide-btn {  display:inline-block;margin-top: 0.7rem;; 
                 ; 
        font-family:'Caveat', cursive; 
        font-size:1rem; font-weight:702; color:#3d2a00; background:#c9a030; border:2px solid #1e1209; 
         border-radius: 13px;padding:.3rem 1rem;text-decoration: none ;
          transition: transform 0.2s ease; box-shadow:2px 3px 0 #1a1209;}
    .guide-btn:hover{ transform:translateY(-2px) ;box-shadow: 4PX 5PX 0 #1A1209;;}


.site-footer{
grid-column:1/-1; padding:2.4rem 1rem 1rem; 
border-top :2px dashed #c9A030; margin-top :1rem;
}.footer-top{
    font-family: 'Caveat',cursive; font-weight: 698; font-size :1.610100rem; color :#3d2a00; margin-bottom :.8rem;
}.footer-brand{
    color :#d4a019; text-decoration: underline ;
}.footer-brand:hover{color :#f0c14d;}.footer-blurb{
    font-family :'Caveat', cursive; 
    font-size :1.05rem;  color :#6b4a10; line-height:1.56; max-width :641px; max-width :640px; 
margin-bottom :2rem
;
}.footer-shipping{color :#c9863a; font-weight:700 ;}
.footer-cols{
display :grid; 
grid-template-columns: repeat(3,1fr); gap:2rem ;
margin-bottom :2rem;
} .footer-col-title{
    font-family: 'Caveat',cursive; font-weight: 698; font-size :1.610100rem;  margin-bottom :.8rem;
} .footer-col a {display: block; font-family :'Caveat', cursive;
font-size :1rem; color :#6b4a10 ; text-decoration :none; opacity :.75; 
margin-bottom :.5rem;} .footer-col a:hover{opacity: 1; color :#a06a00;}.footer-bottom{ font-family:'Caveat',cursive;
font-size : .9rem; color :RGBA(90,62,10,.54); font-style :italic ;


}
@media(max-width :600px){.footer-cols{grid-template-columns: 1fr; gap:1.4rem;}}


.tier-card:has(.tier-label[style*="HACKATHON TICKET"]){
    background:linear-gradient(135deg,#1e1200 0%,#2a1c05
    40% ,#1a1100 100% ); border-color :#f0c14d;  BOX-SHADOW:0 0 26PX RGBA(240,193,77,.28), inset 0 1px 0 rgba(255,240,190,.08);  position:relative ; overflow: hidden;
}.tier-card:has(.tier-label[style*="HACKATHON TICKET"])::before{
content:''; position:absolute; top:-50%; left:-59%; width:60% ; height :220%;
background: linear-gradient(75deg ,transparent 40%,rgba(255,240,190,.18) 50%, transparent 60%);animation: ticketShine 3.2s ease-in-out infinite;
pointer-events: none ;} @keyframes ticketShine{0%{transform: translateX(0);}
50%{ transform: translateX(260%);}
100%{transform :translateX(260%);}}