@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

body {
    font-size:20px;
    font-family: 'Courier Prime', monospace;
    color: #fff;
    text-align:center;
    background:#54595c url('images/shiplap.jpg') fixed top center;
    cursor: default;
    user-select: none;
}

h1.title { 
    font-family: 'La Belle Aurore', cursive;
    font-size: 9vw;
    margin: 5px 20px 5px 20px;
	color: #009ee3;
    text-shadow:
        3px 3px 1px #000,
        -1px -1px 1px #000,  
        1px -1px 1px #000,
        -1px 1px 1px #000,
        1px 1px 1px #000;
}

h2 {
    font-size: 2em;
    font-size: 5vw;
    margin-bottom: 5px;
    margin-top: 5px;
	color: #009ee3;
    text-shadow:
        3px 3px 1px #000,
        -1px -1px 1px #000,  
        1px -1px 1px #000,
        -1px 1px 1px #000,
        1px 1px 1px #000;
}

.card {
    display: inline-block;
    max-width: 1080px;
    min-width: 500px;
    width: 99%;
}

.square {
    float: left;
    position: relative;
    width: 19%;
    padding-bottom : 15%;
    margin: 0.3%;
    background-color:rgba(30, 30, 30, 0.9);
    overflow: hidden;
    border: 1px #819197 solid;
}

.content {
    position: absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
}

.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:90%;
}

.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    cursor: pointer;
}

.free {
    cursor: default;
    background-color: white;
}

.marker:after {
    content:"";
    opacity:0.75;
    top:12%;
    left:15%;
    width:75%;
    height:75%;
    position:absolute;
    display:block;
    background-image: url('images/hgtv-marker.png');
    background-size:100% auto;
    background-repeat:no-repeat;
}

.winner {
    background-color: #8fa0a7 !important;
}

/* Menu */

.hamburger{
        font-family: sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
    background:#009ee3;
    position:absolute;
    top:10px;
    left:10px;
    width: 80px;
    height:80px;
    line-height:80px;
    color:white;
    border:black solid 1px;
    font-size:3em;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:10000000000000;
    display: table-cell;
    vertical-align: middle;
}
.cross{
    font-family: sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    background:white;
    position:absolute;
    top:10px;
    left:10px;
    width: 80px;
    height:80px;
    line-height:80px;
    color:#666666;
    border:black solid 1px;
    font-size:3em;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:10000000000000;
    display: table-cell;
    vertical-align: middle;
}
.menu{
      z-index:1000000; 
      font-weight:bold;
      font-size:0.8em;
      width:70%;
      background:#f1f1f1;
      position:absolute;
      top:11px;
      margin-left:85px;
      text-align:center;
}

.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}

.menu li {
    display: block;
    padding: 30px 0 30px 0;
    border-bottom:black 1px solid;
    font-size: 4vw;
}

.menu li:hover {
      display: block;
      background:#ffffff;
      padding: 30px 0 30px 0;
      border-bottom:#dddddd 1px solid;
}

  .menu ul li a {
    text-decoration:none;
    margin: 0px;
    color:#666;
}
  .menu ul li a:hover {  color: #666; text-decoration:none;}
  .menu a{text-decoration:none; color:#666;}
  .menu a:hover{text-decoration:none; color:#666;}

.about {
    display: block;
    width: 90%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc;
    color: black;
    font-size: 20pt;
}
.about h2 {
    color:white;
    font-size: 4vw;
}

.about p {padding: 5px;}