@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


body{
font-family:"Tajawal",sans-serif;
}

h1,h2,h3{
font-family:"Tajawal",sans-serif;
}

.note,
textarea,
input{
  font-family: "Cairo", sans-serif;
}

:root{

--board:#f8f9fa;

--marker:#24324a;
--marker-red:#d94a3d;


--yellow:#f5dd6b;
--pink:#f3b4c8;
--blue:#b7daf5;
--green:#c4e8b0;
--orange:#f7c28a;
--lilac:#d9bdf5;


}



*{
box-sizing:border-box;
}



body{

margin:0;

min-height:100vh;

background:
radial-gradient(
ellipse at top,
#805b3d 0%,
#3d2a1d 100%
);

background-attachment:fixed;

}



.container{

width:100%;

max-width:1400px;

margin:auto;

padding:40px 20px;

}



.header{

text-align:center;

color:white;

margin-bottom:35px;

}



.badge{

display:inline-block;

background:rgba(255,255,255,.15);

border:1px solid rgba(255,255,255,.2);

padding:8px 20px;

border-radius:30px;

font-size:14px;

}



.header h1{

font-size:70px;

margin:20px 0 5px;

font-weight:700;

}



.header p{

font-size:18px;

opacity:.75;

}





/* frame */

.wood-frame{

background:
repeating-linear-gradient(
90deg,
#654321 0px,
#805333 8px,
#5c3b24 16px,
#70472b 24px
);


padding:15px;

border-radius:25px;


box-shadow:

inset 0 0 0 3px #3b2415,

0 30px 60px rgba(0,0,0,.5);


}



.board{


background:
linear-gradient(
180deg,
#ffffff,
#f2f4f5
);


border-radius:12px;

min-height:500px;

padding:30px;


box-shadow:

inset 0 2px 15px rgba(0,0,0,.12);



}




.board h2{


  font-family: "Cairo", sans-serif;

font-size:45px;

text-align:center;

color:var(--marker);

margin:0 0 30px;


}




.notes{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:35px;

}




/* sticky notes */


.note{

position:relative;

padding:30px 22px 20px;

min-height:220px;


box-shadow:

0 2px 4px rgba(0,0,0,.15),

0 10px 20px rgba(0,0,0,.25);



transition:.3s;


}



.note:hover{

transform:
rotate(0deg)
scale(1.08)!important;

z-index:5;

}



.note p{

  font-family: "Cairo", sans-serif;

font-size:21px;

line-height:1.6;

color:#352b25;

}



.note h3{

font-size:32px;

color:var(--marker);

margin:10px 0 0;


}



.note span{

  font-family: "Cairo", sans-serif;

font-size:18px;

color:#54463b;

}





.note hr{

border:0;

border-top:1px solid rgba(0,0,0,.15);

}



.tape{


position:absolute;

width:70px;

height:25px;

top:-12px;

left:50%;

transform:translateX(-50%);


background:
linear-gradient(
180deg,
rgba(255,255,255,.7),
rgba(200,180,120,.5)
);


border:1px solid rgba(0,0,0,.1);

opacity:.8;


}




.yellow{

background:var(--yellow);

}


.pink{

background:var(--pink);

}


.blue{

background:var(--blue);

}


.green{

background:var(--green);

}


.orange{

background:var(--orange);

}


.lilac{

background:var(--lilac);

}





/* form */


.form-card{

max-width:580px;

margin:50px auto 0;

background:var(--yellow);

padding:30px 35px;

box-shadow:

0 2px 5px rgba(0,0,0,.2),
0 15px 30px rgba(0,0,0,.3);


transform:rotate(-1deg);

}



.form-card h2{

font-family:"Cairo",sans-serif;

font-size:40px;

text-align:center;

color:var(--marker);

margin:0 0 20px;

}



form label{


display:block;

  font-family: "Cairo", sans-se
  
  rif;

font-size:18px;

margin-top:14px;

color:var(--marker);



}




input,
textarea{


width:100%;

background:transparent;

border:0;

outline:none;


font-size:18px;

padding:8px;
  font-family: "Cairo", sans-serif;


border-bottom:

2px dashed rgba(0,0,0,.25);


}



textarea{


height:110px;

resize:none;


background-image:

repeating-linear-gradient(
transparent,
transparent 35px,
rgba(0,0,0,.15) 36px
);



}




.colors{


display:flex;

gap:12px;

margin:18px 0;


}



.colors input{

display:none;

}




.colors span{


display:block;

width:30px;

height:30px;

border-radius:5px;

cursor:pointer;


box-shadow:

0 4px 8px rgba(0,0,0,.25);


}



.colors input:checked + span{


outline:

3px solid var(--marker);


outline-offset:3px;


}




button{


width:100%;


margin-top:24px;


padding:12px;


background:transparent;


border:

2px dashed var(--marker);



  font-family: "Cairo", sans-serif;

font-size:32px;


color:var(--marker);


cursor:pointer;


transition:.3s;


}



button:hover{

background:rgba(0,0,0,.05);

}




footer{

color:white;

text-align:center;

margin-top:40px;

font-family:"Cairo",sans-serif;

font-size:15px;

opacity:.8;

line-height:2;

}


footer strong{

color:#f5dd6b;

font-weight:700;

font-size:18px;

}





/* Responsive */


@media(max-width:1100px){


.notes{

grid-template-columns:
repeat(3,1fr);

}


}



@media(max-width:800px){


.container{

padding:25px 12px;

}



.header h1{

font-size:45px;

}



.notes{

grid-template-columns:
repeat(2,1fr);

}



.form-card{

padding:25px 20px;

}



.form-card h2{

font-size:32px;

}



}



@media(max-width:500px){


.notes{

grid-template-columns:
1fr;

}



.note{

min-height:180px;

}



.header h1{

font-size:38px;

}



.board{

padding:15px;

}


}