/* happily ever after-party stylesheet*/

/* variables */

html {
	--text-color: #313131;
	--accent-color: #8E44AD; 
}

/* base elements */

html {
	height: 100%;
	min-height: 100%;
}
body {
	margin: 5% auto;
  line-height: 200%;
}
/* If the screen size wider than this, set this typography */
@media screen and (min-width: 651px) {
	body {font-size: 100%; width: 85%;}
}
/* If the screen size is skinnier than this, set this typography */
@media screen and (max-width: 650px) {
	body {font-size: 90%; margin: 4% 6%;}
}
hr {
	border-width: 0;
	border-top: 1px solid var(--text-color);
	width: 40%;
	margin-top: 10%;
	margin-bottom: 10%;
}

img {
  max-width: 60%;
  border: 15px solid var(--text-color);
  border-radius: 3%;
}

/* sections */

.footer {
  font-family: serif;
	font-size: 70%;
	text-align: right;
	margin-top: 3%;
	padding-bottom: 3%;
	line-height: 145%;
}

/* typography */

h1 {
	font-family: "Lobster", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 400%;
	line-height: 110%;
	color: var(--accent-color); 
}
h2, h3, h4 {
	font-family: "Poiret One", sans-serif;
  font-weight: 600;
  font-style: normal;
	padding-top: 5%;
	color: var(--text-color);
	text-align: left;
}
h2 {
	font-size: 200%;
}
h3 {
	font-size: 160%;
}
h4 {
	font-size: 125%;
}
p, blockquote {
  font-family: "Solway", serif;
  font-size: 140%;
  font-weight: 300;
  font-style: normal;
	color: var(--text-color);
}
.intro {
  font-size: 180%;
  line-height: 125%;
}
ul {
	color: var(--text-color);
	list-style-type: circle;
}
ol {
	color: var(--text-color);
}

/* hyperlinks */

.button a:link, .button a:visited {
	background-color: var(--accent-color);
	font-family: "Poiret One", sans-serif;
  font-weight: 800;
  color: white;
	border: 1px solid var(--accent-color);
	border-radius: 50px;
	padding: 1% 3%;
	margin: 2% 0;
	text-align: center;
	font-size: 90%;
	letter-spacing: 12%;
	display: inline-block;
	text-transform: uppercase;
}
.button a:hover, .button a:active {
  background-color: white;
  color: var(--accent-color);
}
a, a:link, a:visited, a:hover, a:active {
	color: var(--accent-color);
	text-decoration: none;
}

/* table styling */

table {
	border-collapse: collapse;
	border-spacing: 5px;
	margin:3% 0%;
}
th,
td,
tr {
	padding: 15px 0px;
	text-align: left;
	border-bottom:1px solid var(--accent-color);
}

/* form styling */

label {
	color: var(--text-color);
}
input[type=text] {
	width: 50%;
	color: var(--text-color);
}
input[type=button], input[type=submit], input[type=reset] {
	background-color: white;
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	color: var(--accent-color);
	padding: .7% 1%;
	margin-right: 1.5%;
	font-family: serif;
	font-size: 100%;
	text-decoration: none;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
	background-color: var(--accent-color);
	color: white;
}