/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* || CSS VARIABLES */
:root {

    /* || TYPOGRAPHY */
    --heading-font: "Great Vibes",cursive, sans-serif;
    --primary-font: "Roboto", sans-serif;

    /* || COLOURS */
    --dark-blue: hsla(236, 71%, 8%, 1); /*picked from game page background image */
    --heading-light-blue: rgb(146, 179, 228); /*picked from game page background image */
    --button-blue:rgb(13, 17, 70);
    --chest-brown: #46211C;
    --treasure-yellow: #FFD700;
    --evergreen: #003326;
    --prussian-blue: #020122;
}

/*-----------------------------------------------------*/
/* || UTILITIES */

/* || GRADIENTS */
/* Created with https://coolors.co/gradient-maker/ */

.blue-gradient {
    background: hsla(236, 71%, 8%, 1);

    background: linear-gradient(45deg, hsla(236, 71%, 8%, 1) 30%, hsla(179, 55%, 75%, 1) 92%);

    background: -moz-linear-gradient(45deg, hsla(236, 71%, 8%, 1) 30%, hsla(179, 55%, 75%, 1) 92%);

    background: -webkit-linear-gradient(45deg, hsla(236, 71%, 8%, 1) 30%, hsla(179, 55%, 75%, 1) 92%);

    /* filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#060823", endColorstr="#9EE3E2", GradientType=1 ); */
}

.golden-gradient {
   background: hsla(50, 100%, 39%, 1);

   background: linear-gradient(90deg, hsla(50, 100%, 39%, 1) 19%, hsla(67, 87%, 82%, 1) 59%);

   background: -moz-linear-gradient(90deg, hsla(50, 100%, 39%, 1) 19%, hsla(67, 87%, 82%, 1) 59%);

   background: -webkit-linear-gradient(90deg, hsla(50, 100%, 39%, 1) 19%, hsla(67, 87%, 82%, 1) 59%);
}

/* || POSITION */
.removed {
    display: none;
}

/* || INTERACTIVITY */
.pointers-active {
    pointer-events: auto;
}

.pointers-disabled {
    pointer-events: none;
}

/* || FADE-OUT ANIMATION */
.fade-out {
    animation: fade-out 3s ease-out;
    /* written with google search AI overview */
    animation-fill-mode: forwards;
}

@keyframes fade-out {
    0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    
  }
}

.fade-in {
    animation: fade-in 0.9s ease-in-out;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* || BUTTONS */
button {
    font-family: var(--primary-font);
    letter-spacing: 0.1rem;
}

/* || Buttons on home page */

#play-button {
    color: var(--dark-blue);
    font-size: xx-large;
    font-weight: bolder;
    padding: 0.5rem;
    margin-top: 20px;
    border-radius: 10%;
    min-width: 120px;
    position: absolute;
    top:50%;
    left: 33%;
    animation: play-animation 1.5s ease-in 1;
}

@keyframes play-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Buttons on game page */
/* Submit/Try button */

input[type="submit"] {
    background-color: var(--button-blue);
    color: goldenrod;
    font-family: var(--primary-font);
    font-size: x-large;
    min-height: 35px;
    min-width: 45px;
    letter-spacing: 0.1rem;
    font-weight:500;
    border: 1px solid gold;
    margin-left: 0.7rem;
}

/* UI Buttons */
.game-button {
    min-width: 8vw;
    min-height: 4vh;
    font-size: 1.5rem;
    padding: 0.3rem;
    border-radius: 5px;
    align-self: center;
    margin: 1.5rem 0.8rem;
}

/* Modal Buttons */
.modal-button {
    background-color: var(--button-blue);
    color: goldenrod;
    font-size: medium;
    min-height: 30px;
    min-width: 35px;
    font-weight:500;
    border: 1px solid gold;
    margin-top:0;
    margin-left: 0.7rem;
    margin-bottom:1.5rem;
}

/* Review screen button */
#play-again-button {
    top:50%;
    color: var(--dark-blue);
    font-size: 1.5rem;
    font-weight: bolder;
    padding: 0.5rem;
    margin-top: 20px;
    border-radius: 10%;
    box-shadow: 3px 5px var(--prussian-blue);
    min-width: 120px;
}

.home-btn {
    color: var(--dark-blue);
    font-size: 1.5rem;
    font-weight: bolder;
    padding: 0.5rem;
    margin-top: 40px;
    border-radius: 10%;
    box-shadow: 3px 5px var(--prussian-blue);
    min-width: 120px;
}

/* Hover state */
#play-button:hover,
#play-again-button:hover,
.home-btn:hover {
    cursor: pointer;
    color: var(--chest-brown);
}

.game-button:hover {
   transform:scale(1.1);
}

/* || GLOBAL STYLES */
body {
    overflow: hidden;
}

h1 {
    font-family: var(--heading-font);
    font-size: 5rem;
    font-weight: bold;
    color: var(--heading-light-blue);
    text-align: center;
    position: absolute;
    top: 8%;
    letter-spacing: 0.1rem;
    -webkit-text-stroke: 1.5px var(--prussian-blue);
}

/* || HOME PAGE */
 .home-body {
    min-height: 95vh;
    background-repeat: no-repeat;
    background-size: cover; 
    position: relative;
} 

.hero-image {
    max-height: 90vh;
    position: absolute;
    left: 15%;
    top: 0;
    z-index: -900;
    opacity: 0.3;
}

.treasure-image {
    position:absolute;
    max-height: 200px;
    top: 65%;
    left: 5%;
    z-index: 990;

}

/* || GAME PAGE */

.game-body {
    background-image: url("../images/enchanted-realm.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.light-overlay {
    background-color: rgba(77, 100, 94, 0.9);
    min-height: 75vh;
    min-width: 80vw;
    margin:10px 20px;
    border-radius: 10%;
    z-index: -1;
}

.dragon-symbol {
    max-height: 70vh;
    opacity: 0.4;
    z-index: 0;
}

/* Feedback section */
.feedback {
    width: 100vw;
    min-height: 42vh;
    position: absolute; 
    top: 4%;
}

.guess {
    max-height:1.8rem;
    display: flex;
    align-items: center;
    color: white;
    font-weight: bold;
}

.visible-text {
    color: rgb(220, 160, 160);
    font-weight: bold;
    font-size: x-large;
    font-family: var(--primary-font);
    padding-left: 10px;
}

.float-right {
    float: right;
    padding-right: 10px;
    padding-top: 4px;
}

/* Form */
.guess-form {
    top: 52%;
    text-align: center;
    position: absolute;
    /* horizontally centering an absolute element code taken from: 
    https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/ */
    left:0;
    right: 0;
    margin: auto;
}

.input {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid grey;
    outline: rgb(13, 17, 70);
    border-radius: 2px;
    margin: auto;
    margin-top: 10px;
    color: var(--chest-brown);
    font-weight: bolder;
    font-size: xx-large;
    text-align: center;
    font-family: var(--primary-font);   
}

.tries-left {
    color: white;
    font-size: 1.3rem;
    top: 65%;
    font-family: cursive;
    font-weight: bold;
    letter-spacing: 0.1rem;
    border: 2px solid gold;
    padding: 0.5rem;
}

/* Footer */
.footer {
    min-height: 15vh;
    background-color: rgba(110, 140, 167, 0.2);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
}

.buttons-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Modals */
.old-paper {
    background-image: url("../images/paper.webp");
    background-color: transparent;
    background-size: cover;
    
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 300;
    margin-left: 2.5rem;
    margin-top: 0;
}

.modal-body {
    margin-top: 2rem;
    margin-left: 1rem;
    font-family: var(--primary-font);
    color: var(--dark-blue);
}

.modal-body p {
    padding: 0;
    margin: 0.3rem;
}

#winModal p, 
#loseModal p {
    font-size: 1.5rem;
}

/* || Lose animation */

.dark-overlay {
    background-color: var(--dark-blue);
    position: fixed;
    top:0;
    left: 0;
    height: 100vh;
    width: 100vw;
    animation: dark-screen 2s ease-out;
}

@keyframes dark-screen {
    0% {
        opacity:0;
    }
    70% {
        opacity:1;
    }
}

.angry-dragon {
    animation: dragon-animation 8s ease-in-out;
    animation-fill-mode:both;

}

@keyframes dragon-animation {
    0% {
        opacity: 0;
    }
    20% {
        transform: scale(0);
        opacity: 0;
    }
    65% {
        transform: scale(1);
        opacity: 0.9;
    }
    95% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.fire {
    animation: fire-animation 9.5s ease;
    animation-fill-mode: both;
}

@keyframes fire-animation {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    90% {
        transform: scale(0);
        opacity: 0;
    }
    92% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}



/* 404 PAGE */
.error-header,
.error-main  {
    text-align: center;
}
.error-body {
    background-repeat: repeat-y;
    background-size: 100% 50%;
    background-position: center;

}
.error-heading {
    position:static;
    margin-top: 6rem;
    font-size: 3rem;
    font-family: var(--primary-font);
    color: gold;
    font-weight: bold;
    min-width: 70%;
    text-align: center;
    letter-spacing: 0.1rem;
    -webkit-text-stroke: 1.5px var(--dark-blue);
}

/*----------------------------------*/

/* || MEDUA QUERIES*/

/* || for medium screens 760px to 1024px */
@media screen and (min-width: 760px) and (max-width:1024px) {
    #play-button {
        left: 55%;
        top: 60%;
    }
}

/* || for medium and large screens 760px and above */
@media screen and (min-width: 760px) {

    /* Home page */
    .home-body {
        min-height: 100vh;
        background-image: url("../images/dragon-large.webp");
        background-size: auto;
        background-color: var(--dark-blue);
    }

    h1 {
        font-family: var(--heading-font);
         font-size: 8rem;
        font-weight: bold;
        min-width: 70%;
        color: var(--prussian-blue);
        text-align: center;
        position: absolute;
        top: 8%;
        letter-spacing: 0.1rem;
        -webkit-text-stroke: 1.5px var(--heading-light-blue);
    }

    .hero-image {
        max-height: 100vh;
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -900;
        opacity: 0.3;
    }

    .treasure-image {
        position:absolute;
        max-height: 300px;
        top: 55%;
        left: 8%;
        z-index: 990;

    }

    /* Feedback section */

    .light-overlay {
        margin:30px 20px;
    }

    .feedback {
        border: none;
        margin: auto;
        max-width: none;
        display: flex;
        justify-content: center;
        top: 10%;
    }
    
    .guess {
        margin-top: 10px;
        height: 30px;

    }

    .custom-container {
       width: 264px;
    }

    .left-container {
        margin-right: 30px;
        
    }

    .large-font {
        font-size:x-large;
    }

    .larger-font {
        font-size: xx-large;
    }

    /* Play section */
  
    /* Form */
    .input {
        min-width: 3.2rem;
        min-height: 2.7rem;
    }

    input[type="submit"] {
        min-height: 50px;
    }

    /* UI Buttons */
    .game-button {
        min-width: 5vw;
        min-height: 4vh;
        font-size: 1.5rem;
        padding: 0.3rem;
        border-radius: 5px;
        align-self: center;
        margin: 1.5rem 0.8rem;
    }

    /* Modals */
    .modal-title {
        color: var(--heading-light-blue);
        -webkit-text-stroke: 1.5px var(--prussian-blue);
        font-size: 2.5rem;
        margin-left: 2.5rem;
        margin-top: 1.5rem;
    }

    .button-modal {
    background-image: url("../images/paper.webp");
    background-color: transparent;
    background-size: cover;
    }

    .modal-body {
        font-size: 1.2rem;
        margin-top: 3.5rem;
        margin-left: 1rem;
    }

    .modal-button {
        font-size: large;
        min-height: 35px;
        min-width: 45px;
        margin-left: 0.7rem;
        margin-bottom:1.5rem;
    }
}

/* || large screens only */
@media screen and (min-width: 1024px){

    /* Lose animation */
    .angry-dragon,
    .fire {
        width: 100%;
        height: auto;
    }
}