*{
    transition: 0.5s;
}

body{
    background-color: rgb(97, 164, 226);
}

h1{
    font-size: 50px;
    position: relative;
    top:-35px;
    left: 65px;
    color:white;
}

#banner {
    width: 350px;
    height: 150px;
    position: relative;
    padding: 10px;
    margin: 10px;
    background-color: rgb(97, 164, 226);
}

#device {
    background-image: url("img/tech.png");
    background-repeat: no-repeat;
    background-size: 280px ;
    width: 280px;
    height: 288px;
    position: relative;
    background-color: rgb(97, 164, 226);
    left: 80px;
    top: -50px;
}

#pause {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 250px;
    left: 310px;
}

#b1 {
    width: 17px;
    height: 22px;
    position: absolute;
    top: 116px;
    left: 89px;
    transition: .5s;
    animation-name: play;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b2 {
    width: 15px;
    height: 21px;
    position: absolute;
    top: 90px;
    left: 91px;
    transition: .5s;
    animation-name: roto1;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b3 {
    width: 15px;
    height: 43px;
    position: absolute;
    top: 45.5px;
    left: 90px;
    transition: .5s;
    animation-name: roto2;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b4 {
    width: 45px;
    height: 50px;
    position: absolute;
    top: -43px;
    left: 198px;
    transition: .5s;
    animation-name: knob1;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b5 {
    width: 133px;
    height: 214px;
    position: absolute;
    top: 1px;
    left: 147px;
    transition: .5s;
    animation-name: knob2;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}


#tape{
    height: 230px;
    width: 400px;
}
.container{
    position: relative;
    top: 310px;
    left:-35px;
    display: none;
}

.f1{
    transition: 0s;
    transition-duration: 0s;
    position:fixed;
    top: 470px;
    left: 70px;
    width: 350px;
    height: 363px;
    color: rgb(27, 27, 27);
    font-size: 20px;
    padding: 11px;
    display:none;
}

.f2{
    transition: 0s;
    transition-duration: 0s;
    position:fixed;
    width: 360px;
    height: 120px;
    top: 495px;
    left: 60px;
    color: rgb(27, 27, 27);
    font-size: 20px;
    padding: 10px;
    display:none;
}

.f3{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 360px;
    height: 160px;
    top: 15px;
    left: 7px;
    color: rgb(27, 27, 27);
    font-size: 20px;
    padding: 20px;
    display:none;
}

.f4{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 360px;
    height: 160px;
    top: 20px;
    left: 7px;
    color: rgb(27, 27, 27);
    font-size: 20px;
    padding: 20px;
    display:none;
}

.f5{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 360px;
    height: 160px;
    top: 15px;
    left: 7px;
    color: rgb(27, 27, 27);
    font-size: 20px;
    padding: 20px;
    display:none;
}

@keyframes roto1 {
    0% {margin-left:0px;}
    30% {margin-left:-10px;}
    50% {margin-left:-10px;}
    80% {margin-left:0px;}
}
@keyframes roto2 {
    0% {margin-left:0px;}
    40% {margin-left:-10px;}
    50% {margin-left:-10px;}
    60% {margin-left:0px;}
}
@keyframes knob1 {
    0% {margin-top:0px;}
    10% {margin-top:-20px;}
    30% {margin-top:-20px;}
    40% {margin-top:0px;}
}
@keyframes knob2 {
    0% {transform: scale(1);}
    40% {transform: scale(1);;}
    50% {transform: scale(1.1);}
    60% {transform: scale(1);}
}
@keyframes play {
    0% {margin-left:0px;}
    50% {margin-left:-10px;}
    60% {margin-left:-10px;}
    70% {margin-left:0px;}
}