.everything {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

@media screen and (min-width:320px) and (max-width:1300px) {
  .everything {
    display:contents;
    flex-direction: column;
    flex-wrap: wrap;
    flex:50%;
    width:50%;   
  } 
}

.header {
  height:120px;
  width:1300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-family: 'barlow condensed';
}

a {
  text-decoration: none;
  color:white;
}

.contents {
  height: 100px;
  width: 1300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content:center;
  padding-inline: 50px;
  text-decoration: none;
}

.header_contents {
  display:flex;
  height:20px;
  width:650px;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  font-size: 24;
  color:black;
  text-decoration: none;
}

.header_box {
  display:flex;
  height:100px;
  width:1300px;
}

.banner {
  height: 650px;
  width: 1300px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: flex-end;
  font-family: 'barlow condensed';
}

.get_directions {
  background-color:white;
  color: black;
  border-width: .3mm;
  border-color: rgb(61, 146, 69);
  border-width: 0.6mm;
  height: 60px;
  width: 165px;
  border-radius: 4px;
  border-style:solid;
  font-weight: normal;
  font-size: 18;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s
    border-color .15s
      color 15s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get_directions:hover {
  background-color: rgb(61, 146, 69);
  border-color: rgb(61, 146, 69);
  color: white;
}

.get_directions:active {
  opacity:0.8;
}

.banner_contents {
  display: flex;
  height: 600px;
  width: 600px;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
}

.visit {
  font-size: 130;
  font-weight: 700;
  height: 140;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.cozy {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  height: 500;
  width: 500;
  align-items: flex-start;
  font-size: 46;
  font-weight: 500;
}

.our_story {
  height: 600px;
  width: 1300px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  align-items:flex-start;
  font-family: 'barlowe condensed', sans-serif;
  overflow:visible;
  overflow-wrap:break-word;
  }

.ourstory_contents {
  font-size: 28;
  display: flex;
  height: 400px;
  width: 400px;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content:flex-start;
}

.ourstory_text {
  display:flex;
  font-size:20;
  flex-direction: row;
  flex-wrap:wrap;
}

.story_text {
  display:flex;
  height:90px;
  width:550px;
}

.reasons {
  border-color:grey;
  border-style:solid none solid none;
  border-width: 0.1mm;
  height:270px;
  width:1300px;
  display:flex;
  justify-content:space-around;
  flex-direction:row;
  flex-wrap:wrap;
  font-size:24;
  font-family: 'barlowe condensed', sans-serif;
  font-weight: 550;
}

.beans {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.pour {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.enjoy {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.quote {
  display:flex;
  height:600px;
  width:1300px;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 900;

}

material-symbols-outlined::before {
  transform:rotate(190deg)
}

.quote_contents {
  display: flex;
  font-size: 42;
  height: 600px;
  width: 450px;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.quote_actual {
  display:flex;
  height:200px;
  flex-wrap: wrap;
  align-content: center;
}

.quote_left {
  display:flex;
  width:450px;
  justify-content: flex-end;
  transform:rotate(180deg);
}

.quote_right {
  display:flex;
  width:450px;
  justify-content: space-between;
  font-size: 16;
  font-weight: 700;
  font-family: 'barlowe condensed', sans-serif;
}

.quote_contents::before {
  content:"<i class="material-symbols-outlined"></i>"
}

.quote_contents::after {
  content:"<i class="material-symbols-outlined"></i>"
}

.quote_picture {
  display: flex;
  height: 600px;
  width: 750px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.quote_quote {
  display:flex;
}

.menu {
  border-color: grey;
  border-style: solid none none none;
  display: flex;
  height: 900px;
  width: 1300px;
  font-family: 'Barlowe Condensed', sans-serif;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
}

.menu_contents {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:725px;
  width: 700px;
  font-size: 38;
  align-content: center; 
  justify-content: space-between;
}

.menu_label {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content: space-evenly;
  font-size: 22;
  font-weight: 550;
  height:100px;
  color:rgb(207, 143, 26)
}

.menu_items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 600px;
  width: 570px;
  font-size: 34;
  font-weight: 200;
  align-items: flex-start;
}

.price {
  color:rgb(207, 143, 26);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 38;
}

.the_best {
  font-family: 'Instrument Serif', serif;
  font-size: 56;
  font-weight:600;
  color:black;
}

.more_menu {
  background-color:rgb(207, 143, 26);
  color: black;
  font-weight: 300;
  border-width: .3mm;
  border-color: none;
  height: 80px;
  width: 250px;
  border-radius: 4px;
  border-style:solid;
  font-weight: normal;
  font-size: 18;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s
    border-color .15s
      color 15s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more_menu:hover {
  opacity:0.9;
}

.more_menu:active {
  opacity:0.8;
}

.button {
  height:90px;
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gallery {
  height:900px;
  width:1300px;
  display:flex;
  opacity: 0.9;
}

.left {
  display:grid;
  height:900px;
  width:400px;
  align-content: space-between;
  justify-content: space-between;
}

.middle {
  display:grid;
  height:900px;
  width:500px;
  justify-content: center;
}

.right {
  display: grid;
  height: 900px;
  width: 400px;
  align-items: flex-end;
  justify-content: end;
  align-content: space-between;
}

.locations {
  display:flex;
  height:750px;
  width:1300px;
  justify-content: space-evenly;
}

.black {
  display: flex;
  justify-content: center;
  height: 750px;
  width: 625px;
  align-items: center;
}

.hours {
  font-weight: 700;
}

.location_details {
  display: flex;
  height: 200px;
  width: 550px;
  flex-direction: row;
  font-size: 20;
  font-family: 'barlowe condensed', sans-serif;
  font-weight: 500;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.opening_closing {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100px;
  width: 125px;
}

.address {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  height:100px;
  width: 200px;
}

.green {
  display: flex;
  justify-content: center;
  height: 750px;
  width: 625px;
  align-items: center;
}

.green_contents {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 600px;
  height: 700px;
  border-color: black;
  border-style: solid;
}

.coffee_cube_green {
  height:100px;
  width:550px;
  display:flex;
  align-content: space-around;
  flex-wrap: wrap;
  font-size: 36;
  font-family: 'barlowe condensed', sans-serif;
  font-weight: 600;
}

.hours {
  font-weight: 700;
}

.location_details {
  display: flex;
  height: 200px;
  width: 550px;
  flex-direction: row;
  font-size: 20;
  font-family: 'barlowe condensed', sans-serif;
  font-weight: 500;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.opening_closing {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100px;
  width: 125px;
}

.address {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  height:100px;
  width: 200px;
}

.black_contents {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 625px;
  height: 700px;
  border-color: black;
  border-style: solid;
}

.get_directions_black {
background-color:white;
color: black;
border-width: .3mm;
border-color: rgb(0, 0, 0);
height: 60px;
width: 165px;
border-radius: 4px;
border-style:solid;
border-width: 0.6mm;
font-weight: normal;
font-size: 18;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background-color .15s
  border-color .15s
    color 15s;
display: flex;
justify-content: center;
align-items: center;
}

.get_directions_black:hover {
background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
color: white;
}

.get_directions_black:active {
opacity:0.8;
}

.footer {
  background-color: rgb(67, 46, 11);
  color:white;
  display:flex;
  height:200px;
  width:1300px;
  font-family: 'barlowe condensed', sans-serif;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.footer_contents {
  display:flex;
  align-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}

.footer_label {
  display: flex;
  height: 150px;
  width: 300px;
  font-size: 26;
  font-weight: 600;
  justify-content: space-evenly;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer_text {
  display: flex;
  height: 190px;
  width: 200px;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  font-size: 16;
  font-weight: 500;
  color:rgb(218, 189, 137);
}

.opac:hover {
  opacity:0.8;
  cursor:pointer;
}

.opac:active {
  opacity:0.7;
}