/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* alice-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/alice-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Playfair Display', sans-serif;
  font-weight: true;
  line-height: 1.15;
  padding: 10%;

}

h1,
.text-size-h1 {
  font-family: 'Playfair Display', sans-serif;
  font-weight: 400;
  margin-top: 0;
  font-size: 3.05em;
}
h2,
.text-size-h2 { 
    font-family: 'Playfair Display', sans-serif;
    font-size: 2.44em;
  background-color: #AF8D86;
border-radius: 100%;
 }

h3,
.text-size-h3 { font-size: 1.95em; }

html {font-size: 1em;}

p {
  font-family: 'Alice';
  font-size: 1em;
	padding: 10%;
}

header{
    background-image: url('/images/closeup-tapestry.png');
    font-family: 'Playfair Display', sans-serif;
    color: #260C1A;
    background-color: #AF8D86;
}

body{
    background-image: url('/images/Wheat-Pattern.jpg');
    font-family: 'Alice', sans-serif;
    font-weight: false;
    line-height: 1.65;
}

nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1%;
    padding: 1%;
	max-height: 30%;

}

nav ul li{
  color: #EDBFC6;
  background-position: center;
  padding: 1%;
  background-color: #EDBFC6;
  font-family: 'Playfair Display';
  font-size: 1.15em;
  border-radius: 35%;
}

a:link {
  color: #FFFFFF;
  text-decoration: none;
}

a:visited {
  color: #260C1A;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

a:active {
  color: #260C1A;
  text-decoration: underline;
}

.Cloth-moth{
	display: flex;
	padding: 2.5%;
	color: #260C1A;	
}

.icon{
	border-radius: 35%;
    background-color: #EDBFC6;
}

.sample{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;
	min-height: 0;
	border-radius:20%;
}

.About{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #432E36;   
    color: #EDBFC6;
	min-height: 0;
	border-radius:20%;
}

.video-example{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;
	min-height: 0;
	border-radius:20%;
}

.upload-a-video{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #432E36;   
    color: #FFFFFF;
	min-height: 0;
	border-radius:20%;
}

.pattern-example{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;   
	min-height: 0;
	border-radius:20%;
}

.pattern-image{
    size: 10%;
}

.upload-a-pattern{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;    
	min-height: 0;
	border-radius:20%;
}

.forum-example{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;    
	min-height: 0;
	border-radius:20%;
}

.upload-a-post{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #5F4842;   
    color: #FFFFFF;  
	min-height: 0;
	border-radius:20%;
}

.login{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #432E36;   
    color: #EDBFC6;    
	min-height: 0;
	border-radius:20%;
}

.signup{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #432E36;   
    color: #EDBFC6;    
	min-height: 0;
	border-radius:20%;
}

.contact{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	align-content: flex-start;
	gap: 1%;
    margin: 0 auto;
    padding: 10%;
    background-color: #432E36;   
    color: #EDBFC6;      
	min-height: 0;
	border-radius:20%;
}