@import url('https://fonts.googleapis.com/css2?family=Barrio&display=swap');

body {
  background-image: url(../images/woodbackground.png);
  background-size: contain;
  background-repeat: repeat-y;
  background-position: right center;
}

/* - - - - - All copy - - - - - */
h1{
  font-family: "Barrio", system-ui;
  font-size: clamp(2rem, 0.6087rem + 6.9565vw, 6rem);
  color: #4D3420;
}

h2{
  font-family: "Barrio", system-ui;
  font-size: clamp(1.5625rem, 1.2364rem + 1.6304vw, 2.5rem);
  color: #4D3420;
}

h3{
  font-family: "Barrio", system-ui;
  font-size: 2rem;
  color: #4D3420;
}

p{
  font-family: "Barrio", system-ui;
  font-size: 1.5rem;
  color: #F2DEB0;
}

/* - - - - - Header - - - - - */
.home{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Homehero.png);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.logo{
  height: 168px;
}

.hamburger-icon {
  font-size: 5rem;
  transition: all 500ms;
  display: none;
}

.hamburger-icon span:hover {
  color: DarkRed;
}

.top{
  display: block;
  color: #F2DEB0;
  paint-order: stroke fill;
  -webkit-text-stroke: 20px #4D3420;
}

/* - - - - - Main - - - - - */
.pages{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  flex: 1;
  text-align: center;
  margin: 0 40px;
  gap: 20px;
}

.pages h3{
  position: relative;
  top: -12vh;
  right: 1vw;
  color: #F2DEB0;
  paint-order: stroke fill;
  -webkit-text-stroke: 5px #4D3420;
  gap: 20px;
}

.page{
  flex: 1;
}

.location{
  display: flex;
  flex-direction: row;
  align-items: center;
  /*flex: 1;*/
  width: 50%;
  margin: 20px;
  gap: 20px;
}

.location h2{
  min-width: 18ch;
}

.center{
  text-align: center;
}

.title{
  margin: 100px 0 0 0;
}

.items{
  margin: 0 100px 50px 100px;
}

.item{
  width: 50%;
  display: flex;
  align-items: center;
}

.mobile-nav-container {
  background-image: url(../images/woodbackground.png);
  background-size: contain;
  background-repeat: repeat-y;
  background-position: right center;
  color: black;
  font-size: 1.5rem;
  
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  display: none;
  justify-content: center;
  align-items: center;
}

/* - - - - - Mobile Nav - - - - - */
.mobile-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
}

.mobile-nav-link {
  transition: all 500ms;
  text-decoration: none;
}

.mobile-nav-link:hover {
  color: ghostwhite;
}

.close-button {
  font-size: 2rem;
  transition: all 500ms;

  position: absolute;
  top: 0px;
  right: 0px;
  padding: 20px;
}

.close-button:hover {
  color: ghostwhite;
}

a, a:link, a:visited {
  color: inherit;
  text-decoration: none;
}
/* - - - - - Phone size - - - - - */
@media (max-width: 640px){
  .location{
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  
  .item{
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  
  .pages{
    display: none;
  }
  
  .navigation{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .home{
    justify-content: space-between;
  }
  
  .logo{
    height: 100px;
  }
  
  .hamburger-icon{
    display: block;
    width: 100px;
    background-image: url("../images/crumpledpaper.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 20% 0%;
  }
  
  .hamburger-icon span{
    position: relative;
    top: -15px;
    left: 25px;
  }
}
/* - - - - - Footer - - - - - */
footer{
  background-color: #4D3420;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 40px 20px 40px;
  align-items: center;
}

/* - - - - - Events - - - - - */
.eventshero{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Events/eventhero.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.recuring{
  margin: 100px;
}

.recuring p{
  color: #4D3420;
}

.event{
  margin: 50px;
}

.cards{
  margin: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.card{
  padding: 30px;
  max-width: 600px;
  flex: 1 1 calc(50% - 5px);
}

@media (max-width: 640px){
  .card{
    max-width: 400px;
    flex: 1 1 80%;
  }
}
/* - - - - - Fibers - - - - - */
.fibershero{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Fibers/Fiberhero.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* - - - - - Misc - - - - - */
.mischero{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Misc/mischero.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* - - - - - Paints - - - - - */
.paintshero{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Paints/Painthero.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* - - - - - Textiles - - - - - */
.textileshero{
  height:517px;
  /*height:100svh;*/
  padding:0;
  background-image: url(../images/Textiles/Textilehero.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}