/*root */
:root{
    --primary: black;
    --secondary: royalblue;
}

/*Structure */
body{
    background-color: var(--primary);
    display: flex;
}

/*flex-container */
.flexbox{
    font-family: 'Times New Roman', Times, serif;    
    background-color: var(--secondary);
    border-radius: 2px;
    padding: 10px;
    margin: 20px;
    flex: 1;
}

/*Typogrpahy */
h1{
    text-align: center;
}

/* Quotes */
#quotes{
    padding-left: 15px;
}

.hide{
    display: none;
}

/* Draw Rainbow */
#display-button{
    color: var(--secondary);
    background-color: var(--primary);
    margin-left: 20px;
    border-radius: 5px;
}
.rainbow-fill{
    position: relative;
    height: 25px;
    width: 40vw;
    margin-left: 20px;
    z-index: 1;
    transition: 1s; 
}

/* image */
#image{
    display: none;
    position: relative;
    max-width: 60px;
    padding-left: 713px;
    top: -55px;
    z-index: 2;
}

/*Larger Resolution */
@media only screen and (max-width: 900px){
    #image{
        display: none;
        position: relative;
        max-width: 60px;
        padding-left: 315px;
        z-index: 2;
    }
}