*, *: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;
	overflow-x: hidden;
	padding:0px;
	margin:0px;	
	width:100vw;
    height:100vh;
	zoom: reset;
    user-select:none;
    color:white;



    
}

.hidden {
    display:none!important;
}

.greyed {
    filter: saturate(0%) brightness(0.9);
}


#content {
    xborder:1px solid lime;

    background-color:#21273b;
    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 ;
}



#view-container {
    xborder:1px solid orange;
    
    width:100%;
    height:75%;
    position:relative;



}

#view-container > .bg-image-layer {
    position:absolute;
    width:100%;
    height:100%;
    xbackground-image: url('../img/gran_half.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    xfilter:brightness(400%) contrast(0.4);
}

#view-container > .bg-color-layer {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#1d2352;
    xbackground-color:#1c334f;
}

#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;

    xbackground-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%);
}