@media only screen and (min-aspect-ratio: 1563/1000) {

    #textbuffer {
        display: none;
    }

    .top-bar {
        display: none;
    }

    #grid-container {
    		min-width: 98vw;
		max-width: 98vw;
    }

    #tsrendersurface, #overlaytextsurface {
    	    margin-top: 0px;
        min-height: calc(100vh - 48px);
        max-height: calc(100vh - 48px);
        min-width: calc( calc(100vh - 48px) * 1.77);
        max-width: calc( calc(100vh - 48px) * 1.77);
        display: inline;
/*        margin-top: auto;
        margin-bottom: auto;*/
        position: absolute;
        left:50%;
        top: 0%;
        transform: translate(-50%, 0%);
    }


    #ts-left {
        display: none;
    }

    #ts-right {
        min-width: 100vw;
        max-width: 100vw;
        margin-left: 0vw;
    }

    #projectname, #description, #creator, #editcontrols, #runcontrols, #flag-cell {
        display: none;
    }

}

@media only screen and (max-aspect-ratio: 1563/1000) {

    #textbuffer {
        display: none;
    }

    .top-bar {
        display: none;
    }

    #grid-container {
    		min-width: 98vw;
		max-width: 98vw;
    }

    #tsrendersurface, #overlaytextsurface {
    	    margin-top: 0px;
        min-width: 100vw;
        max-width: 100vw;
        min-height: calc( 100vw * 0.56249992968);
        max-height: calc( 100vw * 0.56249992968);
        display: inline;
/*        margin-top: auto;
        margin-bottom: auto;*/
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0%, -50%);
    }


    #ts-left {
        display: none;
    }

    #ts-right {
        min-width: 100vw;
        max-width: 100vw;
        margin-left: 0vw;
    }

    #projectname, #description, #creator, #editcontrols, #runcontrols, #flag-cell {
        display: none;
    }

}

@media only screen and (display-mode: fullscreen) and (min-aspect-ratio: 16/9) {

    #grid-container {
/*    	    position: absolute;*/
/*        left:50%;
        top: 0%;*/
        min-height: 100vh !important;
        max-height: 100vh !important;
        min-width: calc( 100vh * 1.77) !important;
        max-width: calc( 100vh * 1.77) !important;
/*        transform: translate(-50%, 0%);*/
    }

    #tsrendersurface, #overlaytextsurface {
    	    margin-top: 0px;
    	    position: absolute;
        left:50%;
        top: 0%;
        min-height: 100vh !important;
        max-height: 100vh !important;
        min-width: calc( 100vh * 1.77) !important;
        max-width: calc( 100vh * 1.77) !important;
        transform: translate(-50%, 0%);
    }

}

@media only screen and (display-mode: fullscreen) and (max-aspect-ratio: 16/9) {

    #grid-container {

        min-width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc( 100vw * 0.56249992968) !important;
        max-height: calc( 100vw * 0.56249992968) !important;
        display: inline;
    }

    #tsrendersurface, #overlaytextsurface {
    	   	margin-top: 0px;
    	    position: absolute;
        left: 0%;
        top: 50%;
        min-width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc( 100vw * 0.56249992968) !important;
        max-height: calc( 100vw * 0.56249992968) !important;
        transform: translate(0%, -50%);
	    display: inline;
    }

}

#player-special {
	transform: translate(-50%, 0%);
	position: absolute;
	left: 50%;
}

.player-button-hidden {
	display: none;
}

.player-right {
	float: right;
}

.player-button:hover {
	color: lightgreen;
	background-color: #00000000;
}

.player-text-button:hover {
	background-color: lightgreen;
	color: black;
}

.player-text-button {
	font-family: 'TextBuffer';
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	vertical-align: center;
	text-decoration: none;
	background-color: white;
	color: black;
	border-radius: 5px;
	padding-left: 8px;
	padding-right: 8px;
	min-height: 20px;
	max-height: 20px;
}

.player-button {
	font-size: 20px;
	text-decoration: none;
	color: white;
	padding-left: 8px;
	padding-right: 8px;
	background-color: #00000000;
}

#player-controls:hover {
	opacity: 1;
}

#player-controls {
	padding: 8px;
	vertical-align: center;
	text-align: left;
	border-top: 1px solid #ffffff80;
	min-height: 48px;
	max-height: 48px;
	position: absolute;
	min-width: 100vw;
	max-width: 100vw;
	background-color: #000000a0;
	left: 0px;
	bottom: 0px;
	z-index: 999;
	opacity: 1;
	display: none;
}

#waitscreen {
	background-color: black;
	min-width: 100vw;
	max-width: 100vw;
	min-height: 100vh;
	max-height: 100vh;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
}

#waitscreen-content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
}

.fancy {
  background: linear-gradient(to bottom, red, red, orange , yellow, white, orange, red, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
/*  font-size: 60px;
  line-height: 60px;*/
}

.animated-gradient {
  min-width: 50vw;
  min-height: 4px;
  text-align: center;
  font-weight: bold;
  background: repeating-linear-gradient(to right, black 0%, green 25%, yellow 50%, green 75%, black 100%);
  width: 100%;
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes gradient {
  0%   { background-position: 0 0; }
  100% { background-position: -200% 0; }
}