.container{
    width:77%;
    margin: auto;
}

#wrapper{
    display:grid;
    grid-template-columns: 2fr 8fr 50fr;
    background-color: #393939;
    color: white;
}

#original {
    width: 100%;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

header {
    background-color:#444;
    color: white;
    text-align:center;
    margin: 0px 0px 50px 0px;
}

footer {
    background-color:#444;
    color: white;
    text-align:center;
    margin: 50px 0px 0px 0px;
}

#wrapper > div {
    padding: 10px;
}

#optionbar {
    display:grid;
    grid-template-columns: 1fr;
    align-items: start;
}

#optionbar > div{
    padding: 5px;
    margin: 3px;
}

#optionbar #long {
    margin-bottom: 300px;
}

.button{
    border: 1px solid #393939;
}

.button:hover{
    border: 1px solid white;
}

#sidebar {
    display:grid;
    grid-template-columns: 1fr;
    margin-top: 12px;
    align-items: start;
}

#sidebar .expand {
    margin-bottom: 10px;
}

#main {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    align-items: start;
    grid-column-gap: 15px;
}

#main #primary-box {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: start;
    margin-top: 12px;
}

.box123 {
    grid-row: 1;
    grid-column: 2;
    grid-column: 2/4;
}

.box212 {
    grid-row: 2;
    grid-column: 1;
    grid-column: 1/3;
}

#main #secondary-box {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: start;
    margin-top: 12px;
    padding-right: 20px;
}

#main #secondary-box .small-box{
    display:grid;
    grid-template-columns: 1fr 1fr;
}

@media(max-width: 1150px){
    #main #secondary {
        opacity: 0;
        margin-left: -400px;
    }
}

@media(max-width: 918px){
    #main #primary {
        opacity: 0;
        margin-left: -500px;
    }

}

@media (max-width: 480px){
    .container{
        width:  100%;
    }

    .side-app img{
        width: 230px;
    }
}