/* -------- Overarching Classes -------- */

body {   
    font-family: 'Raleway', sans-serif;
    color: white;
    background-color: rgb(20, 20, 20);
}



/* br {
    display: block;
    margin-bottom: 15pt;

    Clears default height
    content: "";
} */

a {
    text-decoration: none;
    color: rgb(70, 200, 210)
}

a:hover {
    color: rgb(49, 151, 157);
}

.padded {
    padding: 80px 180px 80px 180px
}

/* Specifications for mobiles */
@media (max-width: 1000px) {
    .padded {
        padding: 50px 50px 50px 50px
    }
}

/* Bootstrap overarching classes */
.card {   
    background-color: rgba(50, 50, 50, 0.6); /* rgba(102, 94, 77, 0.5);  */
}

.card-title {
    font-size: 18pt;
    text-align: center;
    font-weight: 500;
    color: white;
}

.card-text {
    color: white;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}

.modal-header {
    background-color: black;
}

.modal-body, .modal-footer {
    background-color: rgb(20, 20, 20);
}


/* -------- Menu Header -------- */

.navbar-title {
    color: white;
    text-decoration: none;
  }

#mainNav {
    border-bottom: none;
    background-color: transparent;
    transition: background-color 1s ease-in-out;
    z-index: 3;
    position: fixed;
}

img#navbar-logo {
height: 40px;
padding-right: 10pt;
}

.navbar-fixed-top {
width: 100%;
top: 0;
position: fixed;
position: -webkit-sticky;
width: 100%;
}

#mainNav.solid-background {
  background-color: rgb(0, 0, 0);
}



/* ---------- Banner ----------- */
.banner-image {
    min-width: 100%;
    height: 100vh;
    background-size: cover;
}

#about-arrow{
    opacity: 1;
    transition: visibility 0.5s, opacity 0.5s linear;
}
#about-arrow.hide {
    opacity: 0;
    visibility: hidden;
}



/* --------- Portfolio ---------*/

#portfolio-preview {
    background-image: url(/img/background/rock-wall.jpg);
    background-size: cover;
    background-position: center;
}

.skill-tag {
    background-color: rgb(70, 70, 70);
    width: fit-content;
    padding: 1px 7px 1px 7px;
    margin: 3px 3px 3px 3px;
    font-size: 11pt;
    font-weight: 300;
}

/* ---------- About Us --------- */
#portfolio {
    background: 
                url('/img/background/roman-art.jpg');
    background-position: top center;
    background-size: cover;
}



/* h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
} */

h1 {
size: 50vw;
font-weight: bold;
}

h2 {
size: 30vw;
font-weight: 300;
}

h3 {
size: 20vw;
font-weight: 100;
font-style: italic;
}

h4 {
size: 15vw;
font-style: italic;
}

h5 {
size: 12vw;
font-style: italic;
}

h6 {
size: 10vw;
font-style: italic;
}

p {
    size: 12vw
}