/* ===========================
      GENERAL
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#d9d5cf;
    background-image:url("images/background.png");
    background-size:cover;
    background-attachment:fixed;

    color:#2b2b2b;

    font-family:Georgia, serif;

}

/* ===========================
      TOP BAR
=========================== */

.top-decoration{

    height:55px;

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

    background-repeat:repeat-x;

    border-bottom:2px solid #575757;

}

/* ===========================
      CONTAINER
=========================== */

.container{

    width:1300px;

    margin:25px auto;

}

/* ===========================
      BANNER
=========================== */

.banner{

    position:relative;

    margin-bottom:25px;

    overflow:hidden;

    border:3px solid #555;

    box-shadow:6px 6px #8a8a8a;

}

.banner-image{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

}

.banner-title{

    position:absolute;

    bottom:20px;

    left:25px;

    background:rgba(240,236,229,.80);

    padding:15px 25px;

    border:2px solid #555;

}

.banner-title h1{

    font-family:"Cormorant Garamond", serif;

    font-size:48px;

    letter-spacing:3px;

}

.banner-title p{

    font-style:italic;

}

/* ===========================
      GRID
=========================== */

.grid{

    display:grid;

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

    gap:20px;

}

/* ===========================
      WINDOWS
=========================== */

.window{

    background:#f5f1eb;

    border-top:2px solid white;

    border-left:2px solid white;

    border-right:2px solid #585858;

    border-bottom:2px solid #585858;

    box-shadow:5px 5px #888;

    margin-bottom:20px;

}

/* ===========================
      TITLE BAR
=========================== */

.title-bar{

    background:linear-gradient(
        to right,
        #5d5b58,
        #8d8a84
    );

    color:white;

    padding:8px;

    font-family:"Special Elite", monospace;

    letter-spacing:2px;

    font-size:15px;

}

/* ===========================
      WINDOW CONTENT
=========================== */

.window-content{

    padding:18px;

    line-height:1.8;

}

/* ===========================
      PROFILE
=========================== */

.profile-pic{

    width:100%;

    border:2px solid #555;

    margin-bottom:15px;

}

/* ===========================
      LINKS
=========================== */

a{

    color:#444;

    text-decoration:none;

    display:block;

    padding:7px;

    transition:.25s;

}

a:hover{

    background:#d8d4ce;

    padding-left:15px;

}

/* ===========================
      LISTS
=========================== */

ul{

    margin-left:20px;

}

/* ===========================
      IFRAME
=========================== */

iframe{

    border:2px solid #555;

}

/* ===========================
      FOOTER
=========================== */

footer{

    text-align:center;

    margin-top:40px;

    padding:25px;

    color:#444;

    font-size:14px;

}

/* ===========================
      SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#d3d3d3;

}

::-webkit-scrollbar-thumb{

    background:#7b7b7b;

}

::-webkit-scrollbar-thumb:hover{

    background:#555;

}

/* ===========================
      HOVER
=========================== */

.window{

    transition:.25s;

}

.window:hover{

    transform:translateY(-3px);

}

/* ===========================
      TITLES
=========================== */

h2{

    font-family:"Cormorant Garamond", serif;

    margin-bottom:10px;

}

p{

    margin-bottom:12px;

}

.caption{

    margin-top:10px;

    text-align:center;

    font-style:italic;

    color:#555;

}

.gallery-image{

    width:100%;

    display:block;

    border:2px solid #555;

}