:root{
    --caramel-color: #C7894C;
}

*{
    box-sizing: border-box;
}

body{
    background-color: var(--caramel-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
}

.content{
    background-color: var(--caramel-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.quote{
    width: 80vw;
    height: 150px;
    box-shadow: -20px 20px 20px 5px rgb(0 0 0 / 30%);
    background-color: #ccc;
    transition: margin-right 500ms cubic-bezier(0.18,0.89, 0.32, 1.1);
    outline: none;
    border: none;
    font-family: "Micro 5";
    font-weight: 400;
    font-style: italic;
    z-index: 1;
}

.tran{
    width: 100vw;
    height: 50vh;
    position: absolute;
    top: 100vh;
    left: 0;
    background-color: transparent;
}

.hidden{
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: var(--caramel-color);
    z-index: -1;
    display: flex;
    justify-content: center;
}

.info{
    width: 70vw;
    height: 120px;
    position: absolute;
    font-family: "Micro 5";
    font-weight: 400;
    font-size: 30px;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quote:hover{
    cursor: pointer;
}

.quote:focus{
    margin-right: -200vw;
}

.quote-text{
    font-size: 5vw;
}

/* This one is for the white colored text */

.white{
    color: #ccc;
    text-decoration: none;
}

.signoff{
    position: fixed;
    bottom: 20vh;
    font-family: "Micro 5";
    font-weight: 400;
    font-size: 10vw;
    font-style: italic;
}

/* Hiding the scrollbar */

html::-webkit-scrollbar{
    width: 10px;
}

.scroll{
    top: 92vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-text{
    font-family: "Micro 5";
    font-weight: 400;
    font-size: 30px;
    font-style: italic;
    margin: 0;
}

.scroller{
    color: black;
}

@media (min-width: 750px) {
    .quote-text,p{
        font-size: 30px;
    }
    .signoff{
        font-size: 50px;
    }
}

/* This was an experimental project, it was of so little concern to me the attention to detail or the efficiency of my code at the time, also hi if you're reading this! oh and I probably have looked up who actually said the quote after I was done with this little practice project. */


/* This is version 2.0 */