body{
  margin:0;
  padding:0;
  background-color:white;
  color:white;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  font-size: 30px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
} 



.header {
    /*comment out any infor to make sure the css is linked up to the html*/
    height:100px;
    text-align:center;
    margin:30px;
    color: white;
}
.doors{
  margin-top:50px ;
  margin-left: 200px;
  margin-right:90px;

}
div {
  float:left;
  margin: 9px;
  text-align: center;
 

}
#door1{ 
    
    height:300px;
    width:100px;
    border:100px;
    border-color: black;  
    border-style: solid;
    border-width: 10px;
    margin-right: 0.5px;
    background-color: #979891; 
    cursor:help;
 }
#door2{ 
    
    height:300px;
    width:100px;
    border:100px;
    border-width: 10px;
    margin-left: 0.5px;
    border-color: black;  
    border-style: solid;
    background-color: #979891;
    cursor:help;
 }
#door3{ 
    
    height:300px;
    width:100px;
    border:100px;
    border-color: black;  
    border-style: solid;
    border-width: 10px;
    background-color: #979891; 
    transition-duration: 3s;
     cursor:pointer;
 }
#door3:active{
transform: perspective( 600px ) rotateY( -90deg );
transform-origin: left;
}

 #door4{ 
   
    height:300px;
    width:100px;
    border:100px;
    border-color: black;
    border-style: solid;
    border-width: 10px;
    margin-right: 0.5px;
    background-color: #979891;
    transition-duration: 2.5s;
    cursor:pointer;
 }
 #door4:active {transform: perspective( 600px ) rotateY( -80deg );
    transform-origin: left;}
 
 #door5{ 
    
    height:300px;
    width:100px;
    border:100px;
    border-color: black;
    border-style: solid;
    border-width: 10px;
    margin-left: 0.5px;
    background-color: #979891;
    transition-duration: 3.5s;
    cursor:pointer;

 }
 #door5:active{transform: perspective( 600px) rotateY( 80deg);
   transform-origin: right;}
 #door6{ 
  
    height:300px;
    width:100px;
    border:100px;
    border-color: black;
    border-style: solid;
    border-width: 10px;
    margin-right:0.5px;
    background-color: #979891;
    transition-duration: 8s;
    cursor:pointer;

 }
  #door6:active{transform: perspective( 600px ) rotateY( -45deg);
    transform-origin: left;}
 #door7{ 
  
    height:300px;
    width:100px;
    border:100px;
    border-color: black;
    border-style: solid;
    border-width: 10px;
    margin-left: 0.5px;
    background-color: #979891;
    transition-duration: 9s;
    cursor:pointer;
 }
 #door7:active{transform: perspective( 600px ) rotateY( 60deg);
 transform-origin: right;}
 .button {

    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline;
    font-size: 16px;
    margin: 4px 2px;
    cursor: ;
    padding-top: 100px;
    padding-right: 100px;
}



/*@media screen and (max-device-width: 640px){

.noshow{

    display:none;

}*/