.body {
    background-color: white;
}

.header {
    width: 100%;
}

.title {
    font-size: calc(0.167*300px);
    text-align: center;
    font-weight: bolder;
    cursor: progress;
}

.subTitle {
    font-size: calc(0.108*300px);
    margin-top: calc(-0.065*300px);
    text-align: center;
    font-weight: bolder;
    color: white;
    cursor: pointer;
}

.subTitle :hover {
    cursor: pointer;
}

.content h2, h5, a {
    font-size: x-small;
}

@media (min-width: 240px) {
    .title {
        font-size: calc(0.167*240px);
        color: black;
    }

    .body {
        background-color: white;
    }

    .subTitle {
        color: black;
        font-size: calc(0.108*240px);
        margin-top: calc(-0.065*240px);
    }
    .content h2, h5, a {
        font-size: x-small;
    }
}

@media (min-width: 400px) {
    .title {
        font-size: calc(0.167*400px);
        color: white;
    }

    .body {
        background-color: black;
    }

    .subTitle {
        color: white;
        font-size: calc(0.108*400px);
        margin-top: calc(-0.065*400px);
    }
    .content h2, h5, a {
        font-size: medium;
    }
}

@media (min-width: 576px) {
    .title {
        font-size: calc(0.167*576px);
        color: black;
    }

    .body {
        background-color: white;
    }

    .subTitle {
        color: black;
        font-size: calc(0.108*576px);
        margin-top: calc(-0.065*576px);
    }
    .content h2, h5, a {
        font-size:large
    }
}

@media (min-width: 768px) {
    .title {
        font-size: calc(0.167*768px);
        color: white;
    }

    .body {
        background-color: black;
    }

    .subTitle {
        color: white;
        font-size: calc(0.108*768px);
        margin-top: calc(-0.065*768px);
    }

    .content h2, h5, a {
        font-size: large;
    }
}

@media (min-width: 992px) {
    .title {
        font-size: calc(0.167*992px);
        color: black;
    }

    .body {
        background-color: white;
    }

    .subTitle {
        color: black;
        font-size: calc(0.108*992px);
        margin-top: calc(-0.065*992px);
    }

    .content h2, h5, a {
        font-size: x-large;
    }
}

@media (min-width: 1200px) {
    .title {
        font-size: calc(0.167*1200px);
        color: white;
    }

    .body {
        background-color: black;
    }

    .subTitle {
        color: white;
        font-size: calc(0.108*1200px);
        margin-top: calc(-0.065*1200px);
    }

    .content h2, h5, a {
        font-size: x-large;
    }
}

@media (min-width: 1400px) {
    .title {
        font-size: calc(0.167*1400px);
        color: black;
    }

    .body {
        background-color: white;
    }

    .subTitle {
        color: black;
        font-size: calc(0.108*1400px);
        margin-top: calc(-0.065*1400px);
    }

}

#footerDiv {
    position: relative;
    height: 60px;
    line-height: 60px;
    top: 20px;
    /* background-color: aqua; */
    align-items: center;
    /* border: dotted 5px purple; */
}

h3 {
    text-align: center;
}

.col,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-md-8,
.col-6,
.col-md-4 {
    font-size: larger;
    text-align: center;
    font-style: normal;
    color: #848484;
}

.content {
    height: calc(20vh);
    padding: 10px;
    /* background-color: rgb(241, 241, 241); */
    border: solid 2px gray;
    border-radius: 5px;
    margin: 8px 3px;
}

.footer {
    height: calc(5vh);
    /* background-color: rgb(241, 241, 241); */
    padding: 10px;
    border: solid 2px gray;
    border-radius: 5px;
    margin: 3px;
}

a {
    text-decoration: none;
    color: gray;
}

a :hover {
    color: rgb(177, 177, 177);
}

a:visited {
    color: rgb(88, 88, 88);
}