/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Element Styles
- Class Styles
    • Modal Class Styles
- ID Styles
    • Birthstone ID Styles
    • Social Media ID Styles
- Keyframes
 ––––––––––––––––––––––––––––––––––––––––––––––––––  */

/* ELEMENT STYLES */
a {
  color: #ce1cc5;
}
body {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 2.25rem;
}
h2 {
  color: red;
  font-family: 'Kaushan Script', cursive;
  text-shadow: 2px 2px rgb(180, 180, 180);
}
h5 {
  margin: 0 3.0rem 0 0;
}
input[type="submit"].button-primary {
  background-color: #ce1cc5;
  border-color: aqua;
  font-size: inherit;
}

/* CLASS STYLES */
.bordered {
  background-color: rgb(248, 248, 248);
  border: 1px solid rgb(209, 207, 207);
  border-radius: 8px;
  padding: 1rem 1rem;
}
.button {
  padding: 0rem 0.75rem;
}
.button-primary {
  font-size: inherit;
  margin-bottom: 1.5rem;
}
.centerText {
  text-align: center;
}
.copyright {
  text-align: right;
  font-size: 14px;
  margin: 0 2rem;
  vertical-align: middle;
}
.headerText {
  animation: blinking 1s infinite;
  color: #ce1cc5;
  font-family: 'Kaushan Script', cursive;
  font-size: 80px;
  opacity: 100%;
  padding: 1rem 4rem;
  text-align: right;
  -webkit-text-stroke-width: 1.75px;
  -webkit-text-stroke-color: #ffffff;
}
.jumbotron {
  background-image: url("../images/andi-kernel-ka-s-9_SV-LHxGBU-unsplash.jpg");
  background-position: center center;
  background-size: cover;
  height: 275px;
}
.link {
  color: #ffffff;
  font-size: inherit;
}
.row {
  margin: 0 1rem;
}
.resultText {
  color: rgb(255, 115, 0);
  font-family: 'Kaushan Script', cursive;
}
.unicodePad {
  padding-left: 0.75rem;
}
/* modal classes */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.modal-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.modal-buttons-seperator {
  margin: 1.5em 0;
  margin-top: 0;
}
.modal-close-icon {
  position: absolute;
  right: 1.5em;
}
.modal-content {
  border-radius: 8px;
  background-color: white;
  max-width: 35em;
  padding: 1em 1.5em;
  position: relative;
  margin: 2em;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.modal-content-inner {
  padding-right: 2em;
  margin-bottom: 0.25em;
}
.modal-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-open {
  visibility: visible;
  backface-visibility: visible;
  opacity: 1;
  z-index: 1;
}
.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}
.mt {
  margin-top: 40px;
}
.d-none {
  display: none;
}

/* ID STYLES */

#results {
  /* 
  The Results box will be hidden until a match is found,
  then JavaScript will show results box
  */
  display: none;
}

#celebImage {
  max-height: 100%;
  max-width: 100%;
}
#errorCeleb {
  color: rgb(255, 115, 0);
}
#imageCaption {
  color: #ce1cc5;
  font-size: 16px;
  text-align: center;
}
/* birthstone IDs (sets color of SVG gemstone image): */
#janGarnet {
  filter: hue-rotate(150deg) saturate(70%);
}
#febAmethyst {
  filter: hue-rotate(25deg);
}
#marBloodstone {
  filter: hue-rotate(300deg);
}
#aprDiamond {
  filter: hue-rotate(310deg) opacity(30%);
}
#mayEmerald {
  filter: hue-rotate(230deg);
}
#junPearl {
  filter: hue-rotate(310deg) opacity(30%) brightness(50%);
}
#julRuby {
  filter: hue-rotate(130deg) saturate(300%);
}
#augPeridot {
  filter: hue-rotate(190deg);
}
#sepSapphire {
  filter: saturate(300%);
}
#octOpal {
  filter: hue-rotate(310deg) opacity(30%) brightness(200%);
}
#novTopaz {
  filter: hue-rotate(150deg);
}
#decTurquoise {
  filter: hue-rotate(290deg);
}
/* social media IDs--set the official RGB color value for each social media site: */
#facebook {
  background-color: #3b5998;
}
#instagram {
  background-color: #8a3ab9;
}
#pinterest {
  background-color: #c8232c;
}
#twitter {
  background-color: #00acee;
}

/* KEYFRAMES */
/* displays blinking drop shadow behind banner text: */
@keyframes blinking {
  0% { text-shadow: 2px 2px aqua; }
  100% { text-shadow: 2px 2px rgb(28, 133, 133); }
}
/* Spin the loader */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}