:root {
    --inkBlack: #1e1e1e;
    --darkGrey: #2e2e2e;
    --warmWhite: #fef8ea; 
    --warmerWhite: #f9efd7;
    --peachyPink: #f98ca6;
}


@font-face {
    font-family: 'Great Warrior' ;
    src: url(assets/fonts/great_warrior/great_warrior.ttf);
}

@font-face {
    font-family: 'Antic Didones';
    src: url(assets/fonts/antic_didone/antic_didone_regular.ttf);
}

* {
    font-family: 'Antic Didones';
}

html {
    font-size: 10px;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('assets/images/gradient_light.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 120vh; 
    color: var(--inkBlack);
}

.header {
    font-family: 'Great Warrior';
    font-size: clamp(3.5rem, 6vw, 9rem);
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    margin: 3.2rem;
    padding-top: 3.2rem;
}

.advice-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.advice {
    font-size: 2.6rem;
    text-align: center;
    height: 9.6rem; 
}

@media screen and (max-width: 700px) {
    .advice  {
        font-size: 2rem;
    }
  }

.advice p {
    padding: 1.6rem;
}


a {
    color: var(--inkBlack);
    font-size: 1.6rem;
}


/* Adivice button styling */

.advice-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 16rem;
    background: transparent;
    border: 0.1rem solid var(--inkBlack);
    font-size: 2rem;
    color: var(--inkBlack);
    letter-spacing: 0.15rem;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    border-radius: 2.5rem;
    margin: 3.2rem;
    cursor: pointer;
}

.advice-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.1rem solid var(--inkBlack);
    transition: all 200ms ease-in-out;
    opacity: 0;
    border-radius: 3.6rem;
  }

  .advice-button:hover::before {
    width: calc(100% + 1.2rem);
    height: calc(100% + 1.2rem);
    opacity: 1;
  }

  .advice-button:active {
    transform: scale(0.95);
  }

  .advice-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

   /* Card styling */

 .mainContainer {
    position: relative;
    width: 38.9rem;
    height: 27.8rem;   
 }

@media screen and (max-width: 700px) {
    .mainContainer {
        width: 25.2rem;
        height: 18rem;  
    }
  }

 .theCard{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s ease; 
 }

 
 .theCardFront, .theCardBack {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: var(--warmWhite);
     border: 0.1rem solid var(--inkBlack);
     border-radius: 2rem;
     color: var(--inkBlack);
     backface-visibility: hidden;
    }

    .theCardFront {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .theCardFront img {
        width: 8.5rem; 
        height: 8.5rem;
    }

    @media screen and (max-width: 700px) {
        .theCardFront img {
            width: 5rem;
            height: 5rem;
        }
    }

    .sunDark {
        display: none;
    }
    
 .theCardBack {
        transform: rotateY(180deg);
    }


 .theCardBack, .advice {
    display: flex;
    align-items: center;
    justify-content: center;
 }
    
 .theCard.isFlipped {
    transform: rotateY(180deg);
    }


.bottom-link {
    margin-bottom: 3.2rem;
}

/* Dark mode styling */

    @media (prefers-color-scheme: dark) {
        body {
            background-image: url(assets/images/gradient_dark.jpg);
        }

        .theCardFront, .theCardBack {
            background-color: var(--darkGrey);
            border: 0.1rem solid var(--darkGrey);
        }

        .sunDark {
            display: block;
        }

        .sunLight{

            display: none;
        }

        .advice p {
            color: var(--warmWhite);
        }

        .advice-button {
            border: 0.15rem solid var(--inkBlack);
            font-weight: 600;
        }


    }