/*------------------------------BODY------------------------------*/

.h3, h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

/*------------------------------JUMBROTRON------------------------------*/

.height60p {
    height: 60vh;
    /*Helps to set the height to the user's device viewport height*/
}

.contentBox2 {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    text-align: center;
    z-index: 10;
    /*ContentBox2 is very similar to contentBox 1, just a very slight change such as its display properties, but other than that
    it is very similar*/
}

.contentBox2 h1 {
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    font-size: 5rem;
    /*To give <h1> elements inside the html more weight, more flare -> to stand out and catch the attention of the user*/
}

.contentBox2 p {
    color: #fff;
    font-size: 1.3rem;
    /*I set the paragraphs inside contentBox2 to be smaller, and more ordinary than their h1 counterparts
    - Also, to give them alittle more font size as some of them are really small */
}

#stats {
    /*Stats being the statistics of stuff such as the countries, servers and Gbps capacity*/
    background: none;
    padding: 2rem 0;
    /*Gives the numerical digits displayed a little more room to breathe*/
    color: #444;
    /*Color of the data that will be represented by numerical digits*/
}

#stats .stat {
    display: inline-block !important;
    /*This was necessary for me, as it helps me to push from a 3x1 layout to a 1 x 3 layout for the data and 
    statistics -> so it fits the layout when viewing from a computer*/
}

#stats .stat strong {
    border: 2px solid #ccc;
}

#stats .stat .strong {
    display: -ms-flexbox;
    display: flex;
    /*Display properties*/
    height: 100px;
    width: 150px;
    /*A pre-set value for the height and width, it will fit nicely while not being too big or small!*/
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    /*Center all the values inside the "content box" so as to make it aesthetically pleasing*/
    margin: auto 1rem 1rem;
    border: 2px solid #fff;
    /*Gives the border a very creamy white color*/
    font-weight: 400;
    font-size: 40px;
    color: white;
    font-style: italic;
    /*Giving the font weight and size*/
}

#stats span {
    color: #fff;
}

#count-countries, #count-servers, #count-gbs {
    color: #fff;
}

.text-center {
    text-align: center!important;
}

th>p {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}

/*------------------------------BUFFER------------------------------*/

.buffer {
    padding-top: 4.5rem;
    /*Its to give items in the jumbotron more room to breathe, by aligning the content not too high up*/
}

hr {
    margin-top: -1rem;
    margin-bottom: 1rem;
    border: 5px;
    border-bottom: 2px solid #dee2e6 !important;
    /*<hr> tag to define the thematic changes in the content*/
}

/*------------------------------SECTION------------------------------*/

.sec2 {
    height: 50vh;
}

th {
    text-align: inherit;
    color: white;
    /*text color be white*/
}

.table td, .table th {
    color: white;
    /*text color be white*/
}

.table td, .table th {
    padding: .75rem;
    border-top: none;
    /*To make the header, such as Asia Pacific, Europe, Americas stand out, I decided to remove the border-top so only
    the table header standsout*/
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    text-align: start;
}

.svgs {
    height: 30px;
    width: 45px;
    /*Sets the height and width of the pictures to 45px by 30px*/
    margin-left: 1rem;
    /*SVGs are source vector graphics, making them scalable etc. As such, I scaled svgs to a specific height, to make it fit
    while not being too big/small so it makes users see all the available server at once*/
}

.svgText {
    display: inline-block;
    /*inline block help to make the images and the text of the country to be on the same line -> so it isnt jarring to the user
    eyes*/
    padding-left: 1rem;
}

.serversAndMore {
    color: white;
    text-decoration: none;
    /*servers and more is basically ...and x other countries -> so to make it aesthically pleasing, i set the color to the rest
    of the components*/
}

.serversAndMore:hover {
    text-decoration: none;
    color: green
    /*When the user hovers over it, the text will turn green -> to catch their attentions and redirect them to the link*/
}

/*------------------------------BACKGROUND------------------------------*/

.backgroundSetter12 {
    position: relative;
    background: #000 url(../Pictures/2.WhatIsAVPN/1592920069656.jpg) no-repeat 70% !important;
    background-size: cover;
    height: 20vh;
}

/*------------------------------RESPONSIVITY------------------------------*/

@media (max-width:992px) {
    .sec2 {
        height: auto;
        padding: 40px 0;
        /*Whenever the user device reached less than 992 px all of these thematic changes kick in*/
    }
    .contentBox h1, .sec2 {
        font-size: 2rem;
    }
    .contentBox2 h2 {
        padding: 10px 0px;
    }
    .buffer2 {
        padding-top: 400px;
        /*This was necessary for me, as it helps to "push" the content/separate for the Asia Pacific to not collide with the statistics*/
    }
    .buffer {
        padding-top: 4.5rem;
    }
    .table td, .table th {
        padding: .75rem;
        border-top: none;
        display: block;
    }
}