/* ---------------------------------------- 
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: white;
}




@-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);}
        
}


.dp.blank div { 
    box-shadow: 15px 15px 30px black;
    background-color: white;
    border-radius: 0%;
    width: 75%;
    height: 100%;
    transform: rotate(90deg);
    margin-top: 0%;
    background-repeat: no-repeat;
    background-position: center;    
}



.rl.pink div{
    width: 50%;
    height: 100%;
    background-color: black;
    animation-name: rl-pinkchange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    position: absolute;
    border-style: none;
    left: 0px;
    top: 0px;
    animation-delay: 2s;
}


.change div{
    width: 200px;
    height: 200px;
    background-color: orange;
    animation-name: sa-pinkchange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.ny.lozenge {
    background-color: black;
    width: 200px;
    height: 200px;
    border-bottom-left-radius: 0%;
    border-top-right-radius: 0%
}
.ck2.example div {
    width: 50%;
    height: 100%;
    background-color: red;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    position: center;
    left: 0px;
    top: 0px;
    transform: rotate(0deg);
    border-style: none;
    animation-name: ck2-corner-color-change;
}