body {
    padding: 20px;
    width: 60%;
    background-color: #a5f2a7;

    margin: 0 auto;
    border: 6px solid black;
    border-radius: 10px;
    font-size: 1.05rem;
}

html {
    background-color: #dff7df;
    font-size: 1rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: 4rem;
    text-align: center;
    text-shadow: 5px 5px 5px gray;
    padding: 0;
}


nav ul{
    padding: 10px 10px 10px 10px;
    list-style-type: none;
    display: flex;
    border: 6px solid black;
    background: #dff7df;
    border-radius: 10px;

    overflow: auto;
}

nav li{
    text-align: center;
    flex: 1;
}

nav a{
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color:black;
}

div.linkbox ul{
    width: fit-content;
    padding: 10px 7px 4px 5px;
    list-style-type: none;
    display: flex;
    border: 3px solid black;
    background: #dff7df;
    border-radius: 10px;


}

div.linkbox li{
    text-align: center;
    flex: 1;
}

div.linkbox a{
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color:black;
}

div.downbox ul{
    padding: 10px 10px 10px 10px;

    width: fit-content;
    list-style-type: none;
    border: 3px solid black;
    background: #dff7df;
    border-radius: 10px;



}

.box {
    float: right;
    margin-right: 15px;
    padding: 1rem;

}

div.mininav ul{
    padding: 10px 10px 10px 10px;
    list-style-type: none;
    border: 3px solid black;
    background: #dff7df;
    border-radius: 10px;
    display: flex;

    overflow: auto;
}

div.mininav li{
    text-align: center;
    flex: 1;
}

div.mininav span{
    cursor: pointer;
    font-size: 1.2rem;
}

.ctrlbox {
    border: 3px solid black;
    border-radius: 10px;
    background: #dff7df;
    padding: 10px 10px 10px 10px;

}

.scrollCanvas {
    overflow: auto;
}

.pixCanvas {
    display: grid;
    height: 200px;
    width: 100px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);

    border: 3px solid black;
    

}
.pixCanvas div{
    border: 2px solid;
    border-image: repeating-linear-gradient(
        45deg,
        black 0px,
        black 2px,
        white 2px,
        white 4px

    ) 2;
    background-color: black;
}


