@media only screen and (min-width:1280px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .boxContent {
        position: relative;
        width: 100%;
        height: 400pt;
        border: 4pt solid rgb(var(--main-1));
        color: rgb(var(--white));
        font-size: 14pt;
    }
    .big {
        display: block;
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 60pt;
        -webkit-transform: translate(-50%, -60%);
        -moz-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .text {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media only screen and (min-width:900px) and (max-width:1279px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .boxContent {
        position: relative;
        width: 100%;
        height: 400pt;
        border: 4pt solid rgb(var(--main-1));
        color: rgb(var(--white));
        font-size: 14pt;
    }
    .big {
        display: block;
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 60pt;
        -webkit-transform: translate(-50%, -60%);
        -moz-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .text {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media only screen and (min-width:501px) and (max-width:899px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .boxContent {
        position: relative;
        width: 100%;
        height: 400pt;
        border: 4pt solid rgb(var(--main-1));
        color: rgb(var(--white));
        font-size: 14pt;
    }
    .big {
        display: block;
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 60pt;
        -webkit-transform: translate(-50%, -60%);
        -moz-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .text {
        display: block;
        position: absolute;
        width: auto;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media only screen and (max-width:500px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .boxContent {
        position: relative;
        width: 100%;
        height: 400pt;
        border: 4pt solid rgb(var(--main-1));
        color: rgb(var(--white));
        font-size: 14pt;
    }
    .big {
        display: block;
        position: absolute;
        top: 40%;
        left: 50%;
        font-size: 60pt;
        -webkit-transform: translate(-50%, -60%);
        -moz-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    .text {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}