/* CSS Document */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,p.normal, p.blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
/* 

/*------------------------------------
   My style
 ------------------------------------*/
html {
	font: 2em/3 "Lucida Console";
	font-weight:300;
	font-size: 100%;
       
}



<style>



div.a {
    text-align: center;
}

div.b {
    text-align: left;
}

div.c {
    text-align: right;
} 

div.d {
    text-align: justify;
}

a:link {
    color:DeepViolet;
    font-family: "Lucida Console";
    font-stretch: “ultra-expanded";    
    font-size:1em;
    font-weight:50; 
    letter-spacing: 8px;
   
    opacity: 0.0;
    text-decoration:none;
    font-size: 120%;

}
a:visited {
    color:#b3b3ff;
    background-color: DeepViolet;
    text-decoration:none;
    font-size: 120%;
font-style: italic;
}
a:hover {
    color: #b3b3ff;
    font-size: 120%;
    font-style: italic;   
}
a:active {
    color: #b3b3ff;
    background-color:DeepViolet;
    font-size: 120%;
  font-style: italic;  
}


audio {
  width: 15%
  
}






</style>
body 
{
 background-image: url("");

}



/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    

position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}
{

font-family: "Lucida Console", bold;        
        text-align: justify;
        font-weight: bold;
       color: #b3b3ff;
background: url(); 
background: center;      
background-opacity: 0.0
        font-weight: normal|bold|bolder|lighter|number|initial|inherit;
}


img {
    position:center;
    opacity: 1.1;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    position:center;    
    opacity: 1.1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

img { 
   
}
button  { color: #b3b3ff;
background-color: transparent;
}







:root {
--midnight-green-eagle-green: hsla(188, 56%, 23%, 1);
--medium-turquoise: hsla(176, 56%, 55%, 1);
--mint-cream: hsla(120, 100%, 98%, 1);
--bittersweet: hsla(0, 100%, 71%, 1);
--naples-yellow: hsla(50, 10%, 71%, 1);
--dur: 30s;
}

 
circle:nth-of-type(1) {
  stroke: var(--bittersweet);
  animation:spin var(--dur) linear infinite;
  }

circle:nth-of-type(2) {
  stroke: var(--naples-yellow);
  animation:spin var(--dur) linear infinite reverse;
}

circle:nth-of-type(3) {
  stroke: var(--naples-yellow);
  animation:spin var(--dur) linear infinite;
}

circle:nth-of-type(4) {
  stroke: var(--midnight-green-eagle-green);
  animation:spin var(--dur) linear infinite reverse;
}

circle:nth-of-type(5) {
  stroke: var(--midnight-green-eagle-green);
  animation:spin var(--dur) linear infinite;
}




/* A constant bouncing motion effect applied to the title */
h1 {
  animation: bouncing 1.5s linear infinite alternate; 
}

/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion: reduce) {
  h2 {
    animation: fade 0.5s ease-in both;
   }
    
  circle:nth-of-type(1), circle:nth-of-type(2), circle:nth-of-type(3),circle:nth-of-type(4),{
    animation-play-state:paused;
  }
}


.wrap {
  width: 30em;
  margin: 2em auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1;
}



.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

@keyframes spin {
  100% {transform: rotate(360deg);}
}

@keyframes bouncing {
  50% {transform: translateY(20%);}
}

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

h1 {
	
	text-align: center;
color: #b3b3ff;
font-weight: bolder;	

opacity: 0.9;
	
	background: url();  
	font-weight:500;
	font-size:1.8em;
	font-family: "Lucida Console";
        font-stretch: "ultra-expanded";




}



p {
text-align: justify;
color: #b3b3ff;

font-stretch: 500;
font-weight: "bolder";
font-size:1.1em;
letter-spacing: 6px;

}




h2 {
  text-align: center;
color: #b3b3ff;
font-weight: bolder;

	background: url("");  
	
	padding: 24px;
	font-weight:300;
	font-size:1.6em;
	cursor:pointer;
	font-family: "Lucida Console";
        font-stretch: "ultra-expanded";
	-moz-transition: all .25s;
	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;


background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, rgb(white, pink)),
	color-stop(1, rgb(white, pink))
);
background: url("");
}


{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

h2 {
    position:center;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

h2:hover {
    position:center; 
   
    opacity: 0.8;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}



circle {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  }

footer {
    
    font-color: #b3b3ff;
    font-family: "Lucida Console";
    font-stretch: “ultra-expanded";     
    font-size:  1.3em;
    font-weight: light; 
    color: #b3b3ff;
    font-stretch: 800;    
    position: fixed;
    width:  100%;
    padding:    0px;
    margin-bottom:  2px;
    bottom: 2px;   

   
     
   
}

h2.selected {
	background: url("");  
	color:DeepPink;
        font-style: italic;
        
}
/*
#toggle:checked ~ p {
	height:auto;
	padding:24px;
	opacity:1;
}
#toggle:checked ~ label h2 {
	background:DeepViolet;
	color: DeepPink;
}
#toggle {
	position:absolute;
	appearance:none;
	cursor:pointer;
	left:-100%;
	top:-100%;
}
*/
p {    
	
        color: #b3b3ff;
        padding: 24px;
	position:relative;
	/*height:100%;
	opacity:0;*/
        background: url("");/* }
        color: #b3b3ff;

@media screen and (min-width: 992px) {
	h2:hover {
		background: url("");/* Old browsers */
		color: DeepViolet;
	background: url("");/* FF3.6+ */
		background: background: url(""); /* Chrome,Safari4+ */
		background: url(""); /* Chrome10+,Safari5.1+ */
		background: url(""); /* Opera 11.10+ */
		background: url(""); /* IE10+ */
		background: url(""); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='grey', endColorstr='p',GradientType=0 ); /* IE6-9 */
	}
	h2.selected:hover {
		background: url("");
		color: #b3b3ff;
	}
}