body{
  

    background-image: url("images/wallpaper.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    background-attachment: fixed;

    background-color: #160303;

    color: #f5dcdc;

    font-family: Georgia, serif;

    margin: 40px;


}

h1{
    color:#ffbcbc;
}

a{
    color:#ff8b8b;
}

a:hover{
    color:white;
    
}
.sidebar{

    position:fixed;

    left:20px;

    top:20px;

    width:180px;

    background:#300808;

    padding:20px;

    border:2px solid #7c2020;

}

.content{

    margin-left:250px;

}    
.menu{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#f5dcdc;

    background:#3b0a0a;

    border:2px solid #7d2323;

    border-radius:10px;

    padding:12px;

    margin-bottom:15px;

    transition:0.3s;
    
    

}
.menu:hover{

    background:#631414;

    transform:translateX(8px);

}

.menu img {
    height: 3em;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}


body {
    cursor: url("images/cursor.gif"), auto;
}

a {
    cursor: url("images/cursor.gif"), pointer;
}


.gallery{

    display:grid;

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

    gap:25px;

    margin-top:35px;

}

figure{

    background:#2b0808;

    padding:15px;

    border:2px solid #732020;

    border-radius:12px;

    text-align:center;

    transition:.3s;

}

figure:hover{

    transform:translateY(-6px);

    box-shadow:0 0 18px rgba(0,0,0,.5);

}

figure img {

    width: 300px !important;

    border: 8px solid hotpink !important;

    display: block;

}



figcaption{

    margin-top:12px;

    color:#d6b0b0;

    font-style:italic;

    font-size:.95em;

}


.gallery-intro{

    max-width:650px;

    margin-bottom:35px;

    line-height:1.7;

}



/* ===========================
   HOMEPAGE
=========================== */

.content{

    position:relative;

    max-width:1000px;

    margin-left:260px;

}


/* Welcome */

.welcome{

    background:#2d0909;

    border:2px solid #7f2525;

    padding:20px;

    margin-bottom:25px;

}


/* Four boxes */

.grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.box{

    background:#240707;

    border:2px solid #6e1c1c;

    padding:18px;

    min-height:180px;

    transition:.3s;

}

.box:hover{

    transform:translateY(-5px);

    box-shadow:0 0 12px rgba(0,0,0,.4);

}


/* Decorative corner */

.corner1{

    position:absolute;

    top:-25px;

    right:0;

    width:110px;

}


/* Pagedoll */

.pagedoll{

    position:fixed;

    bottom:25px;

    right:30px;

    width:180px;

}


/* Blinkies */

.blinkies{

    margin-top:40px;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.blinkies img{

    height:31px;

}


/* Headings */

h1{

    font-size:48px;

    margin-bottom:10px;

}

h2{

    color:#ffd3d3;

}

h3{

    margin-top:0;

    color:#ffbebe;

}




