body {

background-image: url("images/backgrounds/clouds.png");

background-color: #fff5fb;

font-family: "Trebuchet MS", Arial, sans-serif;

font-size: 14px;

color: #5b4050;

margin: 0;

padding: 0;

}



#page {

width: 1000px;

margin: auto;

}



header {

text-align: center;

padding: 20px;

}



.banner {

width: 100%;

}



.banner img {

max-width: 700px;

}



h1 {

font-size: 42px;

color: #e48bb3;

font-family: Georgia, serif;

text-shadow: 2px 2px white;

margin-bottom: 5px;

}



.subtitle {

font-style: italic;

font-size: 16px;

}



nav {

background-color: #ffd6e8;

border: 3px dotted #ef9fc2;

padding: 12px;

text-align: center;

border-radius: 15px;

margin-bottom: 20px;

}



nav a {

color: #c85c8d;

font-weight: bold;

text-decoration: none;

padding: 5px;

}



nav a:hover {

text-decoration: underline;

}





#columns {

display: flex;

align-items: flex-start;

gap: 15px;

}





#left {

width: 220px;

}



#middle {

width: 500px;

}



#right {

width: 220px;

}





.box {

background-color: #fff;

border: 3px solid #f3b2d0;

border-radius: 15px;

padding: 15px;

margin-bottom: 18px;

box-shadow: 3px 3px 0px #ffd8ea;

}



.bigbox {

padding: 20px;

}



.box h2 {

background-color: #ffe1ef;

color: #d86b9a;

font-size: 18px;

text-align: center;

border-radius: 10px;

padding: 7px;

margin-top: 0;

}



.box h3 {

color: #cf7199;

font-size: 16px;

}



.profilepic {

width: 150px;

border-radius: 50%;

display: block;

margin: auto;

}



.gallery {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 10px;

}



.gallerypic {

width: 130px;

height: auto;

border: 5px solid white;

box-shadow: 2px 2px 5px #ccc;

}



.doodle {

width: 130px;

}



.smallgif {

width: 70px;

}



.date {

font-size: 12px;

color: #b28a9c;

text-align: right;

}



table {

width: 100%;

text-align: center;

border-collapse: collapse;

}



td {

padding: 4px;

border: 1px dotted #f0a6c8;

}



ul {

padding-left: 20px;

}



footer {

text-align: center;

padding: 30px;

color: #b07c94;

font-size: 13px;

}



.divider {

max-width: 400px;

}





img {

max-width: 100%;

}





a {

color: #db76a4;

}



a:hover {

color: #ff83ba;

}