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

body{

background:#261929;

background-image:url("images/paper.jpg");
/* CHANGE YOUR BACKGROUND HERE */

background-size:cover;
background-attachment:fixed;

font-family:'#ffffff Text',serif;

color:#ffffff;

}

#container{

width:1050px;

margin:40px auto;

display:grid;

grid-template-columns:220px auto;

grid-template-rows:auto auto;

gap:20px;

}

header{

grid-column:1/3;

text-align:center;

padding:25px;

background:rgba(120, 72, 134, 0.82);

border:1px solid #ffffff;

}

.header-image{

width:220px;

margin-bottom:15px;

}

h1{

font-family:'Cinzel',serif;

letter-spacing:3px;

font-size:34px;

color:#ffffff;

}

.quote{

margin-top:10px;

font-style:italic;

color:#ffffff;

}

nav{

background:rgba(125, 74, 146, 0.82);

padding:20px;

border:1px solid #ffffff;
height: 390px;

}

nav h3{

margin-bottom:20px;

font-family:'Cinzel';

color:#ffffff;

}

nav a{

display:block;

padding:6px;

color:#c89bc6;

text-decoration:none;

}

nav a:hover{

color:#fff4d2;

padding-left:10px;

transition:.3s;

}

nav hr{

margin:20px 0;

border:none;

border-top:1px solid #ffffff;

}

main{

background:rgba(140, 74, 144, 0.82);

padding:30px;

border:1px solid #ffffff;

}

h2{

font-family:'Cinzel';

margin-bottom:15px;

color:#d47dd7;

}

p{

line-height:1.8;

margin-bottom:18px;

}

ul{

margin-left:20px;

line-height:2;

}

.cards{

width:200px;

display:flex;

gap:20px;

margin-top:20px;

margin-bottom:20px;

}

.card{

flex:1;

padding:20px;

background:#6f50a3;

border:1px solid #ffffff;

text-align:center;

}

.card h4{

margin-bottom:10px;

font-family:'Cinzel';

color:#d77dcf;

}

.button-chaos {
    position: relative;
    width: 100%;
    height: 430px;

    margin-top: 20px;
    margin-bottom: 20px;

    overflow: visible;
}


.scattered-button {
    position: absolute;

    width: 140px;
    height: auto;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

    transform-origin: center center;

    filter: drop-shadow(3px 4px 2px rgba(0,0,0,0.5));
}


/* INDIVIDUAL POSITIONS */

.scattered-button:nth-child(1) {
    left: 5%;
    top: 30px;

    width: 145px;

    transform: rotate(-8deg);
}


.scattered-button:nth-child(2) {
    left: 42%;
    top: 130px;

    width: 125px;

    transform: rotate(6deg);
}


.scattered-button:nth-child(3) {
    right: 5%;
    top: 20px;

    width: 150px;

    transform: rotate(-12deg);
}


/* Hover */

.scattered-button:hover {

    filter:
        drop-shadow(5px 7px 3px rgba(0,0,0,0.6))
        brightness(1.1);

    z-index: 50;
}
footer{

width:1050px;

margin:30px auto;

text-align:center;

padding:20px;

background:rgba(142, 78, 135, 0.82);

border:1px solid #f8f8f8;

font-size:15px;

color:#ffffff;

}

@media(max-width:900px){

#container{

width:95%;

display:block;

}

header,
nav,
main,
footer{

margin-bottom:20px;

width:100%;

}

.cards{

display:block;

}

.card{

margin-bottom:20px;

}

}