/* ---------------------------------------- 
Natasha
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
    background-color: blue;
}


div  {
    
    position: relative;
    background-color: relative;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;

}

@-webkit-keyframes example {

    0%   {left:0px; top:0px; }
    25%  { left:100px; top:0px;}
    50%  { left:0px; top:0px;}
    75%  { left:100px; top:0px;}
    100% { left:0px; top:0px; transform: rotate(180deg);}
        
}



div:hover {
    background-color: red;

    box-shadow: 10px 30px 50px 80px rgb(50,55,100);
    opacity: 10%;
animation-duration: infinite;

        animation: th-spin 0.5s infinite linear;
        animation-direction: reverse;

}

    

.lozenge {

   background-color: yellow;
    width: 400px;
    height: 400px;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 50%
    }



.lozenge2  {
    background-color: transparent;
    width: 200px;
    height: 200px;
    border-radius: 50%

 }



.mz.swimring {
   
    background: none;
    animation-name:mzrotatee;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    cursor:crosshair;
    animation-timing-function: ease;
    background-image: url(../images/swim.png) ;
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;

}