﻿#main-headline {
	text-decoration: underline;
	}

#media-title {
	Z-INDEX: 12000000000 !IMPORTANT;
	WIDTH: 100%;
	HEIGHT: 11%; 
	border: 0px; 
	position: absolute !IMPORTANT;
	color: white;
  	width: auto;
  	text-align: center;
	font-size: clamp(1rem, 5vmin, 2rem);
  	font-family: sans-serif;

	margin-bottom: 123px;   
	top:0; 
	margin-top: 0px;
  	text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em;
	box-sizing: border-box;  
	clear: both;
	}





.table {
  	background-color: #d4e5ff;
	box-sizing: border-box;  
	clear: both;  
	}






/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	.table {
  		width: 250px;
  		height: 50px;
  		}

	.table .monitor-wrapper {
  		width: 230px;
  		height: 40px;
		}

	.table .monitor-wrapper .monitor {
  		width: 205px;
  		height: 25px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 20px;	
		top: 0; 
		margin-top: 0px !important;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	.table {
  		width: 250px;
  		height: 50px; 
  		}

	.table .monitor-wrapper {
  		width: 230px;
  		height: 40px;
		}

	.table .monitor-wrapper .monitor {
  		width: 205px;
  		height: 25px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 20px;	
		top: 0; 
		margin-top: 0px !important;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	.table {
  		width: 250px;
  		height: 50px;  77BORDER: 4PX SOLID RED; 
  		}

	.table .monitor-wrapper {
  		width: 230px;
  		height: 40px;
		}

	.table .monitor-wrapper .monitor {
  		width: 205px;
  		height: 25px;  
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 20px;	
		top: 0; 
		margin-top: 0px !important;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	.table {
  		width: 290px;
  		height: 75px;   
  		}

	.table .monitor-wrapper {
  		width: 270px;
  		height: 65px;
		}

	.table .monitor-wrapper .monitor {
  		width: 225px;
  		height: 35px;  
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 22px;	
		top: 0; 
		margin-top: 3px !important; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	.table {
  		width: 310px;
  		height: 80px;  
  		}

	.table .monitor-wrapper {
  		width: 290px;
  		height: 70px;
		}

	.table .monitor-wrapper .monitor {
  		width: 250px;
  		height: 35px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 27px;	
		top: 0; 
		margin-top: 3px; 
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.table {
  		width: 330px;
  		height: 85px; 
  		}

	.table .monitor-wrapper {
  		width: 310px;
  		height: 70px;
		}

	.table .monitor-wrapper .monitor {
  		width: 260px;
  		height: 40px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 29px;	
		top: 0; 
		margin-top: 3px; 
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	.table {
  		width: 350px;
  		height: 90px;  
  		}

	.table .monitor-wrapper {
  		width: 330px;
  		height: 70px;
		}

	.table .monitor-wrapper .monitor {
  		width: 270px;
  		height: 40px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 31px;	
		top: 0; 
		margin-top: 3px; 
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	.table {
  		width: 370px;
  		height: 95px; 
  		}

	.table .monitor-wrapper {
  		width: 350px;
  		height: 75px;
		}

	.table .monitor-wrapper .monitor {
  		width: 280px;
  		height: 45px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 33px;	
		top: 0; 
		margin-top: 3px; 
		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	.table {
  		width: 390px;
  		height: 100px;
		} 

	.table .monitor-wrapper {
  		width: 370px;
  		height: 80px;
		}

	.table .monitor-wrapper .monitor {
  		width: 300px;
  		height: 50px; 
		}

	.table .monitor-wrapper .monitor p {
  		font-size: 35px;	
		top: 0; 
		margin-top: 3px; 
		}
	}
/*********************************************************************************************************/







.table .monitor-wrapper {
  	background: #050321;
  	box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3); 

   	display: flex;
   	flex-direction: row;
   	flex-wrap: wrap;
   	justify-content: center;
   	align-items: center;

  	margin:auto;

  	position: relative;
  	top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	box-sizing: border-box;  
	clear: both;   
	}

.table .monitor-wrapper .monitor {
  	background-color: #344151;
  	overflow: hidden;
  	white-space: nowrap;
  	box-shadow: inset 0px 5px 10px 2px rgba(0, 0, 0, 0.3);
	}

.table .monitor-wrapper .monitor p {
  	font-family: "VT323", monospace;
  	position: relative;
  	display: inline-block !important;
  	animation: move 20s infinite linear;  
  	animation: move 30s infinite linear;
  	color: #EBB55F; 
	}

@keyframes move {
  	from {
    		left: 800px;  
  		}
  	to {
    		left: -4800px;
  		}
	}