/* Main web content format. */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #293c53;
    background-repeat: no-repeat;
    background-size: 140%;
    background-image: url(../css-images/moon&stars.gif);
    background-size: 52% 50%;
  }
  
  /* Setting navbar style*/

  nav {
    background-color: #b0a36c;
    font-family: 'Montserrat Alternates', sans-serif;
    
  }

  nav ul a {
    color: #DDE1E9;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: large;
  }

  nav .brand-logo {
    color: #DDE1E9;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 3vw;
    padding-left: 2%;
  }

  /* setting main content styles*/
  main {
    flex: 1 0 auto;
    margin-top: 170px;
  }


  /* carousel style */
  .carousel {

    background-color: #E7BD42;
    position: absolute;
    margin-left: 5%;
    margin-top: 20%;

  }

    
  

  .carousel-item {
    background-color: #C29F38;
    font-family: 'Montserrat', sans-serif;
    
  }

  h1 {
    font-size: 5vw;
  }

  /*  Buttons */

  .btn {
    background-color: #293c53;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: medium;
    font-weight: bolder;
  }

  .btn:hover {
    background-image: url(https://media.giphy.com/media/raJa0mPRFe8zC/giphy.gif);
   
  }


  /*testing Carousel Buttons- YJK*/

  .controlButton {
    top: 50%;
    display: inline-block;
    border:none;
    outline: none;
    padding: 1.5%;
    font-size: 20px;
    color: #ddd;
    
  }

  .controlButton:hover {
    background: #888888;
    background-image: url(https://media.giphy.com/media/raJa0mPRFe8zC/giphy.gif);
  
  }

  /*RW changing border sizing for arrows to percentages*/

  .arrow {
    border: solid #ddd;
    border-top: 0;
    border-left: 0;
    border-right: .2%;
    border-bottom: .2%;
    display: inline-block;
    padding: 100%
  }

  .buttonright {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .buttonleft {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }

/*testing Carousel Buttons- YJK

  /* footer style */
  
  .page-footer {
    margin-top: 25%;
    background-color: #b0a36c;
    font-family: 'Montserrat Alternates', sans-serif;
    color: #DDE1E9;

  }

  .navColor {
    color: #DDE1E9;
    font-family: 'Montserrat Alternates', sans-serif;
  }

  .carousel-item{
    transform: translateX(0px) !important;
  }


  /* Tarot Card styling */

  .flip {
    transform: scaleY(-1);
    color: black;
    background-color: #C29F38;
  }

  .card-size {
   
    width: 25%;
   }
 
   .card-format {
     background-color: #C29F38;

   }

   #detailsCard {


    width: 70%;
    height: auto;
    margin-left: 15%;

  }

  #infoCard {
    background-color: #C29F38;
    color: white;
    font-family: 'Montserrat', sans-serif;
    

  }


#title0, #title1, #title2 {
  font-size: 18px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

.card-title {
  color: white;
  font-family: 'Montserrat', sans-serif;

}

.card {
  background-color: #C29F38;


}

@media only screen and (max-device-width: 700px) {
  #navbarAce {
    
    
    font-size: 126%;
    
  }

}


/* About Tarot CSS */

#aboutTarot{
 
  height: 110%;
  margin-top: 30%;
  background-color: #C29F38;
  color: white;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  padding: 2%;

}

#textbox {

  width: 50rem;
  height: 35rem;

}

  /* CONTACT CSS */

#contactTeam {

  margin-left: 23%;
  color: #DDE1E9;
}

#mainform {

  
  width: 80%;
  margin-left: 5%;
  padding-top:10%;
  float: right;
  font-family: 'Montserrat Alternates', sans-serif;
}

#form {

  border-radius:2px;
  padding: 2% 3%;
  box-shadow:0 0 15px;
  font-size:14px;
  font-weight:bold;
  width:70%;
  margin: 10% 12% 0 10%;
  float: right;
  background-color: #E7BD42;
  font-family: 'Montserrat Alternates', sans-serif;
}

h3 {
  text-align: center;
  font-size:20px;
  font-family: 'Montserrat Alternates', sans-serif;
  color: white;

}
input {

  width:100%;
  height:35px;
  margin-top:5px;
  border:30px solid  #293c53;
  border-radius:3px;
  padding:5px;
  background-color: white;
}
input[type=button]{

  background-color: #293c53;
  border:1px solid white;
  font-size:18px;
  color:white;
}

textarea {

  width:100%;
  height:80px;
  margin-top:5px;
  border-radius:3px;
  padding:5px;
  resize:none;
}

#note {

  color:black;
  font-Weight:400;
  
}

#returnmessage {

  font-size:14px;
  color:green;
  text-align:center;

}

#name, #email, #message, #contact{
  background-color: white;
  
}

.active {
  color: white
}

/* About Tarot */

#aboutText {

 text-align: right;

}


/* Horoscope Page */

#horoscopeDiv {
  margin-top: 30%;
  background-color: #C29F38;
  color: white;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  width: 60em;
  height: 34rem;
  padding: 2%;
}

#horoscopeTitle{
  font-size: 300%;
  margin-top: 10%;


}

#horoscopeBox {

  margin-top: 20%;
  width: 80%;
  margin-left: 10%;

}

#clear{
  margin-top: 5%;
}

#listOfInfo {

  margin-left: 10%;
  margin-bottom: 10%;

}

#imageHoroscope {
  width: 100px;
}

/* Media Querys for horoscope page and nav bar title. */

@media only screen and (max-device-width: 800px) {
  #horoscopeDiv {
    margin-top: 30%;
    background-color: #C29F38;
    color: white;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    width: 40rem;
    height: 22rem;
    padding: 2%;
  }
  
  #horoscopeTitle{
    font-size: 150%;
    margin-top: 10%;
  
  
  }
  
   #horoscopeBox {
    
    padding: 20px;
    margin-top: 20px;
    height: 15rem;
    width: 17rem;
    margin-left: 0px;

  }

  #submitDate, #clear {
    font-size: 10px;
  }

  #listOfInfo {
    font-size: 10px;
 
  }
  
  #horoscopeInfo {
    width: 13rem;
    
  }


  #image {
    visibility: hidden;
    
  }

}

@media only screen and (max-device-width: 641px) {

  #horoscopeDiv {
    width: 21rem;
    height: 41rem;
  }

  #horoscopeBox {
    height: 15rem;
  }

  a.brand-logo {
    font-size: 20px;
  }

  #inputBoxCol {
    padding-left: 1.5rem;
  }

  #listOfInfo {
    font-size: 10px;
  }

  #image {
    visibility: hidden;
    
  }

  #imageHoroscope {
    visibility: hidden;
  }

}