html,body
{
height:100%;
margin:0;
}

body
{
display:flex;
flex-direction:column;
width:90%;	
background:	rgb(0,0,0,0.9);
margin-left:5%;
border-radius: 3px;
box-shadow: inset 10px 10px 50px white;
}

/* header */
.header
{
height:40%;
width:99.6%;
background:rgb(0,0,0,0.9);
margin-bottom:1.2rem;
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 10px 50px purple;
}

.thriller
{
font:normal 3em algerian; 
color:purple;
text-align:center;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .1em;
text-shadow: -1px 1px 1px white;
}
/* end of header */


/* start of links 
.link
{
display:flex;
justify-content:space-evenly;	
font-size:1rem;	
margin-bottom:2rem;
}
*/
.a-tags
{
margin-bottom: 1.3rem;
}

a
{
text-decoration: none;
padding: 12px 24px;
font:normal 1em algerian; 
color:purple;
background:#333;
text-shadow:-1px 1px 1px white;
border-radius: 3px;
transition: background 0.5s linear 0s, color 0.5s linear 0s;
}

a:hover
{   
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 60px 70px purple;
color:#FFF;	
}
/* end of link */


.main-wrapper
{
display:flex;    
width:98.4%;
background:rgb(0,0,0);
color:white;
padding-left:14px;
padding-top:10px;
line-height:22px; 
border-radius: 5px;
border:3px solid purple;
box-shadow: inset 10px 60px 70px purple;	
}

/*aside starts here*/
aside.about
{
display:inline;	
float:right;
width:17%;
background-color:black;
margin:1pt 6pt 3pt 6pt; 
padding:4pt 0;
text-align:center;
color:purple;
border:3px solid purple;
box-shadow: inset 10px 10px 20px purple;	
}

.content
{
width:60%;
margin: 0 auto;
padding:5px;
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 60px 70px purple;
}

.real
{
font:normal 2em algerian;
color:purple;
text-align:center;
line-height: 1em;
text-transform: upper-case;
letter-spacing:.3em;
margin-top:10px;
margin-bottom:10px;
text-shadow: 1px 1px 1px white;
}


/* colunms */
.col1
{
display:flex;	
border: 8px solid DarkMagenta; 
background:rgb(0,0,0);

color:white;
width:50%;
padding:20px;
border-radius: 5px;
box-shadow: inset 10px 60px 120px purple;
}

.color
{
color:purple;
}


.col2
{
background:	rgb(0,0,0,0.9);
border: 8px solid DarkMagenta;
height:auto;
color:white;
padding:20px;
margin-left:56%;
min-height:200vh;
border-radius: 5px;
box-shadow: inset 10px 60px 70px purple;
}
/* end of colunms */


/*******start of accordation**********/
.accordion 
{
color: #FFF0F5;
cursor: pointer;
/*padding: 18px;*/
width: 100%;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom:5px;
border: .3px solid white;
box-shadow: inset 10px 60px 70px purple;
}

.active, .accordion:hover 
{
background-color: #000; 
}

.panel 
{
padding: 0 18px;
display: none;
background-color: #BA55D3;
overflow: hidden;
box-shadow: inset 10px 60px 70px;
}

Button
{
margin-top:20px;	
}

/* Add a card effect */
.card1 
{
background-color: black;
color: white;
padding: 10px;
margin-top: 20px;
}
/******end of accordation*********/


.dun
{
color:purple;
padding: 03px 35pt 0px 656px;
}

.racism
{
font:normal 1.5em Algerian;
color:purple;
text-align:center;
line-height: 1em;

letter-spacing:.3em;
margin:0;
text-shadow:-1px 1px 1px black;
}

.story
{
font:normal 1.5em Algerian;
color:purple;
text-align:center;
line-height: 1em;

letter-spacing:.3em;
margin:0;
text-shadow:-1px 1px 1px white;
}

.technique
{
font:normal 1.0rem Algerian;
color:purple;
line-height: 1.5em;
letter-spacing:.3em;
text-shadow:1px 1px 1px white;
}


/* box-container */
div.box-container
{
display:flex;
display:space-evenly;	
border: red solid 1px;		
width:100%;
}

.box-1
{
border: red solid 1px;	
background-color:black;	
width:12rem;
height:16rem;

}

.box-2
{
border: red solid 1px;	
background-color:black;	
width:12rem;
height:16rem;	
}

.box-3
{
border: red solid 1px;	
background-color:black;	
width:12rem;
height:16rem;
}



/*MAIN WEBPAGE STYLING END*/
/*details > summary {
  color:purple;
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}*/

/******Footer start************/
.f
{
border: 8px solid DarkMagenta;
padding-left: 16px;
padding-top: 16px;
border:8px solid purple;
background:rgb(0,0,0);
width:98%;
margin-top:20px;
min-height:40vh;
border-radius: 5px;
box-shadow: inset 10px 60px 100px purple;
}

.clockStyle 
{	
background-color:#000;
padding: 6px;
color:purple;
font-family: "arial black",  gadget , sans-serif;
font-size:16px;
font-weight:bold;
width:150px;
box-shadow:
10px 10px 10px black;
}
/**********footer end ************/

.pay
{
width:100px;
}



/*****MEDIA QUERY*****/
@media screen and (max-width: 400px)
{
body
{
display:flex;
flex-direction:column;
width:100%;	
background:	rgb(0,0,0,0.9);
margin-left:5%;
border-radius: 3px;
box-shadow: inset 10px 10px 50px white;
}	
	
/* Start of the Header */
.header 
{
height:65%;
width:100%;
background:rgb(2,0,3,0.9);
margin-bottom:1.2rem;
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 10px 50px purple;
}

.thriller
{
font:normal 2em algerian; 
color:purple;
text-align:center;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .1em;
text-shadow: -1px 1px 1px white;
}
/* End of the Header */

/* Start of the a Tags*/
.a-tags
{
margin-bottom: 1.3rem;
}

a
{
text-decoration: none;
padding: 10px 22px;
font:normal 1.2em algerian; 
font-weight:400; 
color:purple;
background:#333;
text-shadow:10px 1px 29px white;
border-radius: 3px;
transition: background 0.5s linear 0s, color 0.5s linear 0s;
}

a:hover
{   
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 60px 70px purple;
color:#FFF;	
}
/* End of the a Tags*/


/* Aside Starts Here*/
aside.about
{
display:none;
}

/* Start the main wrapper*/
.main-wrapper
{	
width:100%;
background:rgb(0,0,0);
color:white;
padding-left:14px;
padding-top:10px;
line-height:22px; 
border-radius: 5px;
border:3px solid purple;
box-shadow: inset 10px 60px 70px purple;	
}

.content
{
width:80%;
margin:0 auto;
padding:5px;
border-radius: 3px;
border-left:3px solid purple;
border-right:3px solid purple;
box-shadow: inset 10px 60px 70px purple;
}
 

.f
{
/*background:rgb(255, 0, 0);*/	
}

}