body {
        background-color: #7C3B8E;
    }

    .section-body.container-fluid { 
        /* Used to remove default paddings from Bootstrap container-fluid */
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* Home Page */
    .home-body {
        margin: 4vw 4vw 6vw 4vw;
    }

    .handbook-header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .header-img {
        width: 100px;
    }

    .capes-name {
        font-size: 8px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
    }

    @media (min-width: 1140px) {
        .home-body {
            width: 1080px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .header-img {
            width: 150px;
        }

        .capes-name {
            font-size: 10px;
        }
    }

    .jobfair-img {
        width: 80px;
        margin: 0px 0px 20px 0px;
    }

    .title-div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .title-jobfair {
        font-size: 36px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
    }

    .title-career-handbook {
        font-size: 25px;
        font-weight: bold;
        color: #FECA1E;
        text-align: center;
    }

    @media (min-width: 1140px) {
        .jobfair-img {
            width: 100px;
            margin: 0px 0px 20px 0px;
        }

        .title-jobfair {
            font-size: 48px;
        }

        .title-career-handbook {
            font-size: 34px;
        }    
    }

    .start-btn {
        background-color: #FECA1E;
        color: black;
        font-size: 12px;
        font-weight: bold;
        padding: 20px 20px 20px 20px;
        border: none;
        border-radius: 10px;
        width: 100%;
        cursor: pointer;
    }

    .start-btn-div {
        margin: 10px 0px;
    }

    .download-btn {
        color: black;
        font-size: 12px;
        font-weight: bold;
        padding: 8px 20px 8px 20px;
        border: none;
        border-radius: 10px;
        width: 100%;
        cursor: pointer;
    }

    .download-btn-div {
        margin: 10px 0px;
    }

    .menu-item {
        background-color: #FECA1E;
        color: black;
        font-size: 12px;
        font-weight: bold;
        padding: 20px 20px 20px 20px;
        border: none;
        width: 100%;
        border-radius: 10px;
        cursor: pointer;
        text-align: left;
    }

    .accordion-holder {
        margin: 10px 0px;
        width: 100%;
    }

    .sub-menu {
        margin-top: -10px;
        padding: 20px 10px 10px 10px;
        border-radius: 0px 0px 10px 10px;
        z-index: -100;
    }

    .sub-menu a {
        color: inherit;
        display: block;
        font-size: 12px;
    }

    @media (min-width: 1140px) {
        .start-btn {
            font-size: 15px;
        }

        .download-btn {
            font-size: 15px;
        }

        .menu-item {
            font-size: 15px;
        }

        .sub-menu a {
            font-size: 15px;
        }
    }
    /* End of Home Page */

    /* Article */
    .article-body {
        margin: 4vw 4vw 6vw 4vw;
        color: #FFFFFF;
    }

    @media (min-width: 1140px) {
        .article-body {
            width: 1080px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .article-title {
        font-size: 24px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 30px 0px;
        text-align: center;
    }

    .article-intro {
        font-size: 14px;
        text-align: justify;
        margin-right: 10px;
    }

    .article-text {
        font-size: 14px;
        text-align: justify;
        margin: 20px 10px 20px 0px;
    }
    
    .article-text a {
        color: inherit;
        text-decoration: underline;  
    }

    .card-btn {
        background-color: #FECA1E;
        color: black;
        font-size: 14px;
        font-weight: bold;
        padding: 20px 20px 20px 20px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: none;
        cursor: pointer;
    }

    .answer-card {
        margin-top: -10px;
        margin-bottom: 10px;
        padding: 20px 10px 10px 10px;
        border-radius: 0px 0px 10px 10px;
        z-index: -100;
        color: black;
        text-align: justify;
    }

    .question-card {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .section-title {
        font-size: 18px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    @media(min-width: 768px) {
        .article-title {
            font-size: 36px;
        }
    }

    @media (min-width: 1140px) {
        .article-title {
            font-size: 50px;
        }

        .article-intro {
            font-size: 15px;
        }

        .article-text {
            font-size: 15px;
        }

        .question-button {
            font-size: 15px;
        }

        .section-title {
            font-size: 24px;
        }  
    }

    table {
        width: 100vw;
        margin-bottom: 10vw;
        margin-right: 10px;
    }

    th {
        background-color: #FECA1E;
        border: 2px solid #EDE6E6;
        color: black;
        font-weight: bold;
        font-size: 14px;
    }

    td {
        border: 2px solid #EDE6E6;
        font-size: 14px;
    }

    @media (max-width: 480px) {

        th,
        td {
            font-size: 10px;
        }
    }

    .tile {
        background-color: #FECA1E;
        color: black;
        padding: 20px 20px 20px 20px;
        margin: 0px 10px 10px 0px;
        border-radius: 10px;
        min-height: 8vw;
        width: 100%;
    }

    .tile.tip-tile {
        background-color: #FFFFFF;
        color: black;
    }

    .tile-title {
        font-weight: bold;
        text-align: center;
    }

    .tile-content {
        font-size: 14px;
        text-align: justify;
    }

    .tile-content a {
        color: inherit;
        text-decoration: underline;
    }

        @media (min-width: 1140px) {
            .tile-content {
                font-size: 15px;
            }
    }

    .direction-btn {
        border-radius: 10px;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .left-btn {
        float: left;
    }

    .right-btn {
        float: right;
        background-color: #FECA1E;
    }

    @media (min-width: 1140px) {
        .direction-btn {
            font-size: 15px;
        }
    }
    /* End of Article */