:root {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
li,a {
    list-style-type: none;
    text-decoration: none;
    color: #312835;
}



body {
    display: flex;
    margin: 2px;
    border: 0.5px solid #302835;
    border-radius: 5px;
}

.Nav {
    display: flex;
    flex-flow: column;
    /* width: 140px; */
    /* padding: 140px 40px; */
}
.Nav > a {
    display: flex;
    justify-content: center;
    border: 2px solid #302835;
    border-radius: 5px;
    margin: 6px;
    padding: 10px 16px;
    width: 100px;
}
.Nav > a:hover {
    background-color: #4CAF50;
    border-radius: 5px;

}

.Main {
    /* display: flex;
    flex-flow: column; */
    /* border: 2px solid #6DF7EE; */
    border-radius: 5px;
    width: 100%;
}
.Card {
    display: flex;
    /* flex-flow: column; */
    /* border: 2px solid #6DF7EE; */
    border-radius: 5px;
    margin: 0 0 10px 0;
}

.Card > a {
    display: flex;
    justify-content: center;
    border: 2px solid #302835;
    border-radius: 5px;
    margin: 6px;
    padding: 10px 16px;
    width: 100px;
}

.Demo {
    display: flex;
    flex-flow: wrap;
}
.Demo > samp {
    display: flex;
    flex-flow: row;
    justify-content: center;
    border: 1px solid #302835;
    border-radius: 3px;
    padding: 12px;
}