/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Better box model */
* { box-sizing: border-box; }

/* The body tag doesn't necessarily take up the whole browser window, which can break some things */
html, body {
	height: 100%;
}

/*----------------------------------------------------------------------*

	Webfonts

*----------------------------------------------------------------------*/

@font-face {
    font-family: compagnon;
    src:    url(/fonts/Compagnon-Italic.woff2) format("woff2"),
        url(fonts/Compagnon-Italic.woff) format("woff");
}


/*----------------------------------------------------------------------*

	General Styles

*----------------------------------------------------------------------*/

body {
    
    background-color: black;
    
}

p {
   
    color: white;
    font-family: compagnon, italic;
    font-style: italic;
    font-size: 18px;
}

h2{
    color:white;
    font-family: linotype-sabon, sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
}

.menupage {
    
    display: flex;
    width: 900px;
    height: 2000px;
    flex-direction: column;
    margin: auto;
    margin-top: 15vh;
    padding: 40px;
    
}

.menu .menupage{
    background-color: #c27259;
}

.drinks .menupage{
    background-color: #606d4a;

}

.menutitletext {
    
   align-self: center;
    width: 100%;
    height: 160px;
    margin-bottom: 80px;
    
}

.horizrule {
    
    overflow: hidden;
    
    margin-bottom: 60px;
}

.menupage .leftjust {
    
    width: 80%;
}

.menupage .leftjust p {
    
    margin-left: 30px;
     margin-bottom: 60px;
    
}

.menupage .rightjust {
    
    width: 90%;
    text-align: right;
    align-self: flex-end;
    
}

.menupage .rightjust p {
    
    margin-right: 30px;
    margin-bottom: 60px;
    margin-top: 5px;
    
}

.drinks .drinkssingle {
    
    align-self: flex-end
}

.matchbook {
    position: absolute;
    top: 700px;
    left: 100px;
    z-index: -1;
    transform: rotate(-15deg);
    
    
}

.confetti {
  
}

#con1 {
     position: relative;
    top: -1300px;
    left: 700px;
 
}

#con2 {
     position: relative;
    top: -1580px;
    left: 500px;
}

#con3 {
     position: relative;
    top: -1670px;
    left: 700px;
}
#con4 {
     position: relative;
    top: -1320px;
    left: 725px;
}

#con5 {
     position: relative;
    top: -1000px;
    left: 800px;
}

#con6 {
     position: relative;
    top: -1700px;
    left: 400px;
}
#con7 {
     position: relative;
    top: -1300px;
    left: 700px;
}

#con8 {
     position: relative;
    top: -1130px;
    left: 645px;
}

#con9 {
     position: relative;
    top: -1590px;
    left: 400px;
}

.aboutpage {
   display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    background-image: url(../img/confettimulti.svg)

}

.aboutboard {
    height: 500px;
    width: 800px;
     background: #a3803e;
    padding: 40px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "t t" 
        "l r";
}

.aboutboard h2 {
    grid-area: r;
    text-align: justify;
    width: 550px;
    align-self: flex-end;
    
    
}

.aboutboard h1 {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 450;
    grid-area: t;
    color: white;
    text-transform: uppercase;
    font-size: 50px;
    
    
}

/*
.confettimulti {
    position: absolute;
    z-index: -1;
    left: 100px;
    top: 100px;
    
}
*/

/*--------------------------card-------------------------*/

.content .leftjust {
    align-self: flex-end;
    
}

.content .rightjust {
    
    text-align: right;
    align-self: flex-end;
}

.leftjust h2 {
    
    
}

h4{
    
    font-family: brandon-grotesque, sans-serif;
    font-weight: 450;
    text-transform: uppercase;
    color: white;
    font-size: 20px;
    letter-spacing: 1px;
}



.gridtop { 
    grid-area: t;
    display: flex;
    justify-content: center;    
}

.gridtop img{
    width: 1000px;
    object-fit: contain;

}

.cardgrid .leftjust  { 
    grid-area: l;  
    display: flex;
    justify-content: left;
    align-items: flex-end;

}

.cardgrid .rightjust { 
    grid-area: r;  
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;

}


.cardfront {
        display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "t t" 
        "l r";
    padding: 20px;
    
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
    
}

.cardfront,
.cardback {
    position: absolute;
  height: 100%;
  width: 100%;
  color: white;
  backface-visibility: hidden;
}

.cardback {
    
  transform: rotateX( 180deg );
       padding: 20px; 
     display: flex;
  flex-direction: column;
  justify-content: space-between;
     font-family: brandon-grotesque, sans-serif;
    font-weight: 450;
}

.cardback a {
  
  color: white;
  text-decoration: none;
  font-size: 50px;
  text-transform: uppercase;
}

.cardback a:hover {
  
  color: white;
  text-decoration: underline;
  font-size: 50px;
  text-transform: uppercase;
}

.cardback .menu a {
  
  
}

.cardback .drinks {
  text-align: center;
}

.cardback .about {
  text-align: right;
}

.card1:hover {
    
    z-index: 100;
}

.card1:hover .content {
  transform:  rotateX( 180deg ) ;
  transition: transform 0.5s;
}

.card1{
    width: 400px;
    height: 225px;
    padding: 20px;
    position: fixed;
    
}

.menu .card1{
    bottom: 100px;
    z-index: 3;
    transform: rotateZ(-15deg);
}

.drinks .card1{
    bottom: 100px;
    right: 100px;
    z-index: 3;
    transform: rotateZ(15deg);
}

.aboutpage .card1{
    position: fixed;
    bottom: 70px;
    left: 100px;
    z-index: 3;
    transform: rotateZ(15deg);
}

.menu .cardfront,.menu .card1 .cardback {
  background: #a3803e;
}

.drinks .cardfront,.drinks .card1 .cardback {
  background: #e8dacd;
}

.aboutpage .cardfront,.aboutpage .card1 .cardback {
  background: #c27259;
}