body{
  background-color: darkviolet;
}
.wrapper{
  max-inline-size: 900px;
  margin: auto;
}
.player{
  margin-block-start: 20px;
border: 10px solid white;
border-radius: 30px;
position: relative;
}
.player video{
  inline-size: 100%;
  aspect-ratio: 16/9;
  vertical-align: middle;
  object-fit: cover;
    border-radius: 20px;
}
.player-title{
 color: white;
 position: absolute;
 inset-block-start: 0;
 inset-inline-start: 20px;
}
.player-actions{
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.button{
  inline-size: 32px;
  block-size: 32px;
  margin: 5px;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.button:active{
  transform: scale(.9);
}
#play{
background-image: url(../icons/icons8-circled_play\ 1.svg);
color: darkviolet;
}
#pause{
background-image: url(../icons/icons8-pause_button\ 1.svg);
}
#adelantar{
  background-image: url(../icons/icons8-reset\ 1.svg);
}
  #retroceder{
    background-image: url(../icons/icons8-reset\ 2.svg);
}
    .player-progreso{
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      display: flex;
      padding: 10px;
}
    .player-progreso input{
      flex: 1;
}
.player-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: .3s opacity;
}
.player:hover .player-overlay{
  opacity: 1;
}

video{
  border: 10px;
}
.img1{
  width:100px;
  margin-bottom: -24px;
  margin-left: 400px;
}
.img2{
  width:80px;
  margin-bottom: ;
  margin-left: 1px;
}
.img3{
  width:100px;
  margin-bottom: ;
  margin-left: 10px;
}
h1{
display: flex;
justify-content: center;
align-items: center;
color: white;
}
h2{
display: flex;
justify-content: center;
align-items: center;
color: white;
}
h3{
display: flex;
justify-content: center;
align-items: center;
color: white;
}
p{
display: flex;
justify-content: center;
align-items: center;
color: white;
}
 footer{ 
	display: flex;
   	justify-content:center;
    	align-items: center;
   	background-color: var(--primary);
    	padding: 10px 0px;
    	font-size: 30px;
	margin-block: 10px;       
}
footer img {
   display: flex;
   align-items: center;
   width:30px;
   margin-left:15px;
   cursor: pointer;
   opacity: 1;
}

footer img:hover{
  border-radius:5px;
  background:#fff;
  width:40px;
  opacity: 0.8;


}


@media (max-width:500px){
  .img1{
  width:80px;
  margin-bottom: -24px;
  margin-left: 200px;
}
.img2{
  width:30px;
  margin-bottom: ;
  margin-left: 10px ;
}
.img3{
  width:80px;
  margin-bottom: ;
  margin-left: 5px ;
}

}

@media (max-width:400px){

footer{
  font-size:20px;
}
  .img1{
  width:80px;
  margin-bottom: -24px;
  margin-left: 150px;
}
.img2{
  width:40px;
  margin-bottom: ;
  margin-left: 10px ;
}
.img3{
  width:40px;
  margin-bottom: ;
  margin-left: 5px ;
}

}