@charset "utf-8";
/* CSS Document */

/* Reset css for all browsers */
* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
/* Phone Size */
/* ---------- */

    html { 
        height:100vh;
    }
    
    body {

        height: 100%;
        font-family: 'Iceland', cursive;
        background-color: #d8d8d8;
    }

	#mwFolio {
		height: 100%;
		width: 100%;
		display: flex;
        flex-direction: column;
        align-items: stretch;
		max-height: 900px;
		max-width: 1800px;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
    
    .centre {
        margin: auto;
    }
    
    .border {
        background: #454869; /* fallback */
        background:
            linear-gradient(135deg, transparent 17px, #454869 0) top left,
            linear-gradient(225deg, transparent 17px, #454869 0) top right,
            linear-gradient(315deg, transparent 17px, #454869 0) bottom right,
            linear-gradient(45deg,  transparent 17px, #454869 0) bottom left;
        background-size: 51% 51%;
        background-repeat: no-repeat;
        
    }
    
    .interface {
        background: #292a2d; /* fallback */
        background:
            linear-gradient(135deg, transparent 15px, #292a2d 0) top left,
            linear-gradient(225deg, transparent 15px, #292a2d 0) top right,
            linear-gradient(315deg, transparent 15px, #292a2d 0) bottom right,
            linear-gradient(45deg,  transparent 15px, #292a2d 0) bottom left;
        background-size: 51% 51%;
        background-repeat: no-repeat;
        
        color: #6f7ffa;
    }
    
    .cap {
        color: #6f7ffa;
    }
    
    .titleBorder {
        background: #6fbfb2; /* fallback */
        background:
            linear-gradient(315deg, transparent 16px, #6fbfb2 0) bottom right,
            linear-gradient(45deg,  transparent 50px, #6fbfb2 0) bottom left;
        background-size: 51% 51%;
        background-repeat: no-repeat;
    }
    
    .titleGraphic {
        background: #292a2d; /* fallback */
        background:
            linear-gradient(135deg, transparent 14px, #292a2d 0) top left,
            linear-gradient(225deg, #292a2d 14px, #292a2d 0) top right,
            linear-gradient(315deg, transparent 14px, #292a2d 0) bottom right,
            linear-gradient(45deg,  transparent 14px, #292a2d 0) bottom left;
        background-size: 51% 51%;
        background-repeat: no-repeat;
    }
    
    #name {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .homeLink {
        text-decoration: none;
        display: block;
        color: #454869;
    }
    
    #title1 {
        font-size: 35px;        
        display:inline-block;
        padding-right: 4px;
        padding-bottom: 2px;
        margin-left: 40px;
        margin-top: 10px;
        color: #454869;
        display: block;

    }
    #title2 {
        color: #454869;
        margin-left: 140px;
        font-size: 22px; 
    }
    
    #homeGraphic {
        display: none;
    }
    
    #header {
        width: 95%;
        max-height: 48px;
        min-height: 48px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    
    #headContent {
        height: 42px;
        margin: 3px;
        width: 100%;
        margin-left: 4px;
        margin-right: 4px;
        position: relative;
        z-index: 6002;
    }
    
    /* Menu */

    #menuBtn {
        display: block;
        text-decoration: none;
        color: #6f7ffa;
        font-size: 22px;
        position: absolute;
        left: 50%;
        top: 50%;
		transform: translate(-50%, -50%);
        
    }
    
    #menu {
        display: none;
        position: fixed;
        z-index: 6002;
        width: 90vw;
        height: auto;
        background-color: #292a2d;
  
        padding-top: 15px;
        left: 50%;
        top: 20px;
		transform: translate(-50%, 0%);
        padding-bottom: 15px;
    }

    
    #menu li {
        list-style-type: none;
        float: none;
        text-align: center;
        font-size: 18px;
        
        
    }
    
    #menu li a {
        display: block;
        padding-top: 5px;
        margin-left: 25vw;
        margin-right: 25vw;
    }

    .subMenu li:not(:first-child) {
        display: block;
        padding-top: 5px;
        background-color: none;
    }
    
    .subMenu li:last-child {
        padding-bottom: 5px;
    }    
    
    .subMenu li {
        position: relative;
        z-index: 6002;
        border: transparent solid 1px;
        top: -1px;
        
    }

.subMenu {
    border: #454869 solid 1px;
    margin: 10px;
}
    
    #menu a:hover {
        color: #72dbc7;
    }
    #menu a {
      text-decoration: none;
        color: #6f7ffa;
        
    }

    .subMenu li:first-child {
        background-color: #454869;

    }

    /* Content */
    /* ------- */
    
    #content {
        width: 90%;
        height: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
        
        position: relative;
        padding: 5px;
    }
    
    .info {
        display: block;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .info div {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    #contText {
        height: auto;
        color: #292a2d;
        font-size: 25px;
        text-align: justify;
    }
    
    #contImg {
        max-width: 100%;
        max-height: auto;
        position: static;
    	left: 50%;
        top: 50%;
		transform: translate(0%, 0%);
    }

    .thumbnail {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    #content input {
        max-height: none;
        float: left;
        width: 80%;
		border: #292a2d solid 2px;
		margin: 5px;
		background-color: #e9e9ea;
    }

    .video {
        width: 80%;
        position: relative;
        padding-top: 45%;
        margin: 5px;
    }

    #content iframe {
        position:absolute;
        top:0;
        left:0;
        height: 100%;
        width: 100%;
    }
    
    #contOverlay {
        display: none;
        position: absolute;
        width:100%;
        height: 100%;
        background-color: transparent;
        z-index: 1001;
    }

    .contact {
        position: relative;
        left: 20px;
        font-size: 20px;
    }

    .contact a {
        color: #6f7ffa;
    }

    /* Game */
    /* ---- */

    #gameContainer {
        display: none;
    }

    #phGame {
        display: block;
        margin: auto;
        color: #292a2d;
        font-size: 25px;
        text-align: justify;
        width: 100%;
    }

    .game {
        min-height: none;
    }
    
    #footer {
        display: none;
    }
    
    #footContent {
        height: 42px;
        margin: 3px;
        width: 100%;
        margin-left: 4px;
        margin-right: 4px;
    }

/* PC Size */
/* ------- */
@media only screen and (min-width: 900px) {
    html { 
        height:100vh;
    }
    
    #homeGraphic {
        display: block;
        float: left;
        margin-right: 15px;
    }
    #menu {
        margin-top: 30px;
        display: block;
        top: auto;
        left: auto;
        position: static;
        z-index: 0;
        width: auto;
        height: auto;
        background-color: none;
        padding-top: 0px;
        transform: translate(0%, 0%);
        padding-bottom: 0px;
    }
    
    #header {
        max-height: 106px;
        min-height: 106px;
    }
    
    #headContent {
        height: 98px;
        margin: 4px;
    }
    
    /* Menu */
    /* ---- */
    #menuBtn {
        display: none;
    }
    
    #menu li {
        list-style-type: none;
        float: left;
        width: 105px;
        text-align: center;
        font-size: 18px;
    }
    
    #menu li a {
        display: block;
        padding-top: 5px;
        margin-left: 0px;
        margin-right: 0px;
    }
        
    .subMenu li:first-child {
        background-color: transparent;

    }
    .subMenu {
        border: none;
        margin: 0px;

    }
    .subMenu li:not(:first-child) {
        display: none;
        padding-top: 15px;
        background-color: #292a2d;
    }
    
    .subMenu li:last-child {
        padding-bottom: 15px;
    }
    
    #menu li:hover .subMenu li {
        display: block;
        border-left: #454869 solid 1px;
        border-right: #454869 solid 1px;
    }
    
    #menu li:hover .subMenu li:first-child {
        border-top: #454869 solid 1px;
    }
    

    #menu li:hover .subMenu li:last-child {
        border-bottom: #454869 solid 2px;
    }
    
    .subMenu li {
        position: relative;
        z-index: 1000;
        border: transparent solid 1px;
        top: -1px;
    }
    
    /* Content */
    /* ------- */
    
    #content {

        height: 100%;

    }
    
    
    .info {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .info div {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    #contText {
        height: auto;
        color: #292a2d;
        font-size: 25px;
        text-align: justify;
    }
    
    #contImg {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
    	left: 50%;
        top: 50%;
		transform: translate(-50%, -50%);
    }

    .thumbnail {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-height: 250px;
    }
    #content input {
        max-height: 43%;
        float: left;
        padding: 5px;
        max-width: 330px;
		width: auto;
    }
    
    .video {
        position: relative;
        width: 30%;
        padding-top: 16.875%;
        margin: 5px;
    }
    
    #contOverlay {

        background-color: #292a2d;

    }
    
    /* Game */
    /* ---- */

    #gameContainer {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 768px;
        height: 480px;
        transform: translate(-50%, -50%);
    }
    
    .game {
        min-height: 480px;
    }
    
    #phGame {
        display: none;
    }
                    
    #footer {
        display: block;
        width: 95%;
        max-height: 48px;
        min-height: 48px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        margin-top: 10px;
    }
}