:root{
    --button-color: #347fc4;
    --text-color:#000;
    --box-color: #5d536b;
}

*{
    color: var(--text-color);
}

body{
    background-color: #272838;
}
.content{
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxDiv {
    display: grid;
    grid-template:
        '...   tlt   ...   trt   ...   '50px
        'tll   box   box   box   trr   '120px
        '...   box   box   box   ...   '120px
        'bll   box   box   box   brr   '120px
        '...   blb   ...   brb   ...   '50px/
        120px 120px 120px 120px 120px ;   
}

#topLeft {
    grid-area: tlt;
    margin: auto 0 10px 0;
}

#topRight {
    grid-area: trt;
    transform: rotate(-180deg);
    margin: auto 0 10px 0;
}

#bottomRight {
    grid-area: brb;
    transform: rotate(180deg);
    margin: 13px 0 auto 0;

}

#bottomLeft {
    grid-area: blb;
    margin: 13px 0 auto 0;
}
#topLeft2{
    grid-area: tll;
    transform:translate(50px) rotate(90deg);
    margin:auto;
}
#topRight2{
    grid-area: trr;
    transform:translate(-45px) rotate(90deg);
    margin: auto;
}
#bottomRight2{
    grid-area: brr;
    transform:translate(-45px) rotate(-90deg);
    margin: auto;
}
#bottomLeft2{
    grid-area: bll;
    transform:translate(50px) rotate(-90deg);
    margin:auto;
}

#boxText {
    background-color: var(--box-color);
    border-color:transparent;
    padding: 80px 0 0 10px ;
    font-size: 16px;
    resize: none;
    flex: 1;
    text-justify: auto;
    border-radius: 3px;
}

#box {
    width: 360px;
    height: 360px;
    background-color:var(--box-color);
    border: 2px solid var(--button-color);
    grid-area: box;

}

input[type=range] {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    height: 7px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 3px;
}

input[type=range]:hover {
    opacity: 1; 
}

/* Firefox */
input[type=range]::-moz-range-thumb{
    -webkit-appearance: none;
    width: 15px; 
    height: 15px; 
    background: var(--button-color); 
    cursor: move; 
    border-radius: 10px;
}

/* Chrome */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; 
    height: 15px; 
    background: var(--button-color); 
    cursor: move; 
    border-radius: 10px;
}

.buttons{
    margin: 50px 0;
    width: 500px;
    display: flex;
    flex-direction: column;
    height: 364px;
}


.buttons a{
    background-color: #fff;
}

.buttons div{
    display: flex;
    flex-direction: row;
}

.buttons div a{
    margin: 3px 1px;
    width: 50%;
    padding: 8px 0;
    text-align: center;
    background-color: var(--button-color);
    border-radius: 3px;
    text-decoration: none;
    transition: 0.2s;
}

.buttons div:first-child a{
    background-color:#9daab6;
}
.active{ 
     background-color: var(--button-color) !important; 
}

.buttons div a:hover{
    opacity: 0.8;
}

@media screen and (max-width: 1000px){
    .content{
        flex-direction: column;
    }
}