/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ------------------------------
   GLOBAL
------------------------------ */

body {
  background: url("backgroundpurple.jpeg") no-repeat center center fixed;
  background-size: cover;
  color: #3b2f2f;
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
  padding: 40px;
  text-align: center;
}

.sidebar-widget {
  position: fixed;
  right: 200px;       /* move left/right */
  top: 500px;        /* move up/down */
  width: 220px;
  background: rgba(255, 255, 255, 0.18);
  padding: 15px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-family: 'Cormorant Garamond', serif;
}


/* ------------------------------
   HEADER
------------------------------ */

header {
  background: none;
  border: none;
  padding: 0;
}

h1 {
  font-family: 'Great Vibes', cursive;
  color: #ffffff;
  font-size: 3.2em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(212,185,140,0.6);
}

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3em;
  color: #ffffff;
  margin-top: -10px;
  margin-bottom: 30px;
}

/* ------------------------------
   NAVIGATION
------------------------------ */

.nav a {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  background: #bda7e0;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.2s;
  font-size: 1.1em;
}

.nav a:hover {
  background: #8a6bb8;
}

/* ------------------------------
   CONTENT BOX
------------------------------ */

.box {
  border: 4px double #d4b98c;
  padding: 30px;
  margin: 40px auto;
  max-width: 700px;
  background: #fffdf8;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(212,185,140,0.3);
  line-height: 1.6;
  text-align: left;
}

/* ------------------------------
   ACCENT NOTE
------------------------------ */

.accent {
  font-family: 'Yomogi', cursive;
  color: #5a3e85;
  font-size: 1.2em;
  background: #f3e9ff;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 15px;
  position: relative;
}

.accent::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  width: 60px;
  height: 20px;
  background: rgba(255, 255, 200, 0.6);
  transform: rotate(-5deg);
  border-radius: 4px;
}

/* ------------------------------
   FOOTER IMAGE
------------------------------ */

.footer-img {
  display: block;
  margin: 40px auto 0;
  width: 120px;
  opacity: 0.9;
}

#year {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.copyright {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}