/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .main-body {
        margin: 0 50px;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    body {
        background-image: url('../img/dots.png');
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: auto;
    }
    .text-xl-start {
        font-size: 1.25rem;
    }
    #main-title {
        font-size: 3rem;
        font-weight: 400;
    }
    #sub-title {
        font-size: 1.25rem;
        margin: 48px 0;
    }
    .box-container {
        padding: 40px;
    }
}


/* X-Large devices (large desktops, 1200px and down) */

@media (min-width: 1200px) {
    .main-body {
        margin: 0 200px;
    }
    #side-resume {
        display: flex;
    }
}


/* XX-Large devices (larger desktops, 1400px and down) */

@media (min-width: 1600px) {
    .main-body {
        margin: 0 600px;
    }
}