:root  > * {
  /* Primary color shades */
  --md-primary-fg-color:        hsl(318, 84%, 58%);
  /* --md-primary-fg-color--light: hsl(318, 84%, 58%); */
  /* --md-primary-fg-color--dark:  hsl(0, 0%, 100%); */

  /* Text colors */
  --md-default-fg-color: hsl(318, 84%, 58%);
  /* --md-default-fg-color--light: hsl(318, 84%, 58%); */
  /* --md-default-fg-color--dark: #fafafa; */

  /* Background colors */
  /* --md-default-bg-color: #dad6d6;
  --md-default-bg-color--light: #fafafa;
  --md-default-bg-color--dark: #dad6d6;
  --md-default-bg-color--lighter: #dad6d6;
  --md-default-bg-color--lightest: #dad6d6; */

  /* Footer colors */
  /* --md-footer-bg-color:         hsl(318, 84%, 58%); */
  /* --md-footer-bg-color--light:  hsl(318, 84%, 58%); */
  /* --md-footer-bg-color--dark:   hsl(318, 84%, 58%); */
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   * { --p-font-size: 0.80em; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
   * { --p-font-size: 0.90em; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   * { --p-font-size: 1.00em; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   * { --p-font-size: 1.10em; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   * { --p-font-size: 1.20em; }
}


html {
    scroll-behavior: smooth;
}

body {
  background-image: url('../assets/background-2.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 99vh;
}

/* .md-main__inner {
  min-width: 70%;
} */

.md-typeset h1, h2, h3, h4, h5, h6 {
    /* color: var(--md-default-fg-color); */
   background-color: white;
   opacity: 0.70;
}

.imagefig {
  max-width: 50%; 
  /* min-height: 10dvh; */
  /* max-height: 100vh; */
}

.spanfig {
    display: flex;
    /* justify-content: center; */
    background-color: rgb(250, 245, 221);
    margin: var(--p-font-size);
    opacity: 0.65;
}
.pfig {
    font-size: var(--p-font-size);
    text-align: justify;
    margin: var(--p-font-size);
    color: rgb(99, 0, 192);
    /* max-width: 90%; */
    max-height: 70svh;
    white-space: pre-line;
}

.p1 {
    font-size: var(--p-font-size);
    text-align: justify;
    /* padding: var(--p-font-size); */
    /* margin: var(--p-font-size); */
    color: rgb(99, 0, 192);
    max-width: 80%;
    background-color: white;
    opacity: 0.9;
    white-space: pre-line;
}

.cards {
   display: flex;
   flex: 3;
   flex-direction: row;
   justify-content: center;
   border-radius: 10px;
   gap: var(--p-font-size);
   background-color: white;   
}
.card2 {
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid rgb(99, 0, 192);
   border-radius: 10px;
   padding: var(--p-font-size);
   max-width: 60%;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s, box-shadow 0.3s;
}
.card2:hover {
   transform: scale(1.05) rotate(2deg);
    box-shadow: 0 0 15px #ff4081;
}