/* font-family: 'Righteous', cursive;
font-family: 'Roboto', sans-serif; */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
body  {
    font-family: 'Roboto', Verdana, sans-serif;
    background-image: url("https://www.wallpaperhdc.com/wp-content/uploads/2017/04/birch-wood-grain-texture-hq-picture.jpg");
    background-size: cover;
}
.mahogany {
    background-image: url("https://i.pinimg.com/originals/54/06/dd/5406ddf79ea4b44c3d92415ed500b909.jpg");
    background-size: cover;
}

.header-text, .navbar-brand, .reflect-title
{
    font-family: 'Righteous', Verdana, sans-serif;
    color: #f04583;
    max-width: 1200px;
    margin: auto;
}
.about-me-title {
    font-family: 'Righteous', Verdana, sans-serif;
}
.header-sub-text, .nav-item {
    color: white;
    font-family: 'Roboto', Verdana, sans-serif;
}
.top-nav {
    max-width: 1200px;
    margin: auto;
}
.nav-reflect, .jumbo-reflect {
    background-color: transparent;
}
.jumbo-reflect {
    margin-bottom: auto;
}
.nav-item {
    font-size: 1.2em;
    background-color: rgba(128, 128, 128, .4);
    margin: 0.5em;
    border-radius: 5px;
    padding: 0;
}
.reflect-content {

}
.reflect-section {
    max-width: 1200px;
    margin: auto;
}

.reflect-content h3 {
 font-family: 'Righteous', Verdana, sans-serif;   
}

.jumbotron {
    padding: 1em;
}

.about-me {
    font-size: 1em;
    padding-top: 1em;
    margin: auto;
    background-color:  rgba(245, 222, 179, 0.4);
    border-radius: 10px;
    max-width: 1200px;
}
.passions {
   font-size: 2.7em;
    padding: 0.5em;
    background-color:  rgba(245, 222, 179, 0.4);
    border-radius: 10px;
}
.history {
    padding: 1em;
    margin: 2em 0;
    border-radius: 10px;
}

.history h3 {
    color: #f04583;
}
.history ul {
    color: white;
}

.pieces {
    margin: auto;
}
.card {
    background-color:  rgba(245, 222, 179, 0.7);
    text-align: center;
    margin-bottom: 1em;
}
.reflect-content {
    background-color:  rgba(245, 222, 179, 0.5);
    margin: 1em;
    border-radius: 10px;
}
.card-img-top {
    margin-top: 1em;
    border: 1px solid black
}
.card-text, .card-title {
    text-align: center;
}

.card-title {
    font-size: 1.5em;
}
.card-text {
    font-size: 1em;
}
.row-margins {
    margin: 1em;
}
.portfolio {
    padding: 0.2em 1em;
}
.modal-buttons {
    margin-top: auto;
    border: none;
    border-radius: 5px;
    background-color: #d81159;
    color: white;
    font-weight: 600;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


.modal-buttons:hover {
    background-color: #8f2d56;
    color: white;
    font-weight: 800;
}

/* PORTFOLIO MODAL */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}

a:link {
    color: #218380;
}
a:visited {
    color: #73d2de;
}
a:hover, a:focus  {
    color: #d81159;
    text-decoration: none;
}
a:active {
    color: #8f2d56;
}

/* The Close Button */
.close, 
.closeVivid,
.closeMeek {
    color: blue;
    margin-left: auto;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus,
.closeVivid:hover,
.closeVivid:focus,
.closeMeek:hover,
.closeMeek:focus{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#hoverModal {
    background-image: url("images/hoverpad.PNG");
}
footer {
    background-image: url("https://i.pinimg.com/originals/54/06/dd/5406ddf79ea4b44c3d92415ed500b909.jpg");
    background-size: cover;
    color: white;
    padding-top: 1em;
    
}


footer p {
    padding-top: 1em;
}

footer img {
    height: 3em;
    margin: 0 1em;
}
.my-pic {
    border-radius: 10px;
}

@media only screen and (max-width: 500px) {
    .passions {
        font-size: 1.5em;
        text-align: center
    }
}

@media only screen and (min-width: 501px) and (max-width: 768px) {
    .passions {
        font-size: 2em;
        text-align: center;
    }
        .my-pic {
        width: 60%;
    
    }
}

@media only screen and (min-width: 769px) and (max-width: 1020px) {
    .passions {
        font-size: 1.5em;
        text-align: center;
    }
        .my-pic {
        width: 100%;

    }
}

@media only screen and (min-width: 1021px) {
    .passions {
        font-size: 2em;
        text-align: center;
    }
        .my-pic {
        width: 100%;

    }
}