@charset "UTF-8";

body{
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    background-image: url("../images/99_outtake/11.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
h1{
    color: white;
    text-shadow: 0px 0px 15px white,5px 5px 10px white;
    position: relative;
    left: 20%;
    right: auto;
}

#box1{
    border: 5px solid;
    border-radius: 25px 0px 25px 25px;
    color: beige;
    width: 150px;
    height: 150px;
    font-size: 125px;
    padding: 10px;
    margin: 15px;
    text-align: center;
    text-decoration: none;
    animation: 5s ease-in 1s infinite running myRotate;
    visibility: hidden;
}

@keyframes myAnimation{
    from{margin-left: 100%;}
    to{margin-left: 0%;}}
 
@keyframes myRotate{
        100%{transform: rotateZ(360deg);}  
}
#box1:link{color: lightgray;}
#box1:visited{color:darkslategray;}
#box1:hover{color:red;}
#box1:active{color:darkgreen;}

#box2{
    width: 180px;
    height: 150px;
    color: beige;
    font-size: 125px;
    text-align: center;  
    animation: 5s myRotate;

}

footer{
    position: fixed;
    left: 50%;
    bottom: 5px;
    color: white;
    font-size: 10px;
}





@media (max-width: 450px){
    #box1{font-size: 50px;
    position: fixed;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,-50%)}
}


@media (min-width:451px) and (max-width:750px){
    #box1{
        position: relative;
        left: 20%;
        top: 60px;
        
    }
}