@charset "UTF-8";
/* CSS Document */

:root {	
	--black: #000000;
	--white: #FFFFFF;
	
	--pink: #dc7fb4;
}

*{
	margin: 0;
    padding: 0;
    box-sizing: border-box;
	//cursor: default;
	font-family: "Inter", sans-serif;
	//font-weight: 700;
}

body {
	font-size: 1.5vw;
	background-color: var(--white);
	color: var(--black);
	cursor: url('images/Flower cursor black.png') 16 16, auto;
	line-height: 1.2;
}

a {
	text-decoration: none;
	cursor: url('images/Flower cursor.png') 16 16, auto;
	color: var(--black);
}
a:hover h1 {
	color: var(--pink);
}

h1 {
	font-family: "Playfair Display", serif;
}

/* main */

header {
	text-align: center;
	padding: 50px;
	background-color: var(--black);
	color: var(--white);
}
header h1 {
	padding-bottom: 20px;
	font-size: 5vw;
}

.main {
	display: flex;
	padding: 4vw 8vw;
	flex-direction: column;
	gap: 50px;
}

.articles {
	display: flex;
	gap: 30px;
	justify-content: space-between;
}
.article{
	padding: 30px;
}
.article h1 {
	font-size: 2.3vw;
	padding: 20px 0;
}
.article img {
	width: 100%;
	object-fit: scale-down;
	padding: 20px;
	border: 5px solid var(--black);
}

/* pages */
.articlepageheader {
	display: flex;
	justify-content: space-between;
	padding: 20px 8vw;
	align-items: center;
}
.articlepageheader h1 {
	font-size: 2vw;
	padding: 0;
	color: var(--white);
}
.articlepage {
	padding: 8vw;
	font-size: 3vw;
}

.one-column {
	width: 17vw;
}
.two-column {
	width: 38vw;
}
.three-column {
	width: 63vw;
}
.four-column {
	width: 84vw;
}

.dropcap {
  float: left;
  font-size: 10vw;
  line-height: 1.5;
  margin-right: 0.1em;
  //font-family: 'Playfair Display', serif;
  font-weight: 700;
	color: var(--white);
  background-color: var(--black);
  padding: 0.1em;
	width: 17vw;
  height: 17vw;
	text-align: center;
}

.articlepage img {
	width: 50vw;
	object-fit: scale-down;
	position: absolute;
	left: 60vw;
	z-index: -1;
}

.line-1 { margin-left: 8vw; }
.line-2 { margin-left: 21vw; }
.line-3 { margin-left: 46vw; }
.line-4 { text-indent: 67vw; }

.pull {
  font-size: 10vw;
  font-style: italic;
  font-family: 'Playfair Display', serif;
  color: var(--pink);
	font-weight: 700;
	text-align:right;
	text-align: center;
}

.fading-text {
  background: linear-gradient(to right, black 5%, rgba(0,0,0,0));
  -webkit-background-clip: text;
  color: transparent;
}


.bounce, .grow, .hover-word, .equal-text, .skew-text, .disappearing-word, .bouncing-word, .floating-word, .flower-word, .bloom-word, .topple, .space, .constrained, .fluctuation, .intoxicated, .flower-name, .nothing, #violent-word {
	color: var(--pink);
	cursor: url('images/Flower cursor.png') 16 16, auto;
}


.bounce {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.grow {
	display: inline-block;
  transition: transform 0.3s ease-in-out;
}


svg {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }
.spiral {
  transform-box: fill-box;     /* Makes transformOrigin relative to the element's bounding box */
  //transform-origin: center;    /* Rotates around its center */
  transition: transform 2s ease;
  }

 .spiral text{
	fill: var(--pink);
 }


.hover-word:hover .hover-text {
	opacity: 0;
}


.split-para {
  display: flex;
	flex-wrap: wrap;
}

.split-para span {
  display: inline-block;
  transition: transform 0.5s ease;
}


.skew-text {
	transition: transform 0.8s ease;
	display: inline-block;
}

/* Make the word 'unendingly' disappear into the distance */
.disappearing-word {
  display: inline-block; /* Ensure it behaves like a block for transformations */
  transition: transform 1s ease, opacity 1s ease;
}


/* Style for the word 'flourish' */
.bouncing-word span{
  display: inline-block;
	animation-fill-mode: forwards;
}

/* Bounce animation */
@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-80px) scale(1.5);
  }
  100% {
    transform: translateY(-40px) scale(2);
  }
}


.floating-word {
  display: inline-block;
}

.flower-word {
	display: inline-block;
}

.bloom-word {
  display: inline-flex;
	transition: transform 0.4s ease-in-out;
}

.bloom-word span {
  display: inline-block;
  transition: transform 0.4s ease-in-out;
	transform-origin: bottom center;
}

#flower2 {
	left: 50vw;
	//position: fixed;
	bottom: 0;
}
.sway {
	transform-origin: bottom center; 
	animation: sway 3s infinite ease-in-out;
}
@keyframes sway {
	0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(45deg);
  }
	60% {
    transform: rotate(-45deg); 
  }
  100% {
    transform: rotate(0deg); 
  }
}

.topple {
	display: inline-block;
	transform-origin: bottom left;
	transition: transform 0.4s ease-in-out;
}

.constrained {
	display: inline-block;
	transition: transform 0.3s ease forwards;
}


.fluctuation span {
	display: inline-block;
	transition: transform 0.3s ease;
}
@keyframes fluctuate {
  0%   { transform: scaleY(1); }
  25%  { transform: scaleY(2); }
  50%  { transform: scaleY(1.5); }
  75%  { transform: scaleY(3); }
  100% { transform: scaleY(1); }
}


@keyframes wobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

.intoxicated span {
  display: inline-block;
  transition: transform 0.3s ease;
	transform-origin: bottom center;
}


.flower-name {
	text-align: center;
	position: absolute;
	font-family: "Playfair Display", serif;
	font-size: 2vw;
	font-weight: 700;
}
.flower-name:hover {
	font-size: 5vw;
}
.bad-name {
	text-decoration: line-through;
}
.bad-name:hover {
	font-size: 1vw;
}

#flower-name-1 {
	top: 75vh;
	left: 5vw;
}
#flower-name-2 {
	top: 70vh;
	left: 60vw;
}
#flower-name-3 {
	top: 110vh;
	left: 10vw;
}
#flower-name-4 {
	top: 145vh;
	left: 40vw;
}
#flower-name-5 {
	top: 240vh;
	left: 30vw;
}
#flower-name-6 {
	top: 140vh;
	left: 5vw;
}
#flower-name-7 {
	top: 90vh;
	left: 30vw;
}
#flower-name-8 {
	top: 135vh;
	left: 65vw;
}
#flower-name-9 {
	top: 180vh;
	left: 20vw;
}
#flower-name-10 {
	top: 190vh;
	left: 60vw;
}
#flower-name-11 {
	top: 230vh;
	left: 65vw;
}
#flower-name-12 {
	top: 270vh;
	left: 10vw;
}
#flower-name-13 {
	top: 180vh;
	left: 80vw;
}
#flower-name-14 {
	top: 265vh;
	left: 75vw;
}
#flower-name-15 {
	top: 210vh;
	left: 2vw;
}
#flower-name-16 {
	top: 330vh;
	left: 30vw;
}
#flower-name-17 {
	top: 275vh;
	left: 50vw;
}
#flower-name-18 {
	top: 320vh;
	left: 65vw;
}
#flower-name-19 {
	top: 305vh;
	left: 2vw;
}

.flower-meaning {
	font-style: italic;
	font-size: 3vw;
	font-family: "Inter", sans-serif;
  position: absolute;
  top: 120%; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
	display: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}


@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-2px, -2px) rotate(-1deg); }
  20% { transform: translate(2px, -2px) rotate(1deg); }
  30% { transform: translate(-2px, 2px) rotate(0deg); }
  40% { transform: translate(2px, 2px) rotate(1deg); }
  50% { transform: translate(-2px, -2px) rotate(-1deg); }
  60% { transform: translate(2px, -2px) rotate(0deg); }
  70% { transform: translate(-2px, 2px) rotate(1deg); }
  80% { transform: translate(2px, 2px) rotate(-1deg); }
  90% { transform: translate(-2px, -2px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

#violent-paragraph {
	display: inline-block;
}


footer {
	display: flex;
	justify-content: center;
	padding: 20px 0 10px 0;
	background-color: var(--black);
	color: var(--white);
}
footer p {
	padding: 0 10px;
}
footer img {
	width: 2vw;
}

/* Mobile layout */
@media (max-width: 768px) {
	header h1 {
		font-size: 10vw;
	}
	header p {
		font-size: 4vw;
	}
	
	.articles {
		flex-direction: column;
	}
	.article h1 {
		font-size: 7vw;
	}
	.article p {
		font-size: 4vw;
	}
	.article em {
		font-size: 5vw;
	}
	
	.articlepageheader p, .articlepageheader h1 {
		font-size: 3vw;
	}
	.articlepage {
		font-size: 6vw;
	}
	.pull {
		font-size: 16vw;
	}
	
	.line-1 { margin-left: 4vw; }
	.line-2 { margin-left: 13vw; }
	.line-3 { margin-left: 30vw; }
	.line-4 { text-indent: 40vw; }
	
	svg {
		display: none;
	}
}