@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@media only screen and (min-width: 1025px) {
	html, body{
		width:100%; 
		height:100%; 
		padding:0px; 
		margin:0px;
		overflow: hidden;
		background: #191d1e; /* Old browsers */
		background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
		background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		background-attachment: fixed
	}
	
	#projector {
	  position: absolute; 
	  top: 0px;
	  left: 0px;
	  width:100%;
	  height:100%;
	  animation: filter-animation 50s infinite;
	} 
	
	.logocenter {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}

    .quote-container {
		position: fixed;
		left: 50%;
		top: 77%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}
    .quotes{
        display:none;
        font-family:'Exo 2', sans-serif;
        font-size:20px;
        text-align:center;
        color: white;
      }
	
	.logocenter img {
		width: 30%;
		filter: drop-shadow(0 0 10px #000);
	}
	
	@keyframes filter-animation {
		0% {
		  filter: hue-rotate(0deg);
		}
		
		50% {
		  filter: hue-rotate(-50deg);
		}
		
		100% {
		  filter: hue-rotate(0deg);
		}
	  }
	}

@media only screen and (max-width: 1024px) {
	html, body{
		width:100%; 
		height:100%; 
		padding:0px; 
		margin:0px;
		overflow: hidden;
		background: #191d1e; /* Old browsers */
		background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
		background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		background-attachment: fixed
	}
	
	#projector {
	  position: absolute; 
	  top: 0px;
	  left: 0px;
	  width:100%;
	  height:100%;
	  animation: filter-animation 50s infinite;
	} 
	
	.logocenter {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}
	
    .quote-container {
		position: fixed;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}
    .quotes{
        display:none;
        font-family:'Exo 2', sans-serif;
        font-size:20px;
        text-align:center;
        margin:30%;
        color: white;
      }

	.logocenter img {
		width: 40% !important;
		filter: drop-shadow(0 0 10px #000);
	}
	
	@keyframes filter-animation {
		0% {
		  filter: hue-rotate(0deg);
		}
		
		50% {
		  filter: hue-rotate(-50deg);
		}
		
		100% {
		  filter: hue-rotate(0deg);
		}
	  }
  }

  @media only screen and (max-width: 426px) {
	html, body{
		width:100%; 
		height:100%; 
		padding:0px; 
		margin:0px;
		overflow: hidden;
		background: #191d1e; /* Old browsers */
		background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
		background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		background-attachment: fixed
	}
	
	#projector {
	  position: absolute; 
	  top: 0px;
	  left: 0px;
	  width:100%;
	  height:100%;
	  animation: filter-animation 50s infinite;
	} 
	
	.logocenter {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}

    .quote-container {
		position: fixed;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		text-align: center;
		width: 100vw;
	}
    .quotes{
        display:none;
        font-family:'Exo 2', sans-serif;
        font-size:20px;
        text-align:center;
        color: white;
      }
	
	.logocenter img {
		width: 80% !important;
		filter: drop-shadow(0 0 10px #000);
	}
	
	@keyframes filter-animation {
		0% {
		  filter: hue-rotate(0deg);
		}
		
		50% {
		  filter: hue-rotate(-50deg);
		}
		
		100% {
		  filter: hue-rotate(0deg);
		}
	  }
  }