*{
    font-family:"Manrope", sans-serif;
    color: white;
    --red:#ff5c5c;
    --orange: #ffbd4a;
    --blue: #4acbff;
    --green: #4aff82;
    --black: #1F1F1F;
    --rounded: 10px;
    margin:0;
    padding:0;
}

body{
    background-color: #1F1F1F;
}

/*Navigation */
.navbar{
    display:flex;
    justify-content: center;
    align-items: center;
    padding-bottom:0.3em;

    background-color: white;
    color:var(--black);
    border-radius: 0 0 var(--rounded) var(--rounded);
    box-shadow: 3px 8px 32px 0px rgba(0,0,0,0.38);
}

.menu-icon{
    color:#1F1F1F;
    font-size: 30px;
}

.emptyspace{
    flex-grow:1;
}

#logo{
    width:auto;
    height:50px;
}

.inner-nav{
    flex-grow:2;
    display:flex;
    justify-content: center;
}

.menu-icon{
    margin-top: 0.2em;
}

.bigger-nav{
    display:none;
}

#smallnav{
    display:none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: white;

    position: fixed;
    top:20;
    left:10%;
    width:80%;
    height:20%;
    border-radius: 0 0 var(--rounded) var(--rounded);
}

#smallnav li a{
    color:var(--black);
    text-decoration: none;
}

#smallnav li{
    text-align: center;
    list-style-type:none;
    background-color: var(--orange);
    padding:1em;
    width:70%;
    border-radius: var(--rounded);
}

.intro{
    text-align: center;
}

.main-title{
    margin-top:0.5em;
}


.command{
    background: var(--red);
    border-radius: var(--rounded);
    padding:0.1em;
    margin-top:1em;
    padding:1em;

    display: flex;
    flex-direction: column;
    align-items: start;
}

.main-content{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-left:1em;
    margin-right: 1em;
}

.command-title{
    margin-bottom:0.1em;
}

.command-hide p{
    margin-top: 0.5em;
}

.command-hide span{
    display:block;
    background-color: var(--orange);
    border-radius: 20px;
    text-align: center;

    margin-top:1em;
    padding:0.5em;
}

.command-hide span:hover{
    cursor: pointer ;
}


/*Filter box*/

.filter-box{
    margin-top: 2em;
    margin-bottom: 1em;
}
.filter-box ul li{
    list-style-type: none;
    background-color: var(--orange);
    padding:0.5em;
    border-radius: var(--rounded);

    cursor:pointer;
}

.filter-box ul{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap:0.5em;
    column-gap:0.5em;

}


#response{
    display:none;
    position: absolute;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.38) ;
}

#justifyCenter{
    display:flex;
    height:80%;
    justify-content: center;
    align-items: center;
}

#responseBox{
    display:flex;
    flex-direction: column;
    text-align:center;
    width:50%;
    
    background-color: var(--green);
    padding:1em;
    border-radius: var(--rounded);
}

#responseBoxHead, #responseBoxBody{
    color:var(--black);
    padding: 0.2em;
}

#responseBoxBody{
    text-align: left;
}


/*Ipad mode*/
@media (min-width:500px) {
    .navbar{
        display:none;
    }

    .inner-nav{
        display:none;
    }

    .bigger-nav{
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 0 0 var(--rounded) var(--rounded);
        box-shadow: 3px 8px 32px 0px rgba(0,0,0,0.38);

        padding-bottom: 0.5em;
        padding-top:0.5em;
    }
    
    .bigger-nav a{
        color:var(--black);
        margin-left:5%;
    }
}



/*Desktop mode*/