/*Global Styles */

body {
    font-family:'Courier New', Courier, monospace;
    color: black;
    margin: 0;
    height: 100vh;   /* static screen, no scrolling*/
    overflow: hidden; /* static screen, no scrolling*/
}

a {
    text-decoration: none;
    color: black;
}

img {
    width: 100%;
}


.centered-text {
/* Putting the text in the middle of the page*/
display: flex; /* flex behavior (displays children inline) */
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh;
margin: 0;
flex-direction: column;
}


/* style front page */ 

.front-page-container {
    background-image: url("images/frontpage_background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
    width: 100vw;
}

.front-page .centered-text {
    font-weight: bolder;
    font-size: 25px;
}

.blend-text footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* margin-left: -5%; */
    mix-blend-mode: difference;    /*when you shrink the page, the text blends compared to the background*/
    text-align: center;
}

.blend-text footer a {
    color: white;               /*when you shrink the page, the text blends compared to the background*/
}



/* style first page */

/* Putting picture in the center of the page 
.first-page .image-container {

    display: flex;
    justify-content: center;
    align-items: center; 
    width: 100vw;
    height: 100vh;
} */

.thinking-gif {
    width: 70%;
}

.first-page .gif {
    display: flex;
    align-items: center;
}

.first-page .centered-text {
    width: 300px;
    margin-left: -20%;
}

.first-page a {
    font-weight: bolder;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center; 
}

/* style riddle pages */

/* .riddle-page {
    background-color: indianred;
} */

.riddle-page p {
    width: 300px;
    margin-left: auto;
    margin-right:auto;   
    text-align: center;

}

.riddle-page .riddle {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.riddle-page .illustrations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;  

} 

.riddle-page .illustrations img:hover {
    transform:scale(1.2)
} 

.riddle-page .illustrations a {
    cursor: default;
} 

.shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 30vw;
}

.shadowgif {
    position: absolute;
    left: -18vw;
    top: -10vw;
    width: 66vw;
}

.mirror {
    position: absolute;
    right: 0.5vw;
    top: 4vw;
    width: 25vw;
}

.wind {
    position: absolute;
    left: 25vw;
    top: 19vw;
    width: 18vw;
}

.windgif {
    position: absolute;
    left: 8vw;
    top: 3vw;
    width: 47vw;
}

.thunder {
    position: absolute;
    right: 6vw;
    top: 29vw;
    width: 23vw;
}

.thundergif {
    position: absolute;
    right: -5vw;
    top: 6vw;
    width: 49vw;
}

.music {
    position: absolute;
    right: 28vw;
    top: 0.1vw;
    width: 13vw;
}

.night {
    position: absolute;
    left: -1vw;
    top: 28vw;
    width: 23vw;
}

.nightgif {
    position: absolute;
    left: -16vw;
    top: 21vw;
    width: 50vw;
}

.illuone {
    position: absolute;
    right: 47vw;
    top: 2vw;
    width: 20vw;
}

.illuonegif {
    position: absolute;
    right: 38vw;
    top: -3vw;
    width: 40vw;
}

.illutwo {
    position: absolute;
    right: 35vw;
    top: 29vw;
    width: 23vw;
}

.illutwogif {
    position: absolute;
    right: 23vw;
    top: 21vw;
    width: 45vw;
}

/* Last page */ 

.konfetti {
        width: 70%;
    }
    
.last-page .konfettigif {
        display: flex;
        align-items: center;
        /*position: absolute;
        right: 35vw;
        z-index: 2; */

    }
 
    .last-page .end {  
        font-weight: bolder;
        width: 100%;
        margin-block-end: -5% ;
    }


    .last-page .centered-text {
        width: 200px;
        margin-left: -6%;

    }