@font-face {
    font-family: 'Pacifica';
    src: url('/fonts/pacifica_condensed_regular-webfont.woff2') format('woff2'),
         url('/fonts/pacifica_condensed_regular-webfont.woff') format('woff'),
         url('/fonts/Pacifica_Condensed_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {
    font-family: 'Play', sans-serif; 
    background-color: #404040;
}

.navbar {
    background-color: #2c2c2c;
    padding:0;
    line-height: normal;
}

.navbar .navbar-nav {
    width:40%;
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    font-family: 'Pacifica', sans-serif; 
    color: #f8f2e8; 
    font-size: x-large;
}

.navbar .navbar-nav .nav-item{
    width: auto;
}
.navbar .navbar-brand{
    font-size: xxx-large;
    padding:0;
}

.navbar .navbar-nav .nav-link:hover {
    background-color: #6f7070;
}

.navbar .navbar-nav .nav-link.active {
    background-color: #f8f2e8;
    color: black;
}

.parallax {
    background-image: url("imgs/laptop.webp");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-2 {
    background-image: url("imgs/chip.jpg");
    width: 100%;
    height: auto;
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.title {
    margin-top:30vh;
    color: #ddd8cf;     
    max-width: 600px;
}

.footer {
    background-color: #2c2c2c;
    color: #aca8a1;    
    text-align: center; 
    height: 50px;
    line-height: 50px; 
}

.about {
    color: #f8f2e8; 
    background-color: #404040;
    font-family: 'Raleway', sans-serif; 
}

.spacer {
    height: 50px;
}

.work {
    color: #f8f2e8; 
    background-color: #404040;
    opacity: 0; 
    scale: 0.7;
    animation: fadeIn forwards;
    animation-timeline: view();
}

.w1 {
    animation-range: entry 100% cover 50%;
}
.w2 {
    animation-range: entry 150% cover 50%;
}
.w3 {
    animation-range: entry 175% cover 50%;
}
.w4 {
    animation-range: entry 200% cover 50%;
}

@keyframes fadeIn {
    to {opacity: 1; scale: 1;}
}

.blog, .blog-list{
    padding-left:15%;
    padding-right:15%;
    color: #f8f2e8; 
    margin-top: 100px;
    font-family: 'Raleway', sans-serif; 
}

.custom-form {
    background-color: #d5d5d5;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 100px;
    width: 100%;         
    max-width: 600px;    
    min-width: 50px;    
}

.highlight {
    background-color: #e4e4e4;
    font-style: italic;
}

.card, .blog {
    background-color: #eaeaea;
    color: #2b2b2b;
}

.card-img-top {
    height: 200px;
}

.card-title {
    font-size: x-large;
}

a {
    text-decoration: none;
    color:#2b2b2b;
}

a:link, a:visited {
    color: cadetblue;
}
a:hover {
    text-decoration: none;
    color:#BF026D;
}

.card-footer{
    font-style: italic;
    color: #2b2b2b;
    font-size: smaller;
    background-color: #eaeaea;
}

.blog {
    font-family: 'Raleway', sans-serif; 
    margin-left: 15%;
    margin-right: 15%;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(221,216,207, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border-color: #ddd8cf;
}

.nav {
    text-align:right;
}

.blog img {
    width: 100%;
    margin-bottom: 2%;
}

.blog-list a {
    color:#1d2038;
}

.blog-list a:hover {
    text-decoration: none;
    color:#BF026D;
}


@media only screen and (max-width: 1080px) {
    .blog-list {
        padding-left: 5%;
        padding-right: 5%;
    }
    .blog {
        margin-left: 5%;
        margin-right: 5%;
    }
}
@media only screen and (max-width: 768px) {
    .blog-list {
        padding-left: 0;
        padding-right: 0;
    }
    .blog {
        margin-left: 0;
        margin-right: 0;
    }
    .parallax, .parallax-2 {
        background-attachment: scroll;
    }
    
}