.cutive-mono-regular {
    font-family: "Cutive Mono", monospace;
    font-weight: 400;
    font-style: normal;}

@font-face {
  font-family: leicester;
  src: url(../Leicester_text.TTF);
}

@font-face{
    font-family: GoudyBookletter;
    src: url(../GoudyBookletter1911.otf);
}

body{
    font-family: "Baskervville", serif;
    text-align: center;
    background:black url("../img/tabletop2.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    display: table;
    margin: 25px 0 50px 0;
    width: 100%;}
h1{
    font-family: GoudyBookletter;
    letter-spacing: 1px;
    font-weight: 400;
    margin: .5em;
    font-size: 50px;
    text-align: center;
    color: brown;
    font-kerning: normal;
    text-transform: uppercase;}
h2{
    font-family: GoudyBookletter;
    letter-spacing: 2px;
    font-weight: 400;
    margin: .5em;
    font-size: 25px;
    text-align: center;
    color: black;
    font-kerning: normal;
    text-transform: uppercase;}

a:link{
    text-decoration: none;
    color: darkslateblue}
a:hover{
    color: brown;}
a:hover:visited{
    color: brown;}
a:visited{
    color: darkslategray;}

div.column{			
    display: grid;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0px 25px 0px 25px;
    justify-content: center;
    /*align-items: flex-start;cards match height of content*/}

div.columnNav{			
    display: grid;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0px 200px;
    justify-content: center;
    /*align-items: flex-start;cards match height of content*/}

.card{
    width: 400px;
    /*flex: 1 auto;*/
    /*border: 2px solid brown;*/
    border-radius: 4px;
    padding: 10px;
    margin: 25px 25px;
    box-shadow: 5px 10px 20px black;
    background: antiquewhite url("../img/paper.jpg");
    background-size: cover;}
.image{
    text-align: center;}
.image img{
    width: 99%;
    height: auto;}
.description{
/*    font-family: "Cutive Mono", monospace;*/
    font-family: leicester, monospace;
    font-size: 20px;
    color: black;
    margin: -9px 0px;
    padding: 0px 15px;
    text-align: left;}

.nav{
    width: 90px;
    /*border: 2px solid brown;*/
    border-radius: 4px;
    padding: 20px 40px;
  /*font-family: "Cutive Mono", monospace;*/
    font-family: leicester, monospace;
    font-weight: 900;
    margin: 25px 25px;
    box-shadow: 5px 10px 20px black;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: pink url("../img/paper2.jpg");
    background-size: cover;
    background-blend-mode: multiply;
    transition: transform .2s ease-in-out;
    position: relative;}
p.nav{
    text-transform: uppercase;}
.nav:hover{
    transform: scale(1.2) rotate(-5deg);
    background-color: peachpuff;
    color:brown;}
.nav:active{
    transform: rotate(5deg);}
.smallPrint{
    font-family: GoudyBookletter;
    font-variant: small-caps;
    font-weight: normal;
    text-align: right;
    font-size: 8px;
    letter-spacing: normal;
    color: black;
    position: absolute;
    bottom: 1;
    right: 5;}
.smallPrint2{
    font-family: GoudyBookletter;    
    font-variant: small-caps;
    font-weight:normal;
    text-align: left;
    font-size: 10px;
    letter-spacing: normal;
    color: black;
    position: absolute;
    top: 0;
    left: 10;}

.nav2{
   width: 90px;
    /*border: 2px solid brown;*/
    border-radius: 4px;
    padding: 20px 40px;
/*    font-family: "Cutive Mono", monospace;*/
    font-family: leicester, monospace;
    font-weight: 900;
    margin: 25px 25px;
    box-shadow: 5px 10px 20px black;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: antiquewhite url("../img/paper.jpg");
    background-size: cover;
    background-blend-mode: multiply;
    transition: transform .2s ease-in-out;
    position: relative;}
p.nav2{
    text-transform: uppercase;}
.nav2:hover{
    transform: scale(1.2) rotate(-5deg);
    background-color: navajowhite;
    color:brown;}
.nav2:active{
    transform: rotate(5deg);}
.back{
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 100;
}
.click {
  width: 250px;
  height: auto;
  position: relative;
  display: inline-block;
}
.click .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.click:hover .img-top {
  display: inline;
}

.mobile{display: none;}

@media only screen and (max-width: 1200px){
    div.back{display: none;}   
}

@media only screen and (max-width: 800px){
    #top{line-height: 1.1;}
    h1{font-size: 35px;}
    div.back{display: none;}
    div.columnNav{margin: 30px 14px 10px 14px;}
    div.nav{
        display:flex;
        width: 100px;
        margin: 10px 5px 10px 5px;
        font-size:18px;}
    div.nav:hover{transform: scale(1.1) rotate(-2deg);}
    div.nav2{
        display:flex;
        width: 100px;
        margin: 10px 5px 10px 5px;
        font-size:18px;}
    div.nav2:hover{transform: scale(1.1) rotate(-2deg);}}
        
@media  only screen and (max-width: 600px){
    div.column{			
        margin: 10px 10px}
    div.card{
        width: 325px;
        margin: 20px 5px;}
    
    div.back{
        display: none;}
    
    .mobile{
        display: flex;        
        text-align: center;
        font-family: "Cutive Mono", monospace;
        font-family: leicester, monospace;
        font-weight: 900;}
    
    .desktop{display:none;}
    
    p3{font-size: 15px;}
    
    div.mobileNav{
        width: auto;
        padding: 25px 15px;
        border-radius: 4px;
        margin: 15px 5px;
        background: antiquewhite url("../img/paper.jpg");
        background-blend-mode: multiply;
        background-size: cover;
        position: relative;
        box-shadow: 5px 10px 20px black;}
    div.mobileNav:hover{
        background-color: navajowhite;
        color:brown;
        transform: translateY(-25px) rotate(-3deg);}
    div.mobileNav:active{
        transform: translateY(-35px) rotate(3deg);}
    div.mobileNav2{
        width: auto;
        padding: 25px 15px;
        border-radius: 4px;
        margin: 15px 5px;
        background: pink url("../img/paper2.jpg");
        background-blend-mode: multiply;
        background-size: cover;
        position: relative;
        box-shadow: 5px 10px 20px black;}
    div.mobileNav2:hover{
        background-color: peachpuff;
        color:brown;
        transform: translateY(-25px) rotate(-3deg);}
    div.mobileNav2:active{
        transform: translateY(-35px) rotate(3deg);}
    div.buttonsMobile{
        bottom: 0;
        display: flex;
        position: fixed;
        width:100%;
        margin: auto;
        justify-content: center;}
    #gallery{margin-bottom: 75px;}
    }