html, body {
  width: 100%;
  height: 100%;
  background-color: #7923dc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe-UI-Light-TTF';
}

.container {
  width: 80%;
  height: 80%;
}

.carousel {
  border: 0px solid rgb(212, 212, 212);
  border-radius: 8px;
}
#play-btn
{
	width:12% !important;
	border-color: #7923dc00;
	background-color: #7923dc00;
	border-radius: 10px !important;
}
#pause-btn
{
	width:10% !important;
	
	background-color: #7923dc75;
}
#mute-btn
{
	width:12% !important;
	border-color: #7923dc00;
	background-color: #7923dc00;
	border-radius: 10px !important;
}
#speed-btn
{
	width:12% !important;
	border-color: #7923dc00;
	background-color: #7923dc00;
	border-radius: 10px !important;
}
#play-btn1
{
	width:10% !important;
	border-color: #ffffff;
	background-color: #7923dc75;
}
#pause-btn1
{
	width:10% !important;
	
	background-color: #7923dc75;
}
#mute-btn1
{
	width:10% !important;
	border-color: #ffffff;
	background-color: #7923dc75;
}

.carousel-inner, .carousel, .carousel-item, .carousel-container {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
}

.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}

.carousel-indicators {
  top: -510px;
  margin: auto;
  height: 20px;
  right: 10px;
  left: auto;
  display: block;
}

.carousel-indicators [data-bs-target] {
  background: none;
  border: 2px solid rgb(212, 212, 212);
  border-radius: 12px;
  width: 6px;
  height: 6px;
  margin-bottom: 3px;
}

.carousel-indicators li.active {
  background: rgb(212, 212, 212);
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
  position: fixed;
  top: 76%; /*95*/
  left: 50%;
  transform: translate(-50%, 30%) rotate(90deg); /*al posto di 24 c'era 50*/
  z-index: -1;
}

.carousel-control-prev-icon {
  top: 5%;
}

.unclickable {
  pointer-events: none;
}

.clickable {
  pointer-events: all;
}

.btn-style {
  border-color: rgb(212, 212, 212);
  content: url("./images/GitHub-Mark-Light-120px-plus.png");
  width: calc(1.475rem + 2.7vw);
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px;
}

.btn-style:hover {
  background-color: black;
  content: url("./images/GitHub-Mark-Light-120px-plus.png");
  width: calc(1.475rem + 2.7vw);
}

.img-style {
  width: calc(1.475rem + 2.7vw);
}

.img-style:hover {
  width: calc(1.475rem + 2.7vw);
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3 both;
	        animation: jello-horizontal 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3 both;
}

/*Css per i controlli video*/
.video-container {
  width: 640px;
  margin: 0 auto;
  padding: 2px;
  text-align: center;
  background-color: #1e293b;
  border-radius: 5px;
}

#video
{
	position: relative;
}

#video-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  background-color: #1e293b00;
  position: absolute;
  top: 92%;
}
#video-controls-audio {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  background-color: #1e293b00;
  position: absolute;
  top: 9%;
}

#video-controls button,
#video-controls input[type="range"] {
  margin: 5px;
  border-radius: 17px;
 
}

#video-controls-audio button,
#video-controls-audio input[type="range"] {
  margin: 5px;
  border-radius: 10px;
  padding: 1px;
}



input[type="range"] {
  width: 200px;
}
/*fine controlli*/






 @-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@media screen and (max-width: 140em) {
	 
	   	.logonav
	{
	    width: 16% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 50% !important;
	}
	}
	@media screen and (max-width: 130em) {
	 
	   	.logonav
	{
	    width: 18% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 50% !important;
	}
	}
	@media screen and (max-width: 120em) {
	 
	   	.logonav
	{
	    width: 18% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 60% !important;
	}
	}
	@media screen and (max-width: 110em) {
	 
	   	.logonav
	{
	    width: 18% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 60% !important;
	}
	}
@media screen and (max-width: 100em) {
	 
	   	.logonav
	{
	    width: 18% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 60% !important;
	}
	}
  @media screen and (max-width: 94em) {
	 
	   	.logonav
	{
	    width: 20% !important;
	}
	.pulsantenav
	{
		width: 8% !important;
	}
	.imgpulsante
	{
		width: 60% !important;
	}
	}
@media screen and (max-width: 84em) {
	 
	   	.logonav
	{
	    width: 20% !important;
	}
	.pulsantenav
	{
		width: 11% !important;
	}
	.imgpulsante
	{
		width: 70% !important;
	}
	}
@media screen and (max-width: 74em) {
	 
	   	.logonav
	{
	    width: 20% !important;
	}
	.pulsantenav
	{
		width: 11% !important;
	}
	.imgpulsante
	{
		width: 70% !important;
	}
	}
@media screen and (max-width: 64em) {
	 
	   	.logonav
	{
	    width: 20% !important;
	}
	.pulsantenav
	{
		width: 12% !important;
	}
	.imgpulsante
	{
		width: 80% !important;
	}
	}
	@media screen and (max-width: 55em) {
	    	.logonav
	{
	    width: 20% !important;
	}
	.pulsantenav
	{
		width: 12% !important;
	}
	}
	@media screen and (max-width: 50em) {
	    	.logonav
	{
	    width: 40% !important;
	}
	.pulsantenav
	{
		width: 12% !important;
	}
	}
	@media screen and (max-width: 40em) {
	.logonav
	{
	    width: 55% !important;
	}
	.pulsantenav
	{
		width: 18% !important;
	}
	}
    @media screen and (max-width: 30em) {
	    	.logonav
	{
	    width: 65% !important;
	}
	.pulsantenav
	{
		width: 33% !important;
	}
	}
	@media screen and (max-width: 20em) {
	    	.logonav
	{
	    width: 65% !important;
	}
	.pulsantenav
	{
		width: 30% !important;
	}
	}