html {
    font-family: 'Courier Prime', monospace;
}

body {
    background-color: whitesmoke;
    background-size: cover;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: rgb(2, 18, 19);
}

main {
    flex: 1 0 auto;
}

nav {
    text-shadow: -.5px .5px black;
}

h1 {
    color: rgb(173, 222, 222);
    text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
    font-size: 6.66vmin;
}

h3 {
    color: rgb(173, 222, 222);
    text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
    font-size: 5vmin;
}

h4 {
    color: rgb(173, 222, 222);
    text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
    font-size: 4.2vmin;
}

h5 {
    color: rgb(173, 222, 222);
    text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
    font-size: 3 vmin;
}

a {
    color: rgb(0, 85, 85);
    filter: will-change;
}

a:visited {
    color: whitesmoke;
    filter: will-change;
}

a:hover {
    transform: scale(102%);
    transition: ease-in-out 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    color: rgb(0, 142, 142);
}

a:visited:hover {
    transform: scale(102%);
    transition: ease-in-out 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    color: rgb(0, 142, 142);
}

.cardA {
    color: rgb(0, 85, 85);
}

.cardA:visited {
    color: rgb(0, 85, 85); 
}

a:hover {
    transform: scale(102%);
    transition: ease-in-out 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    color: rgb(0, 142, 142);
}

a:visited:hover {
    transform: scale(102%);
    transition: ease-in-out 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    color: rgb(0, 142, 142);
}

p {
    font-size: 2.25vmin;
}

.card {
    border-radius: 5px;
    filter: will-change;
}

.card:hover {
    transition: ease-in 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
}

.card-content {
    text-overflow: clip;
    overflow: hidden;
    font-size: auto;
    margin: 1vmin;
    padding: 1vmin;
}

.responsive-img {
    border-radius: 5px;
    filter: will-change;
    opacity: 95%;
}

.responsive-img:hover {
    transform: scale(101%);
    transition: ease-in 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    cursor: pointer;
    opacity: 100%;
}

.responsive-video {
    border-radius: 5px;
    filter: will-change;
    opacity: 95%;
}

.responsive-video:hover {
    transition: ease-in 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
    cursor: pointer;
    opacity: 100%;
}

table {
    border-radius: 5px;
    text-align: center;
    place-items: center;
    justify-content: center;
    align-items: center;
}

thead {
    border-radius: 5px;
    text-align: center;
    place-items: center;
    justify-content: center;
    align-items: center;
}

tbody {
    border-radius: 5px;
    text-align: center;
    place-items: center;
    justify-content: center;
    align-items: center;
}

td {
    border: 1px solid rgb(2, 18, 19);
    border-radius: 5px;
}

th {
    padding: 1vmin;
    text-align: center;
    place-items: center;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(2, 18, 19);
    border-radius: 5px;
}

tr {
    padding: 1vmin;
    text-align: center;
    place-items: center;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.btn {
    border-radius: 5px;
    filter: will-change;
}

.btn:hover {
    background-color: rgb(105, 162, 162);
    color: whitesmoke;
    transform: scale(103%);
    transition: ease-in 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
}

button {
    border-radius: 5px;
    border: 1px solid teal;
    text-shadow: -.5px .5px black;
    filter: will-change;
}

button:hover {
    background-color: rgb(105, 162, 162);
    color: whitesmoke;
    transform: scale(103%);
    transition: ease-in 173ms;
    filter: drop-shadow(0 0 1.73vmin rgb(183, 220, 210));
}

.uploadBtn {
    border-radius: 5px;
}


footer.page-footer {
    padding-top: 0;
    text-align: right;
    text-shadow: -.5px .5px black;
}


@media (max-width: 786px) {
    h1 {
        color: rgb(173, 222, 222);
        text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
        font-size: 4.2vmin;
    }

    h3 {
        color: rgb(173, 222, 222);
        text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
        font-size: 3vmin;
    }

    h4 {
        color: rgb(173, 222, 222);
        text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
        font-size: 2.5vmin;
    }

    #brandName {
        opacity: 0%;
    }

    h5 {
        color: rgb(173, 222, 222);
        text-shadow: -.5px .5px teal, -.75px .75px black, -1px 1px whitesmoke;
        font-size: 2vmin;
    }

    p {
        font-size: 1.73vmin;
    }
}