*{
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

:root{
    --clr-red: red;
    --clr-white: white;
    --clr-grey: rgb(224, 224, 224);
    --clr-dark-grey: rgb(70, 70, 70);
    
    --clr-background: var(--clr-white);
    --clr-line: var(--clr-red);
    --clr-footer: var(--clr-dark-grey);

    /*---*/

    --dim-page-padding: 2.5em;
    --dim-page-width: 90%;
    --dim-page-width-large: 92.5%;

    --dim-line-width: 80vw;
    --dim-line-thickness: 1px;
    
    --dim-gap: 2em;
    --dim-padding: 1em;

    --dim-footer-external-padding: 1em;
    --dim-footer-internal-margin: 1em;
    /* --dim-footer-height: ; */

    --dim-box-container-padding: 0.75rem;
    --dim-box-container-padding: 0.75rem;

    /*---*/

    --ft-base-size: 2.1rem;

    --ft-size-b3: calc( 1.2 * var(--ft-size) );
    --ft-size-b2: calc( 1.15 * var(--ft-size) );
    --ft-size-b1: calc( 1.1 * var(--ft-size) );
    --ft-size: var(--ft-base-size);                 
    --ft-size-s1: calc( 0.9 * var(--ft-size) );
    --ft-size-s2: calc( 0.85 * var(--ft-size) );
    --ft-size-s3: calc( 0.8 * var(--ft-size) );
    --ft-size-s4: calc( 0.75 * var(--ft-size) );
    --ft-size-s5: calc( 0.7 * var(--ft-size) );
    --ft-size-s6: calc( 0.65 * var(--ft-size) );
    --ft-size-s7: calc( 0.6 * var(--ft-size) );
    --ft-size-s8: calc( 0.55 * var(--ft-size) );




    --dim-navbar-fontsize: var(--ft-size-s7);
    --dim-navbar-margin: calc(var(--dim-navbar-fontsize)*2.625);


    /* --font-type: ; */

    /*---*/

    --dim-small-breakpoint: 520px;

    /* --shadow: 0 0 1em rgba(0,0,0, .25);  */
}

body {
    margin: 0;
    background-color:var(--clr-white);
    z-index: 1;
}

/* ------------------------------------ */

.page-setup{
    width: var(--dim-page-width);
    padding: var(--dim-page-padding) 0;
    margin: auto;

    background-color: var(--clr-background);
    font-size: var(--ft-size);
}

.page-line{
    position: relative;
}

.page-line::before{
    content: "";

    position: absolute;
    
    top: 0%;
    left: 50%;
    transform: translateX(-50%);

    width: var(--dim-line-width);

    border: var(--dim-line-thickness) solid var(--clr-line);
    background-color: var(--clr-line);
    border-radius: 2em;
}




------------------------------------

a.underline-hover-effect {
    text-decoration: none;
    color: inherit;
}

.underline-hover-effect {
    display: inline-block;
    padding-bottom: 0.25rem; /* defines the space between text and underline */
    position: relative;
}

.underline-hover-effect::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: red;
    transition: width 0.25s ease-out;
}

.underline-hover-effect:hover::before {
    width: 100%;
}

/* ------------------------------------ */

/* when an image and text are meant display side by side */
.img-info-template{
    display: flex;
    flex-direction: row;

    margin: 0 auto;

    gap: var(--dim-gap);
    /* font-size: 1.5em; */
}

.reverse-img-info-template{
    flex-direction: row-reverse;
}

/* both image and text */
.img-info-template > *{
    display: block;
    padding: var(--dim-padding);
    margin: auto;
}

.img-info-template > *:nth-child(1){    
    flex: 1 0 auto;
}

/* .img-info-template > *:nth-child(2){    only text    } */

/* ------------------------------------ */

.box-container{
    padding: var(--dim-box-container-padding);
    background-color: var(--clr-red);
}

.box-container img{
    box-shadow: 0 0 var(--dim-box-container-padding) rgba(0, 0, 0, 0.37)
}

/* ------------------------------------ */

/* make the images and the nav bar not ele*/
img, .navBar, .slideshow-container{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

/* ------------------------------------ */
@media screen and (max-width: 750px){
    /* changing the padding of the sides of the page */
    :root{
        --dim-padding: calc( var(--ft-base-size) * 0.5 );
    }   
}

@media screen and (max-width: 546px){

    :root{
        --ft-size: calc( var(--ft-base-size) * 0.9 );
        --dim-page-padding: 3rem !important;
        --dim-page-width: 100%;
        /* --dim-page-width-large: 100%; */
    }

    .small-mode-padding-left{
        padding-left: 0.5em !important;
    }

    .mobile-text-size{
        font-size: 0.9em !important;
    }
    
}