@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');



.hello{
	width: 600px;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 50px;

	 background-image: linear-gradient(
    180deg,
    hsl(20deg 97% 49%) 0%,
    hsl(22deg 97% 55%) 0%,
    hsl(24deg 97% 59%) 1%,
    hsl(26deg 97% 63%) 2%,
    hsl(28deg 97% 67%) 3%,
    hsl(30deg 97% 70%) 5%,
    hsl(32deg 97% 73%) 9%,
    hsl(34deg 97% 76%) 17%,
    hsl(36deg 97% 82%) 44%,
    hsl(38deg 97% 87%) 74%,
    hsl(40deg 97% 91%) 86%,
    hsl(42deg 97% 95%) 94%,
    hsl(0deg 0% 100%) 100%
  );

}


body{
  font-family: "Libre Franklin", sans-serif;
}

a {
	color: #F65505 !important;
}

.hello a{

}

.wrapper{
	/* max-width: 700px; */
}

.feature-image{
	margin-bottom: 20px;
}


h1, h2, h3, h4, h5, h6{
	font-family: "Lora", system-ui;

}

.post-content{
	font-size: 120%;
	line-height: 160%;
}

.kg-image{ /* this resizes almost all the imports */
	display: block;
  max-width:700px;
  max-height:1000px;
  width: auto;
  height: auto;
  margin: 25px;
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{
	margin-top: 50px;
}

.post-content li
{
	margin-top: 15px;
}

.site-header {
  border-top: 5px solid #F65505 !important;
}

.site-title {
  font-weight: 800 !important;
}

/* theis to provide padding to the headshots on the about page. If you change the header text this won't work */
h3#need-my-headshot-for-some-reason-hopefully-these-help + p img{
margin-top: 25px;
margin-bottom: 25px;
}

/* email newsletter button */
.newsletter-button {
  font-family: "Lora", system-ui;
  display: inline-block;
  background-color: white;
  color: #F65505 !important;
  border: 2px solid #F65505;
  border-radius: 5px;
  padding: 15px 30px;
  margin-top: 25px;
  font-size: 20px;
  text-decoration: none;
}

.newsletter-button:hover {
  background-color: #F65505;
  color: white !important;
  font-size: 26px;
  cursor: pointer;
}

/* Hello box headshot */
.hello-headshot {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
  object-fit: cover;
}

/* Hello box list */
.hello ul {
  margin: 15px 0;
  padding-left: 20px;
}

.hello li {
  margin-bottom: 8px;
}

/* Hello subscribe form */
.hello-subscribe {
  margin-top: 25px;
}

.hello .subscribe-form {
  max-width: 100%;
}

.hello .subscribe-fields {
  display: flex;
  gap: 10px;
}

.hello .subscribe-input {
  flex: 1;
  padding: 12px 15px;
  font-size: 16px;
  font-family: "Libre Franklin", sans-serif;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background: white;
}

.hello .subscribe-input:focus {
  outline: none;
  border-color: #F65505;
}

.hello .subscribe-button {
  font-family: "Lora", system-ui;
  background-color: white;
  color: #F65505 !important;
  border: 2px solid #F65505;
  border-radius: 5px;
  padding: 12px 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hello .subscribe-button:hover {
  background-color: #F65505;
  color: white !important;
}

@media (max-width: 600px) {
  .hello {
    width: 100%;
    padding: 30px;
  }

  .hello .subscribe-fields {
    flex-direction: column;
  }

  .hello .subscribe-button {
    width: 100%;
  }
}