body{

background:#d9f5ff;
font-family:Verdana,sans-serif;
color:#324b63;

}

#wrapper{

width:1400px;
margin:auto;
padding:20px;

}

/* Banner */

header{

margin-bottom:25px;

padding:35px;

background:white;

border:2px solid #8bdfff;

border-radius:18px;

box-shadow:0 0 25px #bcefff;

text-align:center;

}

header h1{

font-size:48px;
letter-spacing:4px;

}

/* Three Columns */

#desktop{

display:grid;

grid-template-columns:240px 1fr 260px;

gap:20px;

align-items:flex-start;

}

/* Floating Windows */

.window{

background:white;

border-radius:12px;

border:2px solid #82d7ff;

overflow:hidden;

box-shadow:0 0 15px rgba(0,180,255,.25);

}

.titlebar{

background:linear-gradient(
90deg,
#9fe9ff,
#d7f7ff
);

padding:10px;

font-weight:bold;

border-bottom:2px solid #82d7ff;

}

.windowContent{

padding:18px;

}

/* Sidebar */

#sidebar a{

display:block;

text-decoration:none;

padding:10px;

margin-bottom:8px;

color:#324b63;

border-radius:8px;

}

#sidebar a:hover{

background:#dff8ff;

}

/* Intro */

main p{

margin-top:15px;

line-height:1.7;

}

/* Projects */

.project{

text-align:center;

}

.project img{

width:100%;

border-radius:10px;

margin-bottom:10px;

}

.project h3{

margin-bottom:8px;

}

hr{

margin:18px 0;

border:none;

border-top:1px solid #b8ecff;

}

/* Bulletin */

footer{

margin-top:25px;

}

.ads{

display:flex;

justify-content:space-evenly;

flex-wrap:wrap;

gap:15px;

}

.ad{

width:200px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

background:#eefcff;

border:1px solid #8bdfff;

border-radius:10px;

overflow:hidden;

}

.ad img{

width:100%;
height:100%;
object-fit:cover;

}