/* set the color scheme of the site */
:root {
    --dark: #3C403D;
    --medium: #39603D;
    --lighter: #ffffff;
    --light: #DADED4;
    --accent: #A3BCB6;
}

body, html {
    height: 100%;
    color: var(--light);
    font-family: 'Comfortaa';
}

h1, h2, h5 {
    font-weight: 800;
}


.landing-page {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://sandra-marr.github.io/008_Portfolio-Update1/assets/images/background.jpg");
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.main-page {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://sandra-marr.github.io/008_Portfolio-Update1/assets/images/background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: -1000;
    margin-left: -12px;
  
}

.nav-btn {
    background-color: var(--light);
    color: var(--dark);
    border: none;
    transition: ease-in-out;
}

.nav-btn:hover, .nav-btn:focus {
    background-color: var(--dark);
    color: var(--light);
    border: none;
}

.nav-btn a {
    color: inherit;
    text-decoration: none;
    transition: ease-in-out;
 }

 .nav-btn a:hover {
    color: var(--light);
 }

 .nav-btn-toggle {
    background-color: var(--light);
    color: var(--dark);
    border: none;
 }

 nav {
     background-color: var(--light);
 }

 address {
     margin: 0;
 }
 
.footer-btn  {
    color: var(--light);
    background-color: transparent;
    border: transparent;
    border-radius: 1em;
    transition: ease-in-out;
    display: block;
    margin: .5rem .5rem;
    text-decoration: none;
    transition: ease-in-out;
}
 
.footer-btn:hover {
    color: var(--medium);
    background-color: var(--light);
    background: radial-gradient(circle, rgba(218,222,212,1) 0%, rgba(218,222,212,1) 50%, rgba(60,64,61,1) 70%);
    border: none;
    box-shadow: 0 0 15px black;
    transition: ease-in-out;
}

#tagline {
    font-style: italic;
    line-height: 1.0;
    font-size: .85em;
    color: var(--accent);
}

#profile {
    width: 15%;
    opacity: 85%;
}

.mainbckgrnd {
    background:  linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    box-shadow: 0 0 2px 2px var(--dark);
}

.accent {
    color: var(--accent);
}   

.responsive-img{
    background-color:  var(--light);
    color: var(--dark);
    transition: .5s;
    width: 95%;
}

.preview {
    background-color: inherit;
    color: inherit;
    border: none;
    transition: .2s;
}

.responsive-img a {
    color: inherit;
}

.card-img {
   width: 90%;
   height: auto;
   background-color: transparent;
} 
.card {
    background-color: transparent;
    border: none;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.cardbackground {
    color: var(--dark);
    background-color: var(--light);
    background: radial-gradient(circle, rgba(218,222,212,1) 0%, rgba(218,222,212,1) 50%, rgba(60,64,61,1) 90%);
}

@media only screen and (max-width: 576px) {
    body {
        font-size: .75rem;
    }

    .dropdown-item {
        font-size: .75rem !important;
    }

    
  }

  @media only screen and (max-width: 839px) and (min-width: 576px) {
   h5 {
        font-size: .75rem;
    }

    .responsive-img {
        font-size: .5rem;
    }


    
  }

  .masonry-with-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .scroller {
    position: relative;
    height: 300px;
    overflow: auto;
  }