.content-display-canvas {
	WIDTH: 100%; 
	HEIGHT: 100%;  width:inherit;height:inherit; 
	margin: 0 !important; 
	padding: 0 !important;
	111box-sizing: border-box !important;   
	clear: both;
	}












.video-wrap {
	margin: 0 !important; 
	padding: 0 !important;
	box-sizing: border-box;  
	clear: both; 
	margin: 0 !important;  
	}

.videoFloat {
	height: 100%; 
	margin: 0 !important; 
	padding: 0 !important;
	box-sizing: border-box;  
	clear: both;  
	}


/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~BEGINNING OF AUTHOR'S NAME AND TITLE OF CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/
#title-and-author-name {
	/**ANIMATION**/
    		-moz-animation: cssAnimation 0s ease-in 5s forwards;

    		/* Firefox */
    		-webkit-animation: cssAnimation 0s ease-in 5s forwards;

    		/* Safari and Chrome */
    		-o-animation: cssAnimation 0s ease-in 5s forwards;

    		/* Opera */
    		animation: cssAnimation 0s ease-in 5s forwards;
    		-webkit-animation-fill-mode: forwards;
    		animation-fill-mode: forwards;
	/**END OF ANIMATION**/

	font-family: Verdana, Geneva, sans-serif !important;
	border-radius: 10px !important;  
	background: radial-gradient(#480D35 ,#17151d) !important;
    	box-sizing: border-box;
	OVERFLOW: HIDDEN;
	width: 300px; MAX-WIDTH: 250PX;  
	height: 107px; height: 120px; 
	/**BORDER**/
 	 	border: 10px solid black;
  		border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cffffe' /%3E%3Cstop offset='25%25' stop-color='%23f9f7d9' /%3E%3Cstop offset='50%25' stop-color='%23fce2ce' /%3E%3Cstop offset='100%25' stop-color='%23ffc1f3' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3'/%3E %3C/svg%3E") 1;
	/**END OF BORDER**/ 

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        11max-width:100%;
        11max-height:100%;
		}
	}





@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

      /* EOS */

      :root {
        color-scheme: light;
      }
    






/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#title-and-author-name {
		display: none;
		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#title-and-author-name {
		display: none;
		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#title-and-author-name {
		display: none;
		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#title-and-author-name {
		display: none;
		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#title-and-author-name {
		display: none;
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
  	#title-and-author-name {
		display: none;
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#title-and-author-name {
		display: inline;
		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#title-and-author-name {
		display: inline;
		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#title-and-author-name {
		display: inline;
		}
	}



 
/** beginning of color of title and author's name**/
#title-and-author-name article {
	111width: 300px; MAX-WIDTH: 250PX;    width: 100% !important; 
	111height: 107px; height: 120px;  height: 100% !important;
	padding: 0 !important; 
	margin: 0 !important;   
	position: absolute !important; 
	overflow: hidden;

  	/* old browser interpolation */
	  background: linear-gradient(
	    to right, 
	    hsl(98 100% 62%), 
	    hsl(204 100% 59%)
	  );
  
	  /* modern interpolation */
	  background: linear-gradient(
	    to right in oklch, 
	    hsl(98 100% 62%), 
	    hsl(204 100% 59%)
	  );
  
	  /* old browser support */
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
  
	  /* modern browser version */
	  background-clip: text;
	  color: transparent;
	}




@layer demo.support {
	#title-and-author-name h1 {
    		111font-size: 10vmin; FONT-SIZE: 20PX !important;
		font-weight: 900 !important;
  		}

	#title-and-author-name p {
    		FONT-SIZE: 18PX !important;
		font-weight: 500 !important;
  		}

	article {
		PADDING-LEFT: 12PX !important;
  		}
	}
/** end of color of title and author's name**/
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~END OF AUTHOR'S NAME AND TITLE OF CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ **/










.flexibility-in-action {
	width: 100%;
	height: auto;
	display: table;
	border: 0px;
	}



#video {
	max-width:100% !important; 
	max-height: 100vh !important; 
	}