#modal-container {
    position:absolute;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0, 0.8);
    z-index:5;
    visibility:hidden;
    opacity:0;
  

    display:flex;
	justify-content: center;
	align-items: center;
    transition:all 0.2s;
    will-change: opacity;



}

#modal-container > .modal-window {
    xborder:10px solid lime;
    width: 100%;
    height:100%;
    xmax-width:500px;
    xmax-height:400px;
    visibility:hidden;
    position:absolute;
    xopacity:0;
    xtransition:all 0.2s;
   

    background-color:rgb(21, 21, 21);
    color:grey;
    font-family: Georgia, serif;
    xpadding: 30px 10px 50px 10px;

    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-direction:column;

    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:5em 5em 4em 4em;
}


.modal-window > .title {
    xborder: 1px solid red;
    width:100%;
    flex: 10%;
    padding:20px 10px 10px 50px;
    font-size:2em;
    font-family: Georgia, serif;
    z-index:2;
    color:#f5e9d8;

    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);
        
    xtext-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
    xbackground-color:rgba(0,0,0, 0.5);
}


.modal-window > .content {
    padding:20px 20px 20px 20px;
    padding:20px;

    xscroll-padding-bottom: 40px;

    xmargin-bottom:30px;
    width: 100%;
    flex: 70%;
    overflow-y:scroll;

    xmax-height:75%;

    color:rgb(219, 219, 219);
  
    font-family: Arial;
    xflex-grow:1;
    xbackground-color:rgba(0,0,0, 0.5);
    xbox-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);

    box-shadow: inset 0px 5px 10px 0px rgba(0,0,0, 0.99);

    background: rgb(0, 0, 0, 0.5);
    background: linear-gradient(90deg,
rgba(0,0,0,0) 0%, 
rgba(0,0,0,0) 2%, 
rgba(0,0,0,0.5) 3%,
rgba(0,0,0,0.5) 97%,
rgba(0,0,0,0) 98%,
rgba(0,0,0,0) 100%);

    border-style: solid;
	border-image-source: url('../img/border.png');
	border-image-slice: 150;
	border-image-width: 3em 0em;
	border-image-outset: 2px;
	border-image-repeat: round;
    xborder: 1px solid red;
}

.modal-window > .content:after {
    content: "";
    display: block;
    height: 100px;
    width: 100%;
}

.modal-window > .button-container {
    xborder: 1px solid red;
    width:100%;
    flex:20%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.modal-window > .button-container > .button {
    text-align:center;
    width:300px;
    aspect-ratio:300/86;

    display:flex;
    justify-content: center;
    align-items: center;

    background-image: url('../img/button.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    font-size:2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;

    color:#ffffff;
    text-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.9));
}



.modal-window > .button-container  > .button:active {
    background-image: url('../img/button_dark.png');
    font-size:1.9em;
}






/* Game name, version and image on "About" page */
.modal-window.about > .content > .header  {
    xborder:1px solid grey;
    display:flex;
    justify-content: center;
	align-items: center;
    height:120px;
}

.modal-window.about > .content > .header > .info-container  {
    xborder:1px solid grey;
    width:50%;
    xheight:100%;
    xpadding-right:10px;

    text-align: right;

    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;

}

.modal-window.about > .content > .header > .info-container > .info {

}

.modal-window.about > .content > .header > .info-container > .info > div  {
    xborder:1px solid grey;
    xdisplay:inline-block;
    margin-bottom:5px;
    font-family:consolas,monospace;
}

.about-name  {
    color:#ff8000;
}

.about-version  {
    color:#e6e6e6;
}

.about-date  {
    color:#9d9d9d;
}



.modal-window.about > .content > .header > .image {
    xborder:1px solid grey;
    width:50%;
    display:flex;
    justify-content: left;
	align-items: center;
}

.modal-window.about > .content > .header > .image > img {
    xborder:1px solid grey;
    height:120px;
    

	
}