@font-face {
        	font-family: Calistoga;
        	src: url('../ttf/Caladea-Bold.ttf') format('truetype');
    	}
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 1.0);
            display: block;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        body {
            -webkit-user-select: none;
            user-select: none;
            background-color: #013;
            overflow: hidden;
			background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        .container {
            position:aboslute;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;            
        }
        .square {
            background-color: #ccc;
            margin: 32px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px; 
            border: 0px solid #000;
			text-align: center;
			vertical-align: bottom;
			position: relative;
        }
		.squareTitle {
			font-family: Calistoga;
            /* font-weight: bold; */            
			font-size: 64px;
			position: absolute;
			bottom: 16px;
			width: 100%;			
    		color: #fff8d7;
			text-shadow: 4px 4px 0px rgba(0, 0, 0, .6);			
		}
        #squarePaint {            
            background-image: url("./img/paint.webp");
        }
        #squareMap {                      
            background-image: url("./img/map.webp");            
        }        
        @media (orientation: landscape) {
            .container {
                flex-direction: row;
				align-items: flex-center;                
            }
            .square {
                width: 30%;
                height: 60%;
                transform: translate(0, 10%);
            }
			body {
				padding-bottom: 24px;
			}
			#paintLogo {
				height: 30%;
			}
        }
        @media (orientation: portrait) {
            .container {
                flex-direction: column;
				justify-content: flex-end;
            }
            .square {
                width: 60%;
                height: 30%;
                transform: translate(0, -10%);
			}
			body {
				padding-bottom: 48px;
			}
			#paintLogo {
				height: 20%;
			}
        }
		#credit {
			display: inline-block;
			width: 200px;
			height: 20px;
			position: absolute;
			right: 16px;
			bottom: 20px;			
			font-family: sans-serif;
			font-size:16px;
			color:#AAA;
			text-align: right;
		}
        #logo {            
            position: absolute;
            top: 0;            
            width: 100%;
            height: 20%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin: 8px;
        }
        #eventName {
            font-size: 24px;
            font-weight: bold;
            text-align: center;            
            margin: 20px;
            color: #222;
            position: absolute;
            bottom: 12; left: 0;
            font-family: sans-serif;
            font-weight: bold;
            text-wrap: wrap;
            opacity: 0.8;
        }
		#paintLogo {
            display: none;
			position: absolute;
			top: 10%;
			width: 100%;			
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			margin: 8px;
			z-index: 20;
		}