/*CSS Stylesheet*/

/*
* {
border: 1px solid black;
}
*/

body { 
    margin: 0;
    overflow: hidden;
}
img { max-width: 100%;}

section {
  border: none;
  min-height: 110vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#title{
border: none;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
padding-bottom: 255px;
}

svg {
float: right;
padding-left: 550px;
padding-bottom: 150px;
/*min-height: 400px;*/
 }

#song{
color: white;
font-size: 300px;
font-family: 'Amatic SC', cursive;
margin: 0;
filter: drop-shadow(0 0 0.75rem black); 
}

#verse{
font-family: 'Indie flower', cursive;
font-size: 50px;
color: white;
margin: 0; 
animation: blink 1s infinite alternate ease-in-out;
}

#verse1{
font-family: 'Amatic SC', cursive;
color: white;
font-size: 35px;
display: flex;
flex-direction: column;
margin: 0px;

    
}

#btn:after{
content: 'Press Me'    
}
#btn:hover:after{
content: 'Lets Begin'    
}


#One{
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Two{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Three{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Four{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Five{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Six{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Seven{
    flex-direction: column;
    justify-items: center;
    align-items:flex-start;
    padding-left: 250px;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;
}
#Eight{
    flex-direction: column;
    justify-items: center;
    align-items:center;
    background-image: url(images/BACKGROUND2.png);
    background-size: cover;
    background-attachment: fixed;  
}

#man{
position: relative;
animation: drive 2s infinite;
}
#Layer_2{
position: relative;
animation: drive 2s infinite;
}
    
@keyframes drive{
        0% {left: 0px; top: 0px;}
        100% {left: 200px; top: 0px;}
}




#btn {
    align-items:baseline;
    color: white;
    margin:0;
    display: flex;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
    background: none;
    border: none;
    font-size: 30px;
    font-family: 'Shadows Into Light', cursive;
    
}
#btn2 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn3 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn4 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn5 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn6 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn7 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}
#btn8 {
    flex-direction: row;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    margin-top: 25px;
/*    margin: 100px;*/
/*    margin-left: */
    opacity:0.5;
    animation: blink 1s infinite alternate ease-in-out;
}

@keyframes blink{
0%{opacity:1;}
100%{ opacity: 0.2;}
    
#wrapper {
 max-width: 1180px;
    margin: 0 auto;
}      
    
svg {
    width: 500px;
}
circle {
    fill: none;
    stroke: purple;
    stroke-width: 12;
}
#pizzaman{
width:400px;
height:400px;
}
#superman{
width:300px;
height:300px;
}
#jackie{
width:300px;
height:300px;       
}    
    
#michaeljordan{
width:300px;
height:300px;
}
#michael{
width:300px;
height:300px;       
}
#fairydust{
width:300px;
height:300px;       
}
    
@keyframes drive {
0%   {left:0px; top:0px;}
100%  {left:200px; top:0px;}
}