@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
  --primary-color: #3b1779;
  --secondary-color: #c8a553;
}

/* -----------------------------------
     Global
----------------------------------- */
* {
  margin: 0;
  padding: 0;
  font-family: inherit;
  outline: none !important;
}

*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  color: #333333;
  font-weight: 500;
  position: relative;
  scroll-behavior: smooth;
}

b,
strong {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary-color);
  margin: 0;
}

a,
a:hover {
  text-decoration: none;
}

.logo {
  max-width: 400px;
  width: 100%;
  margin-bottom: 6rem;
}

.logo-title {
  font-size: 1.4em;
  margin-bottom: 5vh;
}

.secondary-title {
  font-style: italic;
  font-weight: 200;
}

.full-height {
  min-height: 100vh;
  width: 100%;
}

.logo-icon {
  max-width: 75px;
  width: 100%;
  background-color: #fff;
  border-radius: 100%;
}

.display-6 {
  font-size: 2.3rem;
}

.line-height-1-5 {
  line-height: 1.5;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-dark {
  color: #333333 !important;
}

.fw-100 {
  font-weight: 100;
}

.bg-primary {
  background: var(--primary-color) !important;
}

.bg-light {
  background-color: #f1f1f1;
}

.rounded-15 {
  border-radius: 15px;
}

.book-cover {
  width: 100%;
  border: 1px solid #000;
}

.bg-icon {
  background: #fff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(238, 238, 238, 1) 50%
  );
}

/*=====*/

@media all and (max-width: 767px) {
  .full-height {
    min-height: 100vh;
    width: 100%;
  }
  .p-5 {
    padding: 1.2rem !important;
  }
  .book-cover {
    width: 75%;
    margin: 20px auto;
  }
  .logo {
    max-width: 275px;
    margin-bottom: 2rem;
  }
  .pt-5 {
    padding-top: 1rem !important;
  }
  .display-6 {
    font-size: 1.8rem;
  }
  .mb-4 {
    margin-bottom: 3rem !important;
  }
  .mb-4.mb4-name {
    margin-bottom: 0.5rem !important;
  }
  .display-5 {
    font-size: calc(1.425rem + 1.5vw);
  }
}