p{
    background-color:black;
    text-align: center;
    font-family: Arial;
    font-size: 25px;
    filter:opacity(85%);
}
h1, h2, h3{
    text-align:center;
    color:white;
    background-color:DarkGrey;
}
h1{
    background-color:black;
    color:white;
    
}
body{
    background-image:url("https://codehs.com/uploads/abd29c5f9510f7a8c65dda40b0ea0fda");
    
}
img{

    height: 100px;
    border-style: solid;
    border-width: 10px;
    background-color: white;
    
}
.IWO{
      position:relative;
 display: block;
   height:100px;
    text-align: center;

}
.IWO-text{
    visibility: hidden;
     width: 200px;
    background-color: black;
    color: #ffffff;
    text-align: center;
    border-radius:6px; 
    position:relative;
    z-index: 1; 
    right:-600px;
    top: -200px ;
    padding: 9px;
     display: table-caption;
}
.IWO:hover .IWO-text{
    visibility: visible;
}
.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}
 
 iframe{
     height:300px;
     width:25%;
     position:center;
     border-width:5px;
     border-color:black;
    }
    .title{
            font-weight:bold;
            color:maroon;
        }
        
        r{
           width:400px;
           height:400px;
        }
         .center img{
    margin-left:-21px;
    margin-top:-20px;
    filter: hue-rotate(100deg);
    }

  #center-text img:hover{
    filter:hue;
    filter: none;
    animation: hue 3s infinite;
    }
    
   div.square:active {
    transform: rotate(360deg);
    width: 200px;
    height: 200px;
}



img.interactive-image:active {
    height: 320px;
    filter: invert(100%);
    display: block;
  margin-left: auto;
  margin-right: auto;
}