* {
    box-sizing:border-box;
}

@font-face {
    font-family: "elen";
    src: url("actual-c/broken-up.ttf");
}

p {
 color: red;
}

img {
    max-width:100%;
}

body {
    background: rgb(246,137,31);
    animation: colors 5s infinite alternate;
}

@keyframes colors {
    0%{
    background: rgb(246,137,31);
    }
    100% {
    background: rgb(225, 255, 0);
    }
}

.container {
    display:flex;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.box {
    display: flex;
    position: absolute;
    top: 5%;
    width: 90%;
    height: 90%;
    background: rgb(82,0,3);
    animation: color 5s infinite alternate;
}

@keyframes color {
    0%{
    background: rgb(82,0,3);
    }
    100% {
    background: rgb(0, 0, 0);
    }
}

.box2 {
    display: flex;
    position: absolute;
    top: 10%;
    right: 10%;
    width: 80%;
    height: 80%;
    background: rgb(246,137,31);
    animation: colors 5s infinite alternate;
}

@keyframes colors {
    0%{
    background: rgb(246,137,31);
    }
    100% {
    background: rgb(254, 255, 232);
    }
}

.box3 {
    display: flex;
    position: absolute;
    top: 15%;
    right: 15%;
    width: 70%;
    height: 70%;
    background: rgb(82,0,3);
    animation: color 5s infinite alternate;
}

@keyframes color {
    0%{
    background: rgb(82,0,3);
    }
    100% {
    background: rgb(0, 0, 0);
    }
}

.box4 {
    display: flex;
    position: absolute;
    top: 20%;
    right: 20%;
    width: 60%;
    height: 60%;
    background: rgb(246,137,31);
    animation: colors 5s infinite alternate;
}

@keyframes colors {
    0%{
    background: rgb(246,137,31);
    }
    100% {
    background: rgb(229, 0, 8);
    }
}

.box5 {
    display: flex;
    position: absolute;
    top: 25%;
    right: 25%;
    width: 50%;
    height: 50%;
    background: rgb(82,0,3);
   animation: color 5s infinite alternate;
}

@keyframes color {
    0%{
    background: rgb(82,0,3);
    }
    100% {
    background: rgb(0, 0, 0);
    }
}

.box6 {
    display: flex;
    position: absolute;
    top: 30%;
    right: 30%;
    width: 40%;
    height: 40%;
    background: rgb(246,137,31);
    animation: colors 5s infinite alternate;
}

@keyframes colors {
    0%{
    background: rgb(246,137,31);
    }
    100% {
    background: rgb(229, 0, 8);
    }
}

.box7 {
    display: flex;
    position: absolute;
    top: 35%;
    right: 35%;
    width: 30%;
    height: 30%;
    background: rgb(82,0,3);
   animation: color 5s infinite alternate;
}

@keyframes color {
    0%{
    background: rgb(82,0,3);
    }
    100% {
    background: rgb(0, 0, 0);
    }
}

.box8 {
    display: flex;
    position: absolute;
    top: 40%;
    right: 40%;
    width: 20%;
    height: 20%;
    background: rgb(246,137,31);
    animation: colors 5s infinite alternate;
}

@keyframes colors {
    0%{
    background: rgb(246,137,31);
    }
    100% {
    background: rgb(229, 0, 8);
    }
}

.box9 {
    display: flex;
    position: absolute;
    top: 45%;
    right: 45%;
    width: 10%;
    height: 10%;
    background: rgb(82,0,3);
   animation: color 5s infinite alternate;
}

@keyframes color {
    0%{
    background: rgb(82,0,3);
    }
    100% {
    background: rgb(0, 0, 0);
    }
}

a {
    text-decoration: none;
}
.control {
    position: relative;
    align-content: center;
    width: 50%;
    left: 31px;
    top: 2px;
}