html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    color: rgb(130, 139, 139);
    background-color: rgb(44, 48, 48);
    
}

div {
    background-color: rgb(22, 22, 22);
}

#title{
    padding: 0.6cm;
    text-align: center;
    margin: 0;
}

.bar{
    display: flex;
}
.tools-bar{
    display: flex;
}

.element-of-bar {
    text-align: center;
    padding: 0.6cm;
}
.element-of-footer {
    text-align: center;
    width: 25%;
    padding: 0.1cm;
}

a{
    color: inherit;
    text-decoration: none;
}
h1{
    padding: 0.5cm;
    margin-left: 1cm;
}
p{
    margin-left: 1cm;
}
.list-elements{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55cm;
    margin-left: 1cm;
}
li {
    list-style-type: none;
}
button {
    cursor: pointer;
    background-color: rgb(44, 48, 48) ;
    margin: 1%;
    padding: 1.2%;
    margin-left: 0;
    border: 0;
    transition-duration: 0.4s;
}
button:hover{
    background-color: rgb(130, 139, 139);
}

.footer {
    padding: 0.1px;
    margin-top: 8px;
    height: 12%;
}

select{
    background-color: rgb(44, 48, 48);
    border: 0;
    padding: 1.2%;
    width: 25%;
    margin-left: 23.5%;
    margin-right: 23.5%;
    text-align: center;
}
.tool-button{
    text-align: center;
    padding: 0.6cm;
    transition-duration: 0.4s;
    margin-right: 1cm;
    background-color: rgb(34, 38, 38);
    cursor: pointer;
}
.tool-button:hover{
    background-color: rgb(100, 109, 109);
    color: rgb(34, 38, 38);
}
img{
    height: 60;
    width: 60;
}
.footer-elements{
    display: flex;
}
.mobile{
    display: none;
}
.interface{
    width: 79%;
}
.content-container{
    padding-top: 0.5cm;
    margin-top: 8;
    height: 76%;
}
@media screen and (width < 450px) {
    body{
        margin: 0;
    }
    img {
        height: 40;
        width: 40;
    }
    .footer{
        height: 9%;
    }
    .bar{
        display: none;
    }
    .tool-button{
        padding: 0.1cm;
        font-size: 15;
        width: 30%;
    }
    #tools-menu{
        display: none;
    }
    .mobile{
        display: block;
    }
    .tools-bar{
        display: block;
    }
    #canvas-div{
        display: none;
    }
    #mobile-index{
        display: block;
        height: 80vh;
    }
    #title{
        text-align: left;
        margin-right: 18%;
        width: 75%;
    }
    #nav-button{
        background-color: rgb(22, 22, 22);
        margin: 0;
        padding: 0;
        transition-duration: 0.4;
        height: 3;
        width: 15%; 
        font-size: 35px;
        color: rgb(100, 109, 109);
    }
    #nav-menu{
        z-index: 5;
        background-color: rgb(22, 22, 22);
        height: 100%;
        width:50%;
        position: fixed;
        left: 100%;
        transition-duration: 0.1;
    }
    #nav-blurr{
        z-index: 4;
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        opacity: 0.3;
        background-color: rgb(100, 109, 109);
    }
    .element-of-bar {
        text-align: center;
        padding: 0.6cm;
    }
    #tools-bar-mobile{
        display: flex;
    }
    select{
        margin-left: 15%;
        margin-right: 15%;
    }
    .interface{
        margin-top: 8;
        width: 100%;
    }
    .content-container{
        height: 79%;
    }
    .list-elements{
        font-size: 15px;
    }
}