body
{
background-color:rgb(140, 90, 32);
}

/* header */
.header
{
background: rgb(152,131,116);
height:60px;
width:99.6%;
border-radius: 13px;
border-right: 3px solid #c49f74;
border-left: 3px solid #c49f74;
box-shadow: inset 5px 5px 20px #c49f74;
}

/*All the aside starts here*/
/* had to build a parent container to 
{float:right} the asides in position */
.aside
{
float:right;
width:20%;
background: rgb(152,131,116);
margin-right:5%;
margin-top: 2%;
padding: 2%;
border-radius:10px;
border-left:2px #c49f74;
border-right:2px #c49f74;
box-shadow: inset 5px 5px 20px #c49f74;	
}

.accord
{
margin:5% 2% 5% 0;	
box-shadow: inset 5px 5px 20px #c49f74;
border-radius: 4px;
}
/*Aside end here*/




.thriller
{
font:normal 3em algerian; 
text-align:center;
text-transform: uppercase;
line-height: 1.3em;
}
/* end of header */


.accordion 
{
background: rgb(152,131,116);
color: #000;
cursor: pointer;
width: 60%;
border: none;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom:5px;
margin-left:10px;
border-radius:10px;
padding-left: 3px;
border-right: 3px solid #c49f74;
border-left: 3px solid #c49f74;
box-shadow: inset 5px 5px 20px #c49f74;
}

.active, .accordion:hover 
{
background-color: #4f2d06; 
color:white;
}

.panel 
{
font-size:15px;	
padding: 0 10px;
display: none;
background-color: black;
overflow: hidden;
border-radius:10px;
width:58.1%;
margin-left:11px;
}


Button
{
margin-top:20px;	
}


/* Add a card effect */
.card1 
{
font-size:1rem;	
background-color: #4f2d06;
color: white;
padding: 10px;
margin-top: 10px;
border-radius:7px;
width:97%;
}

label
{
font-size:1.2rem
}


input[type="text"],input[type="email"]
{
width:26.3%;
height:1.7rem;
margin-bottom:10px;
}


/* Footer */
.footer 
{
font-size:2rem;
height:130px;
border-radius: 13px;
padding: 20px;
background: rgb(152,131,116);
margin-top: 20px;
border-left:3px solid #c49f74;
border-right:3px solid #c49f74;
box-shadow: inset 5px 5px 20px #332412;
}

.foot
{
margin:5% 2% 1% 0;	
box-shadow: inset 5px 5px 20px #c49f74;
padding:10px;
border-radius: 3px;
}


details > summary 
{

padding-top:1.8%;
width: 30%;
color:white;
cursor: pointer;
box-shadow: 5px 1px 7px #bbbbbb;
 
}



/*columns*/ 
.col1
{
background: rgb(152,131,116);	
border-right: 3px solid #c49f74;
float:left;
color:#000;
width:46%;
padding:20px;
border-radius: 5px;
box-shadow: inset 5px 5px 20px #332412;
}

.col2
{
background: rgb(152,131,116);
border-right: 3px solid #c49f74;
color:#000;
padding:20px;
margin-left:51%;
border-radius: 5px;
box-shadow: inset 5px 5px 20px #332412;
}
/* end of colunms */


/*blinking*/

.smooth-blink 
{
/* Adjust the '1s' to make it blink faster or slower */
animation: fade-blink 5s linear infinite; 
font-family: sans-serif;
color: black;
font-weight: bold;
}

@keyframes fade-blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

.smooth-blink:hover 
{
color:white;
}