:root{
    --pink:#FFB6C1;
    --blue:#B0E0E6;
    --yellow:#FFFACD;
    --lavender:#E6E6FA;
    --peach:#FFDAB9;

    box-sizing:border-box;
}
body{
    margin:0;
    background:#FFB6C1;
    font-family:"Oldenburg", serif;
}

#wrapper{
    width:1300px;
    max-width:95%;
    margin:25px auto;
    background:#ffffff40;
    padding:10px;
    display:flex;
    gap:20px;
    align-items:flex-start;
}
#sidebar{
    width:280px;
    padding:20px;
    background:var(--pink);
}

.profile-box{
    background:beige;
    border-radius:15px;
    padding:15px;
    text-align:center;
}

.profile-box img{
    width:140px;
}

nav{
    margin-top:20px;
}

nav a{
    display:block;
    margin-bottom:10px;
    padding:12px;
    background:var(--lavender);
    color:black;
    text-decoration:none;
    border-radius:15px;
    font-weight:bold;
}
nav a{
    width:200px;
    margin:10px auto;
}
nav a:hover{
    background:var(--peach);
}

.sidebar-box{
    margin-top:20px;
    background:white;
    
    border-radius:15px;
    padding:10px;
}

main{
    flex:1;
    padding:15px;
    margin-top:0;
}

header{
    background:var(--blue);
  
    border-radius:20px;
    text-align:center;
    padding:20px;
  
}

header h1{
    font-size:80px;
    margin:0;
}

header p{
    font-size:24px;
}

.float-left,
.float-right{
    position:absolute;
    width:120px;
    top:20px;
}

.float-left{
    left:20px;
}

.float-right{
    right:20px;
}

.announcement{
    background:var(--yellow);
    border-radius:20px;
    text-align:center;
    padding:10px;
    margin-top:15px;
    font-weight:bold;
    gap:20px;
    
    
}

.grid{
    display:grid;
    grid-template-columns:repeat(3, 320px);
    justify-content:center;
    gap:20px;
}

.box{
    padding:20px;
    border-radius:20px;
    max-width:320px;
    box-sizing:border-box;
}

.yellow{
    background:var(--yellow);
}

.lavender{
    background:var(--lavender);
}

.blue{
    background:var(--blue);
}

.pink{
    background:#ffe4ec;
}

.corner-icon{
    width:80px;
    position:absolute;
    bottom:10px;
    right:10px;
}

.project-photo{
    width:250px;
    border:2px solid #666;
}

footer{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:20px;
}

.footer-box{
    flex:1;
    background:var(--peach);
    border-radius:20px;
    padding:15px;
    text-align:center;
}

@media (max-width: 900px) {

    #wrapper{
        flex-direction:column;
    }

    #sidebar{
        width:auto;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .float-left,
    .float-right{
        display:none;
    }