@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100;200;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

body {
font-family: 'Exo', sans-serif;

}
.video-fluid {
  width: 100%;
  height: auto;
}


.prod2 {
font-size: 18px;
font-family: 'Rowdies', cursive;
text-decoration: none;
text-shadow:2px 2px 2px #444;
}

a:link {
font-size: 22px;
text-decoration: none;
}

h1 {
font-family: 'Exo', sans-serif;
font-size: 20px;
}

h2 {
font-family: 'Exo', sans-serif;
font-size: 18px;
}

hr {
color: #ffffff;
}



.menu {
font-family: 'Rowdies', cursive;

}

.top {
font-family: 'Exo', sans-serif;
font-weight: 200;
font-size: 12px;
color: #ffffff;
}	


.hero {
width: 100%;
height: calc(100vh - 172px);
background-size: cover;
display: flex;
flex-direction: column;
background-position: right;
justify-content: center;
align-content: center;
text-align: center;
max-height: 400px;
color: #fff;
text-shadow: 0 2px 15px rgba(0,0,0,.8);
padding: 0 20px;

}

@media only screen and (min-width : 1200px) {

body {
background-color: #e72632;

}

h1 {
font-size: 32px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

h2 {
font-size: 30px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

.plg {
font-size: 26px;
font-family: 'Rowdies', cursive;
}

.prod  {

font-size: 22px;
color: #e72632;
font-family: 'Rowdies', cursive;
}
.menu {
font-family: 'Rowdies', cursive;
font-size: 26px;
}
p {
font-size: 20px;
font-family: 'Rowdies', cursive;
color: #ffffff;
}
}

@media only screen and (max-width : 1200px) {

body {
background-color: #e72632;

}

h1 {
font-size: 28px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

h2 {
font-size: 26px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

.plg {
font-size: 22px;
font-family: 'Rowdies', cursive;
}

.prod  {

font-size: 20px;
color: #e72632;
font-family: 'Rowdies', cursive;
}
.menu {
font-family: 'Rowdies', cursive;
font-size: 18px;
}
p {
font-size: 18px;
font-family: 'Rowdies', cursive;
color: #ffffff;
}
}

@media only screen and (max-width : 992px) {

body {
background-color: #e72632;
}

h1 {
font-size: 26px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

h2 {
font-size: 24px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

.plg {
font-size: 20px;
font-family: 'Rowdies', cursive;
}

.prod  {
font-size: 18px;
color: #e72632;
font-family: 'Rowdies', cursive;
}
.menu {
font-family: 'Rowdies', cursive;
font-size: 18px;
}
p {
font-size: 18px;
font-family: 'Rowdies', cursive;
color: #ffffff;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
body {
background-color: #e72632;
}

h1 {
font-size: 24px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

h2 {
font-size: 22px;
font-family: 'Rowdies', cursive;
text-shadow:2px 2px 2px #444;
}

.plg {
font-size: 20px;
font-family: 'Rowdies', cursive;
}

.prod  {

font-size: 16px;
color: #e72632;
font-family: 'Rowdies', cursive;
}
.menu {
font-family: 'Rowdies', cursive;
font-size: 20px;
}
p {
font-size: 16px;
font-family: 'Rowdies', cursive;
color: #ffffff;
}
}

.text-justify {
  text-align: justify;
}