@font-face {
    font-family: "Formal";
    src:url("../font/FRML436N.TTF") format('truetype');
}


*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	zoom: reset;
    touch-action: manipulation;
}

a:link{ color:#6969ff; font-weight:bold;} 
a:visited{ color:#6969ff } 
a:hover{ color:#6969ff; } 
a:focus{ color: #16e980; } 
a:active{ color:#d4d365; } 

/* Disable double-click to zoom on links, input fields
   and buttons to improve responsiveness */
a, input, button, .button
{
    touch-action: manipulation;
}

html{
    touch-action: manipulation!important;
}
	
body{
	background-color:#2b2f34;
    background-color: black;  
	font-family: Arial;
    xoverflow-y: hidden;
	overflow-x: hidden;
	padding:0px;
	margin:0px;	
	width:100vw;
    
    height:100vh;
	zoom: reset;
    user-select:none;

    color:white;
}

.hidden {
    display:none!important;
}

#content {
    xborder:1px solid lime;
    background-color:#2b2f34;
    position:relative;
    width:100%;
    xmax-width:1200px;
    height:100%;
    xmax-width:400px;
    margin:auto;

    display:flex;
    flex-direction:column;
    xalign-items: end;
    justify-content:space-between ;
}




#border-layer {
    position:absolute;
    width:100%;
    height:100%;
    pointer-events: none;

    border-style: solid;
	border-image-source: url('../img/border.png');
	border-image-slice: 150;
	border-image-width: 3em;
	border-image-outset: 0;
	border-image-repeat: round;
    box-shadow: inset 0px 0px 10px 10px rgba(0,0,0, 0.8);
   
    border-radius:4em 4em 4em 4em;
    xoutline: 5em solid red;
    z-index: 1;
}

#border-layer-basic{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events: none;
    z-index:1;
    outline: 500px solid rgb(32, 32, 32);

    border-radius: 4em;
    border-style: solid;
    border-color:rgb(32, 32, 32);
    border-width:5px;
}



#view-container {
    xborder:1px solid orange;
    
    width:100%;
    height:85%;
}

#view-container > .view {
    xborder:1px solid orange;
    position:relative;
    width:100%;
    height:100%;
 
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    xalign-items: center;

    background-image: url('../img/gran.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
}

#view-container > .view > .title {
    xborder:1px solid grey;
    padding:15px 10px 10px 10px;
    text-align: center;
    pointer-events: none;

    font-size:1.7em;
    color:#f5e9d8;
    xletter-spacing: 2px;
    font-family: Georgia, 'Times New Roman', Times, serif;
	text-transform: uppercase;

    text-shadow:0px 0px 10px rgba(0, 0, 0, 0.5), 
                0px 0px 3px rgba(0, 0, 0, 0.5),
                2px 2px 0px rgba(55, 5, 5, 0.99),
                0px 0px 8px orange,
                0px 0px 3px rgb(255, 255, 255);  
                
    xbackground: rgb(2,0,36);
    xbackground: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}