@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* Corpo do site */
body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  background-color: #E9EDF6;
  background-image: url('image/FundoPrincipal.png');
  background-position: center top;
  cursor: url(image/cursor.png), auto;
  animation: fadeIn 1.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY (20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Textos do site */

acronym {
  color: #585858;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  filter: brightness(1.3);
  transition: filter 0.3s;
}

a:link {
  font-weight: bold;
  text-decoration: none;
  color: #ad8cf5;
}

a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #7700ff;
}

h1 {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 500%;
  text-shadow: 3px 2px black;
}

h2 {
  text-shadow: 6px 2px 10px #632f3c;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 225%;
}

h3 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 225%;

  border-bottom: 3px solid #632f3c;
  padding-bottom: 0.3em;

  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
}

/* Estrutura do site */

#jar-header {
  background-image: url('image/Residencia-dos-Bridgerton.jpg');
  background-color: rgba(45, 58, 92, 0.6);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: white;
}

#jar-summary {
  text-align: center;
}

#jar-preamble,
#jar-supporting {
  margin: 0 17%;
}


#jar-footer {
  background-image: url('image/footerimage.jpg');
  background-color: rgba(132, 132, 132, 0.475);
  background-blend-mode: multiply;
  background-size: cover;
  min-height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Menu Lateral do site */

#jar-link-list {
  background-image: url('image/FundoMenu.png');
  border-right: 4px solid #a6c0c1;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  transition: left 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

#jar-link-list::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: #a6c0c1;
  cursor: pointer;
  z-index: 1001;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: background-color 0.3s ease;
}

#jar-link-list::before:hover {
  background-color: #555;
}

#jar-link-list:hover,
#jar-link-list:focus-within {
  left: 0;
}

/* Scrollbar  */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f3f0f8;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ad8cf5, #7a5dcb);
  border-radius: 10px;
  border: 2px solid #f3f0f8;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9062e9, #6541a6);
}