/*
palette 
#381211
#6F2321
#AA4131
#E09485
#F8E5E1
*/

h1 {
  font-family: "UnifrakturCook", cursive;
  font-size: 40px;
  font-style: normal;
}

a {
    color:#E09485;
}

a:hover {
    color:#AA4131;
    font-style: italic;
}

body
{
   
background: #381211;
background: linear-gradient(25deg,rgba(56, 18, 17, 1) 0%, rgba(111, 35, 33, 1) 50%, rgba(224, 148, 133, 1) 100%);
    color:#f8e5e1;
    background-attachment: fixed; 
}

#pattern {
    background-image: url("https://www.transparenttextures.com/patterns/dark-circles.png");
    position:fixed;
    height:98%;
    width:99%;
}

#holder {
	height:500px;
	width:900px;
	background-color:#381211;
	margin:auto;
  border:outset 10px #4f0500;
}

@media screen and (max-width: 900px) {
    #holder {
    height:500px;
	width:auto;
	background-color:#381211;
	margin-left:auto;
    margin-top:20px;
    border:outset 10px #610b00;
    overflow-x: scroll;
    }
}

#sidebar {
    height:85%;
    width:200px;
    border:solid #610b00 5px;
    padding:5px;
    padding-top:-100px;
    overflow-y: scroll;
    font-family: "Jersey 20", sans-serif;
    font-weight: 20px;
    font-style: normal;
}

#scrolltext {
    height:400px;
    width:650px;
    border:solid 5px #610b00;
    margin-left:225px;
    margin-top:-420px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding:5px;
}

details > summary {
    color:#6F2321;
    background: #AA4131;
    background: linear-gradient(25deg,rgba(170, 65, 49, 1) 0%, rgba(248, 229, 225, 1) 100%);
    border:solid #381211 4px;
    width:fit-content;
    padding:6px;
}

details > p {
    
    margin-left:20px;
    
}