*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Patrick Hand',cursive;

background:
repeating-linear-gradient(
90deg,
#e7edf8 0px,
#e7edf8 60px,
#d8e4f5 60px,
#d8e4f5 120px
);

padding:30px;

color:#333;
}

.logo{
text-align:center;
margin-bottom:20px;
}

.logo span{
display:inline-block;
font-size:4rem;
font-weight:bold;
margin:0 2px;
font-family:'Special Elite', monospace;
}

.logo span:nth-child(1){color:#ff6b6b;}
.logo span:nth-child(2){color:#ffb84d;}
.logo span:nth-child(3){color:#70c1b3;}
.logo span:nth-child(4){color:#5f7fff;}
.logo span:nth-child(5){color:#ff85c1;}
.logo span:nth-child(6){color:#8d65ff;}
.logo span:nth-child(7){color:#67b84a;}

.container{

max-width:1000px;

margin:auto;

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

padding:30px;

border:8px dashed #ff7d7d;

border-radius:30px;

box-shadow:
0 10px 25px rgba(0,0,0,.15);
}

.menu{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-bottom:20px;
}

.menu a{

text-decoration:none;

color:#c74343;

font-size:1rem;

text-align:center;

transition:.3s;
}
.personal-data{
    margin-top: 30px;
    margin-bottom: 30px;
}

.menu{
    margin-bottom: 40px;
}
.personal-data{
    margin-bottom: 50px;
}

.top-grid{
    margin-top: 30px;
}
.menu a:hover{

transform:
translateY(-4px)
rotate(-2deg);
}

.menu img{

width:50px;

display:block;

margin:auto auto 5px;
}

.train{

text-align:center;

font-size:2rem;

margin-bottom:30px;
}

.top-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-bottom:40px;
}

.welcome,
.updates{

padding:25px;

border-radius:20px;

box-shadow:
0 5px 15px rgba(0,0,0,.08);
}

.welcome{

background:#cde6ea;
}

.updates{

background:#fffdf5;
}

.welcome h2,
.updates h2{

font-family:'Special Elite', monospace;

margin-bottom:15px;

color:#d54c4c;
}

.updates ul{

padding-left:20px;
}

.section-title{

text-align:center;

margin-bottom:25px;

font-family:'Special Elite', monospace;

color:#c58a00;
}

.favorites{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;

margin-bottom:40px;
}

.card{

background:white;

padding:25px;

border-radius:25px;

text-decoration:none;

color:#444;

text-align:center;

border:3px solid #eadfd3;

transition:.3s;
}

.card:hover{

transform:
rotate(-2deg)
translateY(-5px);

background:#fff9f0;
}

.card h3{

margin:10px 0;
}

.sticky-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-bottom:40px;
}

.sticky{

padding:25px;

box-shadow:
8px 8px 15px rgba(0,0,0,.15);

position:relative;
}

.sticky::before{

content:"";

position:absolute;

width:80px;
height:20px;

background:#f2d6a5;

top:-10px;
left:50%;

transform:
translateX(-50%)
rotate(-5deg);
}

.yellow{

background:#fff2a8;

transform:rotate(-2deg);
}

.pink{

background:#ffd8e7;

transform:rotate(2deg);
}

.buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:30px;
}

.buttons img{

width:88px;
height:31px;
}

footer{

text-align:center;

padding-top:20px;

border-top:2px dashed #ddd;
}

@media(max-width:768px){

.top-grid,
.sticky-wrapper{

grid-template-columns:1fr;
}

.logo span{

font-size:2.5rem;
}

.container{

padding:20px;
}
.about-layout{

display:grid;
grid-template-columns:300px 1fr;
gap:30px;

margin-bottom:40px;
}

.profile-card{

background:#fffdf5;

padding:25px;

border-radius:25px;

text-align:center;

box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.profile-card img{

width:180px;
height:180px;

object-fit:cover;

border-radius:50%;

margin-bottom:15px;

border:6px solid white;
}

.about-info{

display:flex;
flex-direction:column;
gap:25px;
}

.facts-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:40px;
}

.fact-card{

background:white;

padding:20px;

border-radius:20px;

border:3px solid #eadfd3;

box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.fact-card h3{

margin-bottom:10px;

color:#d15b5b;
}

.letter{

background:#fff7c7;

padding:30px;

border-radius:20px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

text-align:center;
}

.letter h2{

font-family:'Special Elite', monospace;

margin-bottom:15px;

color:#d34c4c;
}

.profile-card{
    text-align:center;
}

.profile-card img{
    display:block;
    margin:0 auto;
}
}