body {
  background-color: var(--green);
  display:block;
}



/* colors */
:root {
  --green:#091211;
  --lightgreen:#1A2715;
  --lightestgreen:#364639;
  --navbar:#D7BD66;
  --introtext:#FDF090;
  --darkergold:#BD9D50;
  --lightergold:#FEF191;
  --darkgold:#BC9B4E;
  --darkestgold:#997C2E;
}

/* Navigation Bar */
.logo {
width:10px;
height:10px;
}

.topnav {
  width:100%;
  overflow:hidden;
  font-family: balthazar, sans-serif;
}

.topnav a {
float:right;
display:block;
color:#D7BD66;
text-align:center;
padding:20px;
text-decoration:none;
font-size:20px;
margin-right:30px;
top:160px;
}

.topnav a:hover {
background-color: #364639;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}

.topnav .icon {
display:none;
}

/* Achieve clarity intro */
.intro {
  max-width:1000px;
  height:auto;
  padding:40px;
  position:relative;
  text-align:center;
  margin:auto;
  top:0px;
  color:#FDF090;
  font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
  font-size:30px;
  background-color:#111C13;
}

.border1 {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.55, #BD9D50), color-stop(1.0, #FEF191));
  background-image: -moz-linear-gradient(center bottom, #BD9D50 50%, #FEF191 100%);
  padding:3px;
  top:170px;
  max-height:400px;
  max-width:1050px;
  margin:auto;
  position:relative;
  place-items:center;
}

/* Book a reading button */
.bookreading-btn {
  display:flex;
  justify-content: center;
  text-decoration:none;
  align-items: center;
  height:50px;
  margin:auto;
  max-width:300px;
  margin-top:150px;
  margin-bottom:220px;
  position:relative;
  top:140px;
  border:solid 2px #fef19195;
  padding-left:5px;
  padding-right:5px;
  padding-top:12px;
  padding-bottom:12px;
}

.bookreading-btn:hover {
border:solid 2px #fef191af;
transform:scale(1.04);
transition:all 1s ease-in-out;
}

.bigbutton {
width:750px;
height:45px;
background: #BC9B4E;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
transition: all 0.5s ease;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:27px;
color:#030707;
font-weight:900;
border:none;
}

.bigbutton::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease;
opacity: 0;
}

.bigbutton:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
}

.bigbutton:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}

/* Cinzel Font Title */
.title {
  font-family: "Cinzel Decorative", serif;
  font-weight: 100;
  font-style: normal;
  position:relative;
  font-size:50px;
  text-align:center;
  margin-bottom:-200px;
  color:#d6be64;
}


/* Divider */
hr.solid1 {
border:1px solid #A48431;
max-width:100%;
}

/* Process section */
.processsection {
  margin:auto;
  position:relative;
  max-width:100%;
  align-items:center;
  text-align:center;
  }

/* About section */
.aboutsection {
margin:auto;
position:relative;
max-width:100%;
align-items:center;
text-align:center;
}

.p1 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-left:70px;
padding-right:70px;
}

.p2 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-left:70px;
padding-right:70px;
}

.p3 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-left:70px;
padding-right:70px;
}

.p4 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-left:70px;
padding-right:70px;
}

.p5 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:10px;
padding-left:70px;
padding-right:70px;
}

.title1 {
font-size:25px;
font-family:Baskerville, serif;
color:#BC9B4E;
text-align:center;
margin:auto;
max-width:100%;
align-items:center;
position:relative;
padding-top:20px;
}

.paragraph {
margin-top:-30px;
margin-bottom:10px;
}

hr.solid2 {
border:1px solid #A48431;
margin:auto;
height:auto;
max-width:100%;
position:relative;
margin-top:75px;
}

/* Services section */
.text2 {
font-family:balthazar;
color:#BC9B4E;
text-align:center;
align-items:center;
max-width:100%;
height:0px;
margin:auto;
position:relative;
top:70px;
}

.title2 {
font-size:25px;
font-family:Baskerville, serif;
color:#BC9B4E;
text-align:center;
margin:auto;
align-items:center;
position:relative;
margin-top:-30px;
}

.servicessection {
margin:auto;
position:relative;
max-width:100%;
align-items:center;
text-align:center;
}

/* Love and Relationship Readings Section */
.loveheading {
max-width:1000px;
height:auto;
position:relative;
text-align:center;
margin:auto;
margin-bottom:-60px;
margin-top:50px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
}

.p5 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:30px;
padding-left:70px;
padding-right:70px;
}

/* Love and Relationship Readings Button */
.relationshipreadings {
width:350px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
margin:auto;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:25px;
color:#030707;
font-weight:900;
border:none;
}

.relationshipreadings::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease-out;
opacity: 0;
}

.relationshipreadings:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
transform:scale(1.04);
transition:all 1s ease-out;
}

.relationshipreadings:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
transition:all 1s ease-out;
}

/* General Readings Section */
.generalheading {
max-width:1000px;
height:auto;
position:relative;
text-align:center;
margin:auto;
margin-bottom:-60px;
margin-top:60px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
}

.p6 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:30px;
padding-left:70px;
padding-right:70px;
}

/* General Readings Button */
.generalreadings {
width:350px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
margin:auto;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:25px;
color:#030707;
font-weight:900;
border:none;
}

.generalreadings::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease-out;
opacity: 0;
}

.generalreadings:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
transform:scale(1.04);
transition:all 1s ease-out;
}

.generalreadings:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
transition:all 1s ease-out;
}

/* Self-Readings Section */
.selfheading {
max-width:1000px;
height:auto;
position:relative;
text-align:center;
margin:auto;
margin-bottom:-60px;
margin-top:60px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
}

.p7 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:30px;
padding-left:70px;
padding-right:70px;
}

/* Self-Readings Button */
.selfreadings {
width:350px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
margin:auto;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:25px;
color:#030707;
font-weight:900;
border:none;
}

.selfreadings::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease-out;
opacity: 0;
}

.selfreadings:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
transform:scale(1.04);
transition:all 1s ease-out;
}

.selfreadings:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
transition:all 1s ease-out;
}

/* Career and Money Readings Section */
.careerheading {
max-width:1000px;
height:auto;
position:relative;
text-align:center;
margin:auto;
margin-bottom:-60px;
margin-top:60px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
}

.p8 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:30px;
padding-left:70px;
padding-right:70px;
}

/* Career and Money Readings Button */
.careerreadings {
width:350px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
margin:auto;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:25px;
color:#030707;
font-weight:900;
border:none;
}

.careerreadings::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease-out;
opacity: 0;
}

.careerreadings:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
transform:scale(1.04);
transition:all 1s ease-out;
}

.careerreadings:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
transition:all 1s ease-out;
}

/* 1 Hour Reading Section */
.hourheading {
max-width:1000px;
height:auto;
position:relative;
text-align:center;
margin:auto;
margin-bottom:-60px;
margin-top:60px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
}

.p9 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:60px;
margin:auto;
padding-bottom:30px;
padding-left:70px;
padding-right:70px;
}

/* 1 Hour Session Readings Button */
.hourreadings {
width:350px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
margin:auto;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:25px;
color:#030707;
font-weight:900;
border:none;
}

.hourreadings::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease-out;
opacity: 0;
}

.hourreadings:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
transform:scale(1.04);
transition:all 1s ease-out;
}

.hourreadings:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
transition:all 1s ease-out;
}

hr.solid3 {
border:1px solid #A48431;
margin:auto;
height:auto;
max-width:100%;
position:relative;
margin-top:75px;
margin-bottom:20px;
}

/* Contact section */
.contactssection {
margin:auto;
position:relative;
max-width:100%;
align-items:center;
text-align:center;
margin-top:300px;
}

.title3 {
font-size:25px;
font-family:Baskerville, serif;
color:#BC9B4E;
text-align:center;
margin:auto;
align-items:center;
position:relative;
padding-top:30px;
}

.text3 {
font-family:balthazar;
color:#BC9B4E;
text-align:center;
align-items:center;
max-width:100%;
margin:auto;
position:relative;
}

.p10 {
font-family:"Baskerville", serif;
font-size:25px;
color:#BE9E51;
padding-top:0px;
margin:auto;
padding-bottom:30px;
}

.supportparagraph {
max-width:1000px;
height:auto;
padding:40px;
position:relative;
text-align:center;
margin:auto;
margin-top:2px;
top:0px;
color:#FDF090;
font-family: Tangerine, "Lucida Handwriting", "Brush Script MT", cursive;
font-size:30px;
background-color:#111C13;
}

.border2 {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.55, #BD9D50), color-stop(1.0, #FEF191));
background-image: -moz-linear-gradient(center bottom, #BD9D50 50%, #FEF191 100%);
padding:3px;
top:50px;
max-height:1000px;
max-width:1050px;
margin:auto;
position:relative;
place-items:center;
}

.text4 {
font-family:balthazar;
color:#BC9B4E;
text-align:center;
align-items:center;
max-width:100%;
margin:auto;
position:relative;
margin-top:20px;
}

.btnarea {
padding:2px;
}

.reviews-btn {
display:flex;
justify-content: center;
align-items: center;
height:50px;
margin:auto;
max-width:300px;
margin-top:100px;
margin-bottom:50px;
position:relative;
border:solid 2px #fef19195;
padding-left:5px;
padding-right:5px;
padding-top:12px;
padding-bottom:12px;
}

.reviews-btn:hover {
border:solid 2px #fef191af;
transform:scale(1.04);
transition:all 1s ease-in-out;
}

.reviewsbutton {
width:750px;
height:45px;
text-decoration:none;
background: #BC9B4E;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius:5px;
padding:10px;
transition: all 0.5s ease;
font-family:"EB Garamond", "Playfair", "Libre Caslon Text", "Copperplate", "Monaco", Sans-serif;
font-size:27px;
color:#030707;
font-weight:900;
border:none;
}

.reviewsbutton::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 2%,#fdf39c71);
transform: rotate(-45deg);
transition: all 1s ease;
opacity: 0;
}

.reviewsbutton:hover {
box-shadow: 0 0 50px rgb(254, 240, 151);
}

.reviewsbutton:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}


/* Social Media Buttons */
.socialbuttons {
margin:auto;
height:50px;
padding:30px;
position:relative;
margin-top:-5px;
border:2px solid;
height:50px;
width:380px;
background-color:#111C13;
}

ul {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
ul li {
list-style:none;
}
ul li a {
display:block;
position:relative;
width:90px;
height:90px;
line-height:90px;
font-size:40px;
text-align:center;
text-decoration:none;
color:#A17D29;
margin: 0 10px;
transition:.5s;
}
ul li a span {
position:absolute;
transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
width:100%;
height:3px;
}
ul li a span:nth-child(1) {
top:0;
left:0;
transform-origin: right;
}
ul li a:hover span:nth-child(1) {
transform: scaleX(0);
transform-origin: left;
transition:transform .5s;
}

ul li a span:nth-child(3) {
bottom:0;
left:0;
transform-origin: left;
}
ul li a:hover span:nth-child(3) {
transform: scaleX(0);
transform-origin: right;
transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
width:3px;
height:100%;
background:#364639;
}
ul li a span:nth-child(2) {
top:0;
left:0;
transform:scale(0);
transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
transform: scale(1);
transform-origin: top;
transition:transform .5s;
}
ul li a span:nth-child(4) {
top:0;
right:0;
transform:scale(0);
transform-origin: top;
}
ul li a:hover span:nth-child(4) {
transform: scale(1);
transform-origin: bottom;
transition:transform .5s;
}

.patreon:hover {
color: #FDF39C;
}
.patreon:hover span { 
background: #EACC6A;
box-shadow: 0 0 50px rgb(254, 240, 151);
}
.kofi:hover {
color: #FDF39C;
}
.kofi:hover span { 
background: #EACC6A;
box-shadow: 0 0 50px rgb(254, 240, 151);
}
.instagram:hover {
color: #FDF39C;
}
.instagram:hover span { 
background: #EACC6A;
box-shadow: 0 0 50px rgb(254, 240, 151);
}
.youtube:hover {
color: #FDF39C;
}
.youtube:hover span { 
background: #EACC6A;
box-shadow: 0 0 50px rgb(254, 240, 151);
}
ul li a .kofi {
color: #FDF39C;
}
ul li a:hover:nth-child(3) {
color: #EACC6A;
}
ul li a:hover:nth-child(4) {
color: #EACC6A;
}

/* Support section */

@media screen and (max-width: 1700px) {
  #logo {
      position:relative;
      display:none;
  }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a {
      display:none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    width:30px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
      position: relative;
      text-align:center;
      align-content:center;
      float:none;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    padding:20px;
    width:30px;
  }
  .topnav.responsive a {
    display: block;
    float:none;
    text-align: center;
    width:100px;
  }
}