@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=M+PLUS+Rounded+1c:wght@300&family=Maitree&family=Manuale&family=Montserrat&family=Source+Code+Pro:wght@300&display=swap');

body, html {   
    margin: 0;    
    display: flex;
    flex-direction: column; 
    height: 100vh;      
} 

.content {    
    flex: 1;              
}

/* --------- text --------------*/

.text-one {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
}

.text-two {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Flash messages */
.flash-message {
    position: absolute;
    top: 75px;
    right: 20px !important;
}

.box {     
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    border-radius: 2px;
    color:rgb(0, 0, 0);
}

.code-text {
    font-family: 'Source Code Pro', monospace;
}

.maze-text {
    font-family: 'Source Code Pro', monospace;
}

.text-brown {
    color: brown;
}

/* media screen repoonsive design */

@media screen and (max-width: 992px){
    .code-text {
        font-size: 12px;
    }
    .comment-form {
        width: 60% !important;
    }    
}

@media screen and (max-width: 768px){
    .comment-form {
        width: 75% !important;
    }    
} 

@media screen and (max-width: 576px){
    .code-text {
        font-size: 10px;
    }

    .comment-form {
        width: 95% !important;
    } 
} 

@media screen and (max-width: 450px){
    .code-text {
        font-size: 9px;
    }
}