body{
background-color: black;
color:white;
font-family: monospace;
font-size: 155%;
padding-bottom: 25px;
}

.title{
margin:auto;
margin-top: 2.5%;
width:60%;
border: 5px solid green;
border-style: groove;
border-radius: 10px;
padding:1%;
font-size: 220%;
text-align:center;
}
.title > small{
margin-top: 0%;
padding:0%;
font-size: 40%;
text-align:center;
}
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr));
padding: 5%;
grid-column-gap: 3%;
grid-row-gap: 4%;
}
.grid > div {
border: 5px solid green;
border-style: groove;
border-radius: 12px;
padding: 3%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
border: 2px solid gold;
border-style: groove;
border-radius: 10px;
margin: 0.8%;
margin-top: 1.8%;
margin-bottom: 0%;
padding: 0.6%;
font-size: 90%;
}

.references > li{
font-size: 100%;
padding: 1%;
}

a:link {
color: lightgray;
}
a:visited {
color: lightgray;
}
a:hover {
color: orange;
}
a:active {
color: #800000;
}

.printhead {
position: absolute;
right: 50px;
width: 300px;
text-align: right;
visibility:hidden;
}

/*If Printing*/
@media print {
  @page {
    /*size: 400mm 566mm;*/
    size: 400mm 566mm;
    font-size: 200%;
  }
  .printhead{
   visibility:visible;
  }
}

/*If mobile device*/
    @media (pointer:coarse) {
        .title{
        width:90%;
        }
        body{
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        font-size:280%
        }
        /*if device is in landscape:*/
        @media (min-width: 30em) and (orientation: landscape) {
        body{
        font-size:170%;
        }
        }
    }