:root {
 
 --white: #FFFFFF;
 --grey: #A09E8F;
 --black: #000000;
 --yellow: #EEA841;
 
 --orange: #EB5D45;
 --dark-orange: #76351C;
 
 --very-light-beige: #E1CFB4;
 --light-beige: #FFF6E9; /* #C1BAAD; */
 --beige: #F4E2C9;
 --dark-beige: #928872;
 --very-dark-beige: #66614E;
 
 --very-light-brown: #C9A181;
 --light-brown: #B68D73;
 --brown: #7e361c; /*#866048;*/
 --dark-brown: #72512F;
 --very-dark-brown: #574344;
 
 --dark-green: #3E4925; /* 2F321D */
 --green: #485646;
 --light-green: #A09E8F;
 
 --light-pink: #E9DAE6;
 --pink: #DCACC4;
}

html,
body {
 margin: 0px;
 font-family: Outfit;
 font-size: 20px;
 background: var(--brown);
 background-image: linear-gradient(180deg, var(--orange) 25%, var(--brown) 50%);
 height: 100%;
}

header,
div.main, 
footer {
 clear: both;
 float: left;
 width: 100%;
}

header {
 background-color: var(--orange);
 color: var(--white);
 margin-bottom: 75px;
 position: fixed;
 height: 75px;
 text-align: right;
 z-index: 9;
 /*border-bottom: 3px solid var(--orange);*/
}

footer {
 color: var(--white);
 background-color: var(--brown);
 height: calc(100vh - 550px - 75px - 2 * 50px - 25px);
 min-height: 235px;
 padding: 50px 0px;
 font-size: 17px;
 /*border-top: 3px solid var(--orange);*/
}

footer div.container {
 width: 100%;
 max-width: 1500px;
 height: calc(100% - 2 * 25px);
 margin-left: auto;
 margin-right: auto;
}

div.footer-block {
 width: calc(33.33% - 2 * 50px - 2 * 2px);
 float: left;
 border-right: 2px solid var(--yellow);
 padding: 0px 50px;
 height: 100%;
}

div.footer-block:last-child {
 border-right: none;
}

footer a {
 color: var(--white);
}

div.menu {
 width: calc(100vw - 200px);
 float: right;
}

div.main {
 margin-top: 75px;
 min-height: calc(100vh - 75px - 300px - 100px - 3px);
}

div.block {
 width: calc(50% - 2 * 75px);
 height: 400px;
 padding: 75px;
 float: left;
 background-size: cover;
 background-position: center;
 background-color: var(--beige);
 z-index: 1;
}

div.block:nth-child(3),
div.block:nth-child(4),
div.block:nth-child(7),
div.block:nth-child(8),
div.block:nth-child(11),
div.block:nth-child(12) {
 background-color: var(--light-beige);
 color: var(--black);
}

h1,
h2,
h3 {
 font-family: Cubano;
 font-weight: bold;
 margin-top: 0px;
}

footer h2 {
 color: var(--yellow);
}

th {
 text-align: left;
}

p {
 line-height: 1.75em;
}

p.copyright {
 clear: both;
 text-align: center;
 color: var(--yellow);
}

a.logo {
 float: left;
}

a.logo img {
 width: 100%;
 height: 75px;
}

a.menu-button {
 margin: 15px 10px;
 padding: 7px 30px 7px 30px;
 font-weight: bold;
 text-decoration: none;
 color: var(--white);
 font-size: 25px;
 font-family: Cubano;
 /*border-radius: 20px;*/
 transition: background-color 0.2s ease-in-out;
 display: inline-block;
}

a.menu-button:hover {
 background-color: var(--brown);
 color: var(--white);
}

a.current-page {
 background-color: var(--yellow) !important;
 color: var(--white) !important;
}

a.button {
 display: inline-block;
 padding: 10px 20px;
 text-decoration: none;
 background-color: var(--yellow);
 color: var(--white);
 font-weight: bold;
 transition: background-color 0.2s ease-in-out;
 margin: 2px;
}

a.button:hover {
 background-color: var(--dark-orange);
}

input,
textarea {
 display: block;
 float: left;
 clear: both;
 border: 2px solid var(--yellow);
 font-size: 20px;
 font-family: Outfit;
 padding: 10px 20px;
 margin-bottom: 5px;
 /*border-radius: 20px;*/
 transition: border-color 0.2s ease-in-out;
}

textarea {
 width: calc(100% - 2 * 20px);
 height: 125px;
}

input:focus,
textarea:focus {
 border-color: var(--dark-orange);
 outline: none;
}

input[type=submit] {
 color: #FFFFFF;
 border: none;
 background-color: var(--yellow);
 transition: background-color 0.2s ease-in-out;
}

input[type=submit]:hover {
 background-color: var(--dark-orange);
}

input[type=submit]:focus {
 background-color: var(--orange);
}

.hidden {
 display: none;
}

@media screen and (max-width: 1023px) {
  header {
   height: 50px;
  }
  
  footer {
   height: auto;
  }
  
  footer div.container {
   width: calc(100% - 2 * 25px);
   padding: 25px;
  }
  
  div.main {
   margin-top: 50px;
  }
  
  div.menu {
   width: calc(100% - 114px);
  }
  
  div.block {
   padding: 25px;
   height: 100%;
   min-height: 250px;
   width: calc(100% - 2 * 25px);
  }
  
  div.footer-block {
   width: calc(100% - 2 * 25px);
   clear: both;
   margin-bottom: 25px;
   border-bottom: 2px solid var(--yellow);
   border-right: none;
   padding: 0px 25px 25px 25px;
  }
  
  div.footer-block:last-child {
   border-bottom: none;
  }
  
  a.menu-button {
   font-size: 15px;
   margin-top: 8px;
   padding-left: calc(((100vw - 134px) / 2 - 2 * 45px) * 7/32);
   padding-right: calc(((100vw - 134px) / 2 - 2 * 45px) * 7/32);
   margin-left: calc(((100vw - 134px) / 2 - 2 * 45px) * 1/32);
   margin-right: calc(((100vw - 134px) / 2 - 2 * 45px) * 1/32);
  }
  
  a.logo img {
   height: 50px;
  }
  
  a.block {
   width: calc(100%);
   font-size: 30px;
  }
  
  a.block:hover {
   width: calc(100% - 2 * 20px);
   font-size: 40px;
  }
  
  input,
  textarea {
   max-width: calc(100% - 2 * 20px);
  }
}

@font-face {
  font-family: "Cubano";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/Cubano.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/Outfit-VariableFont_wght.ttf") format('truetype');
  font-display: swap;
}