@font-face {
    font-family: Cardo;
    src: url(./fonts/cardo/Cardo-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: DidactGothic;
    src: url(./fonts/didact-gothic/didactgothic-regular.otf);
    font-weight: normal;
}

/* whole website classes */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #d6e8e6;
}

h1, h3 {
    font-family: Cardo;
    color: white;
        margin: 2vw;
}

h2, h4, h5, h6, ul, li, p, a {
    font-family: DidactGothic;
    color: white;
    text-decoration: none;
}

.footer p {
    color: #565e6b;
    font-size: max(16px, 2vw);
}

.footer {
	height: 5vh;
	border-top-style: solid;
	border-top-width: 0.5px;
}

/* landing general classes */

.landing-section {
    float: left;
    display: flex;
    width: 100vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.landing-section > * {
    padding-left: 1vw;
}


.landing-section > *:last-child {
    padding-right: 1vw;
}

.landing-info {
    height: 25vh;
    padding: 0;
    display: flex;
	align-items: center;
}

.landing-info img {
    padding: 0;
}

.landing-info-text {
    width: 100%;

	padding-top: 2vw;
	padding-bottom: 2vw;
    backdrop-filter: blur(10px) saturate(70%);

    text-align: center;
    font-size: 24px;
    letter-spacing: 0.15vw;
}

.landing-img-container {
    overflow: hidden;
    position: relative;
}

.landing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-text {
    position: absolute;
}

/* landing specific classes */

.landing1 {
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
}

.landing1-left {
    width: 50vw;
}

.landing1-left-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 0 10px 0 10px;
}

.landing1-title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
}

.landing1-title p {
    font-size: max(2vw, 20px);
    letter-spacing: 0.5vw;
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.landing1-title h1 {
    font-size: max(7vw, 70px);
    letter-spacing: 0.3vw;
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.landing1-title h2 {
    font-size: max(2.7vw, 28px);
    letter-spacing: 0.2vw;
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.landing1-right {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* .landing1-right-top {} */

.landing1-right-bottom {
    height: 75%;
    padding-top: 1vw;
}

.landing1-right-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 5px 0 10px 0;
}

.landing1-right-overlay {
    position: absolute;
    bottom: 0;
    background: #68868360;
    width: 100%;
    transition: 0.7s ease;
    opacity:0;
    font-size: max(1.7vw, 14px);
    padding: 2vw;
    text-align: center;
}

.landing1-right:hover .landing1-right-overlay {
    opacity: 1;
}

.yarn-menu {
    background-color: white;
    padding: 1vw;
    height: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 10px 0 0 10px;
}

.yarn-menu a {
    background-color: #565e6b;
    width: 25%;
    height: 100%;
    margin-right: 1vw;
    text-align: center;
    align-content: center;
    font-size: max(2vw, 16px);
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.yarn-menu a:last-of-type {
    width: 25%;
    margin: 0;
}

.yarn-menu-1 {
    background-image: url(images/yarn-menu-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 0 0 5px;
}

.yarn-menu-2 {
    background-image: url(images/yarn-menu-2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.yarn-menu-3 {
    background-image: url(images/yarn-menu-3.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.yarn-menu-4 {
    background-image: url(images/yarn-menu-4.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.landing2 {
    height: 75vh;
}

.landing2-left {
    width: 15vw;
}

.landing2-left-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 5px 10px 10px 0;
}

.landing2-middle {
    width: 60vw;
}

.landing2-middle-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 0 10px 0 10px;
}

.landing2-subtitle {
    top: 7%;
	left: 15vw;
    width: 60%;
    transform: translate(-50%, -50%);
    text-align: right;
    font-size: max(2.5vw, 20px);
}

.landing2-subtitle * {
	color: #3c3333;
}


.landing2-subtitle a {
	font-family: Cardo;
}

.landing2-right {
    width: 25vw;
}

.landing2-right-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 5px 10px 10px 0;
}

.landing3 {
    height: 75vh;
    padding-top: 0;
}

.landing3-left {
    width: 25vw;
}

.landing3-left-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 5px 10px 10px 0;
}

.landing3-middle {
    width: 58vw;
}

.landing3-middle-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 0 10px 0 10px;
}

.landing3-subtitle {
    top: 10%;
    left: 45%;
    width: 70%;
    transform: translate(-50%, -50%);
    text-align: left;
    font-size: max(2.5vw, 20px);;
}

.landing3-subtitle a {
	font-family: Cardo;
}

.polaroids {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 20vw;
	padding: 0;
}

.polaroids img {
    width: 80%;
    height: 30vh;
    aspect-ratio: 0.85 / 1;
    background-color: white;
    padding: 5%;
    padding-bottom: 10vh;
	padding-top: 1vw;
    box-shadow: 0 0 1vw #b1bccf;
    position: relative;
    float: left;
}

.polaroids img:first-of-type {
    transform: rotate(5deg);

}

.landing4 {
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
}

.landing4-left {
    width: 33vw;
}

.landing4-left-img {
    box-shadow: 0 0 1vw #b1bccf;
    border-radius: 5px 10px 10px 0;
}

.landing4-title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;
    height: 30vw;

    text-align: center;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.landing4-links {
    font-size: max(2vw, 16px);
}

.landing4-title a {
    font-size: max(2vw, 16px);
    letter-spacing: 0.5vw;
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.landing4-right {
    width: 67vw;
}

.landing4-title h3 {
    font-size: max(5vw, 36px);
    letter-spacing: 0.3vw;
    text-shadow: 0.1vw 0.1vw #565e6b;
}

.landing4-links {
	display: flex;
	flex-direction: column;
}

.landing4-title a {
	font-size: max(2.5vw, 20px);
}

/* page general classes */
.page-header {
    height: max(15vw, 200px);
    padding: 0;
    display: flex;
	align-items: center;
}

.page-header-title {
    width: 100%;

	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
    backdrop-filter: blur(10px) saturate(70%);

    text-align: center;
    font-size: max(3vw, 28px);
    letter-spacing: 0.15vw;
}

.page-menu {
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    display: flex;
	justify-content: center;
    padding-top: 0.5vw;
}

.page-menu-links {
    display: flex;
    width: 95%;
    justify-content: space-between;
    margin-bottom: 2vh;
    margin-top: 2vh;
}

.page-menu-links a {
    font-family: DidactGothic;
    font-size: max(2vw, 16px);
    letter-spacing: 0.15vw;
    color: #565e6b;
}

/* gallery specific classes */

.gallery-collection-group {
	background-color: #ebf4f3;
	padding-bottom: 4vw;
	margin-top: 1vw;
}


.gallery-collection-title {
    text-align: center;
    font-size: max(3vw, 28px);
    color: #565e6b;
    padding: 1vw;
}

.gallery-collection-grid {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
}


.gallery-item-group {
    display: flex;
    flex-direction: column;
}

.gallery-item img {
    height: 70vh;
    object-fit: cover;
    width: max(25vw, 250px);
	padding-left: 1vw;
}

.gallery-image-overlay-link {
    text-decoration: none;
    display: block;
    position: relative;
}

.gallery-image-overlay-wrapper {
    position: relative;
    overflow: hidden;
}

.gallery-image-overlay-title {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    text-align: center;
    margin-left: 1vw;
	padding: 1vw;
	font-size: max(2vw, 16px);
	bottom: 1vw;
    font-family: Cardo;
}

.gallery-image-overlay-link:hover .image-overlay-title {
    background: rgba(0, 0, 0, 0.7);
}

/* Blog and post specific classes */
article {
    background-color: #f6f8f8;
    padding: 2vw;
	padding-left: 4vw;
	margin: 2vw;
	margin-top: 1vw;
	box-shadow: 0 0 1vw #b1bccf;
}

article * {
	text-align: left;
    color: #565e6b;
    font-size: max(1.5vw, 14px);
}

.entry-title {
	font-size: max(4vw, 40px);
	padding-top: 0;
	padding-bottom: 1vw;
}

.entry-title a {
	font-family: Cardo;
	font-size: max(3.5vw, 36px);
	text-decoration: underline;
}

.entry-title a:hover {
	color: #359996;
	transition: 0.4s;
}

.entry-header {
	padding-bottom: 1.5vw;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #b1bccf;
}

.entry-header p {
    font-family: Cardo;
	font-size: max(1.8vw, 20px);
	font-style: italic;
    color: #838c9b;
}

.entry-footer {
    font-family: Cardo;
	font-size: max(1.8vw, 20px);
    color: #838c9b;
}

/* single post specific */
.entry-content {
	padding-top: max(20px, 2vw);
}

.entry-content p {
	font-size: max(20px, 1.8vw);
	margin-bottom: max(12px, 1vw);
}

.entry-content strong {
	font-size: max(20px, 1.8vw);
	margin-bottom: 1vw;
}

.wp-block-image {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	background-color: #ebf4f3;
}

.wp-block-image img {
  object-fit: cover;
  border-radius: 0 10px 0 10px;
}

/* whole blog */
.post-thumbnail {
	margin-bottom: 1vw;
}

.entry-summary {
	margin-top: 0.5vw;
}

.entry-summary p {
    text-align: left;
	font-size: max(20px, 1.8vw);
	margin-bottom: max(12px, 1vw);
}

.entry-header img {
	width: 100%;
    height: 30vw;
    object-fit: cover;
}

.entry-footer * {
	font-family: Cardo;
    color: #838c9b;
}

/* about */
.page-main * {
	color: #3c3333;
}

.page-main h1 {
	font-family: Cardo;
	font-size: max(24px, 4vw);
}

.page-main .wp-block-image {
	background-color: #d6e8e6;
}

.page-main h2 {
	font-family: DidactGothic;
	font-size: max(19px, 3vw);
		margin: 2vw;
}

.page-main p {
		margin: 2vw;
    font-size: var(--wp--preset--font-size--medium);
}

.page-main img {
    padding: 2vw;
}

/* mobile stuff */
@media only screen and (max-width: 900px) {
      .landing1 {
          width: 100vw;
          flex-direction: column;
          height: 200vh;
          max-height: 200vh;
          min-height: 200vh;
      }
      .landing1-left {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          padding-right: 1vw;
      }
      .landing1-right {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
      }
      .yarn-menu {
          flex-direction: column;
          width: 20vw;
          height: 99vh;
          margin-top: 1vw;
          margin-bottom: 1vw;
          margin-right: 1vw;
      }
      .yarn-menu a {
          flex-direction: column;
          width: 100%;
          margin: 0.5vw 1vw;
          font-size: 3vw;
      }
      .yarn-menu a:last-of-type {
          flex-direction: column;
          width: 100%;
          margin: 0.5vw 1vw;
      }
      .landing1-right-bottom {
          width: 80vw;
          height: 100vh;
      }
      .landing2 {
          height: 143vh;
          flex-wrap: wrap;
      }
      .landing2-left {
          height: 50vh;
          width: 20%;
      }
      .landing2-middle {
          height: 50vh;
          width: 80%;
          padding-right: 1vw;
      }
      .landing2-subtitle {
          top: 7%;
          left: 12vw;
      }
      .landing2-right {
          height: 90vh;
          width: 100%;
          margin-top: 1vw;
      }
      .landing3 {
          height: 92vh;
          padding-top: 1vh;
      }
      .landing3-left {
          width: 40vw;
          height: 90vh;
      }
      .landing3-middle {
          width: 60vw;
          height: 90vh;
          padding-right: 1vw;
      }
      .polaroids {
          display: none;
      }
      .landing-section > *:last-child {
          padding-right: 0;
      }
      
      .landing4-links a {
          margin: 1.5vw;
      }

      .landing4 {
          width: 100vw;
          flex-direction: column;
          height: 175vh;
          max-height: 175vh;
          min-height: 300vh;
      }
      .landing4-left {
				padding-right: 1vw;
				width: 100%;
				height: 100%;
				object-fit: cover;
      }
      .landing4-right {
				padding-top: 1vw;
				width: 100%;
				height: 175vh;
				object-fit: cover;
      }
  }

@media only screen and (max-width: 750px) {
	.landing2-subtitle {
		left: 18vw;
		top: 12%;
		width: 40%
  }
}
  
/* comments */
.comment-respond {
	padding-left: 2vw;
}

.comment-respond * {
	color: #565e6b;
}

/*adjustments*/
.landing1-title * {
	color: #391d07;
  text-shadow: 0.1vw 0.1vw whitesmoke;
}

.landing1-title h1 {
    color: whitesmoke;
    text-shadow: 0.2vw 0.2vw #391d07;
}

.yarn-menu a {
	color: whitesmoke;
}

.landing1-right-overlay {
	background: #291c1360;
}