/* variables */
 :root {
	--root-size: 16px;
	--root-size-author: 10px;
	--root-size-h1: 14.25px;
	--root-size-small: 8.75px;
	--root-size-h2: 10px;
	--root-size-h3: 16px;
	--border-radius: 200px;
	--root-size-p: 16px;
	--article-margin: 15px;
	--line-height: 140%; 
	--max-height: 160px;
}


#arrowup {
	font-weight: 700;
	background-color: #9ed197;
	border: 1.5px solid;
	text-align: center;
	margin: auto;
	position: fixed;
	right: 20px;
	padding: 8px;
	padding-left: 14px;
	padding-right: 14px;
	bottom: 14px;
	border-radius: 8px;
	z-index: 100;
}
p {
	padding-bottom: 20px;
}

article {
	
	padding-bottom: 200px;
	line-height: 180%;
}
#flower {
	color: #EA7518;
	display: inline-block; 
	animation: rotate 3s linear infinite;
	transform-origin: center;
  }
@keyframes rotate {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
  #flower2 {
	color: #9ed197;
	display: inline-block;
	animation: rotate 3s linear infinite;
	transform-origin: center;
  }
@keyframes rotate {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }

section {
	padding-top: 10px;
}
sup {
	line-height: 0%;
	color: #ea4218;
	font-size:small;
	vertical-align:super;
}
.bigtext sup {
	font-size:larger;
}

.sectionmain {
	border: 2px solid;
	border-radius: 20px;
	background-color: #cdd197;
	margin: 8px;
	padding: 16px;
	padding-top: 22px;
}
.sectionmain2 {
	border: 2px solid;
	border-radius: 20px;
	background-color: #9ed197;
	margin: 8px;
	padding: 16px;
}
.sectionmain3 {
	border: 2px solid;
	border-radius: 20px;
	background-color: #cdd197;
	margin: 8px;
	padding: 16px;
}
em {
	font-style: italic;
}
.bigtext {
	margin-top: 20px;
	font-size: 22px;
	font-family: "Playfair Display", serif;
	font-style: italic;
	line-height: 170%;
	border: 2px solid;
	background-color: #acb367;
	border-radius: 200px 200px 0px 0px;
	padding: 20px;
	padding-top: 80px;
	margin-bottom: 20px;
	text-align: center;
}
.bigtext2 {
	font-size: 22px;
	font-weight: 500;
	padding-top: 20px;
	line-height: 185%;
}
#linktoreading {
	text-decoration: underline;
}

.wrapup {
	color: #111111;
	font-weight: 500;
	border: 2px solid #111111;
	background-color: #e2844e;
	padding: 12px;
	border-radius: 20px;
	margin-top: 20px;
}
.stickyheader {
	background:#111111;
	border-top: 3px solid #111111; 
	border-bottom: 3px solid #111111;  
	padding-left: 15px;
	padding: 10px;
	font-weight: bold;
	padding-bottom: 20px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	text-align: center;
}
.decoratedparagraph {
	font-weight: 500;
	border: 2px solid #111111;
	background-color: #e25a4e;
	padding: 12px;
	margin-bottom: 20px;
	border-radius: 20px;
	margin-top: 20px;
	color: #111111;
	
}
.decoratedparagraph2 {
	font-weight: 500;
	border: 2px solid #111111;
	background-color: #e25a4e;
	padding: 12px;
	border-radius: 20px;
	margin-top: 20px;
	color: #111111;
	
}
.decoratedparagraph3 {
	font-weight: 500;
	border: 2px solid #111111;
	background-color: #e25a4e;
	padding: 12px;
	border-radius: 20px;
	margin-top: 20px;
	color: #111111;
	
}
footer {
	text-align: center;
	background-color: black;
	color: aliceblue;
	padding-bottom: 60px;
	padding-top: 20px;
}

 /* header animation */
#circletext {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    overflow: hidden;
	color: white;
}

#circletext text {
	font-family: "Playfair Display", serif;
    font-weight: bold;
	overflow: hidden;
	
	
}

/* Outer Circle */
#circletext svg:nth-child(1) text {
    font-size: calc(var(--root-size-h1) * 2); 
	overflow: hidden;
}
#sup2 {
	color: #111111;
}

#circletext svg:nth-child(1) {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    animation-name: rotateOuter;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	overflow: hidden;
}
#circletext svg:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    animation-name: rotateInner;
    animation-duration: 32s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	overflow: hidden;
}

/* Inner Circle */
#circletext svg:nth-child(2) text {
    font-size: calc(var(--root-size-small) * 2);
	overflow: hidden;
}


/* Outer Circle Animation */
@keyframes rotateOuter {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Inner Circle Animation */
@keyframes rotateInner {
    from {
        transform: rotate(360deg); 
    }
    to {
        transform: rotate(0deg);
    }
}


#headcontainer {
	max-height: calc(var(--max-height) * 1.25);
}

header {
	overflow: hidden;
	background-color: #EA7518;
	border-radius: calc(var(--border-radius) * 4) calc(var(--border-radius) * 4) 0px 0px;
	border: 3px solid;
	border-bottom: 2px solid;
}

mark {
	background-color: #e1751c;
	padding: 2px;
	border: 1px solid;
}
.headerdiv {
	background-color:#111111;
}
article {
	z-index: 2;
	background:#111111;
	color: rgb(9, 9, 9);
	position: relative;
	font-family: "Montserrat", serif;
	border-left: 3px solid;
	border-right: 3px solid;
}
.wrapup {
	color: #111111;
}
h2 {
	font-family: "Playfair Display", serif;
	font-size: calc(var(--root-size-h2) * 2);
	color:#FAFAE5;
}
.author {
	background-color: #9ed197;
	border-left: 3px solid;
	border-right: 3px solid;
	color:#111111;
	padding: 12px;
	font-size: calc(var(--root-size-author) * 2);
	text-align: center;
	font-family: "Montserrat", serif;
	font-weight: 600;
}

.progress {
	z-index: 500;
	width: 3px;
	height: 100%; 
	background: #ea4218;
	position: fixed;
	top: 0; 
	left: 0; 
	-webkit-transform-origin: 50% 0; 
	transform-origin: 50% 0; 
	-webkit-animation: scaleProgress auto linear;
	-webkit-animation-timeline: scroll(root);
	animation: scaleProgress auto linear;
	animation-timeline: scroll(root);
  }
  @keyframes scaleProgress {
	from {
	  transform: scaleY(0); 
	}
	to {
	  transform: scaleY(1); 
	}
  }
  p {
	font-family: "Montserrat";
	font-weight: 400;
	font-size: 17px;
}

  @media (min-width:1100px) {
	:root {
		--root-size: 16px;
		--root-size-author: 15px;
		--root-size-h1: 14.5px;
		--root-size-small: 8.75px;
		--root-size-h2: 16px;
		--root-size-h3: 16px;
		--root-size-p: 16px;
		--article-margin: 15px;
		--line-height: 140%; 
		--border-radius: 2000px;
		--max-height: 440px;
	}
	 /* header animation */
#circletext {
    position: relative;
    width: 100%;
}

#circletext svg:nth-child(1) {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    animation-name: rotateOuter;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
}
#circletext svg:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    animation-name: rotateInner;
    animation-duration: 32s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
}

header {
	text-align: center;
	margin-left: 250px;
	margin-right: 250px;
}
body {
	background-color: #111111;
}
.author {
	margin-left: 250px;
	margin-right: 250px;
}
.sectionmain {
	padding: 20px;
	margin-left: 250px;
	margin-right: 250px;
}
.sectionmain2 {
	margin-left: 250px;
	margin-right: 250px;
	padding-bottom: 40px;
	padding-left: 40px;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center; 
}
.sectionmain2 p {
	width: 60ch;
	align-items: center;
}
.sectionmain2 .bigtext2 {
	width: 46ch;
}
.wrapup {
	width: 64ch;
}
.sectionmain3 {
	margin-left: 250px;
	margin-right: 250px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items:start;
	
}
.sectionmain {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items:start;
}
.bigtext {
	margin: 0%;
	border-radius: 200px 200px 0px 0px;
	align-items: center;
	padding-bottom: 60px;
}
#arrowup {
	right: 100px;
}
.morebigtext {
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: space-evenly;
}
.decoratedparagraph {
	width: 50ch;
	margin-bottom: 30px;
}
.decoratedparagraph2 {
	width: 30ch;
}
.decoratedparagraph3 {
	width: 40ch;
}
	}