@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&text=darren%20locke&display=block');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap');

html {
    width: 100vw;
    position: absolute;
    min-height: 100%;
}
body {
    background-color:#FCFCFC;
}
#dl-nav-name {
    font-family: 'Titillium Web', 'Courier New', Courier, monospace; 
    font-size: 40px;
    font-weight: 900;
    position: relative;
    margin-bottom: -10px;
}
.dl-dropdown-header {
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
    font-weight: 400;
    display: inline;
    position: relative;
    top: 13px;
}
.dl-dropdown-item-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
}
h1,h2,h3,h4,h5,h6 {
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;}
a {
    color: steelblue;
}
a:hover {
    color: darkorange;
}
a:active {
    color: orange;
}
p {
    font-family: 'Courier New', Courier, monospace;
}
.lead {
    line-height: 120%;
}
.card-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    font-weight: bold;
    opacity: 80%;
}
.caption {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: normal;
    text-align: right;
}
.caption-left {
    font-family:'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: bolder;
    float: left;
}
.caption-right {
    font-family:'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-style: italic;
    float: right;
}
.shooting-info {
    font-family:'Courier New', Courier, monospace;
    font-size: 0.8em;
    float: right;
    text-align: right;
}
.condense {
    letter-spacing: -5px;;
}
hr.line {
    border: 0.5px dashed #FCFCFC;
}
.blur {
    filter: blur(0.5px);
}
.card {
    background-color: #EFEFEF;
}
.footer {
    position: absolute;
    bottom: -30px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 10px 10px 0px 0px;
    background-color: #EFEFEF;
}
.footertext {
    font-family: 'Source Code Pro';
    font-size: 0.7em;
    font-weight: 400;
    text-align: center;
    color: #999999;
}
img[src*='thumb']:hover {
    opacity: 0.85;
    transition: 300ms;
    transform: scale(1.005);
}
img {
    transition: 300ms;
}

    /* dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #232323; 
        }
        #dl-nav-name {
            color: #DDDDDD;
        }
        h1,h2,h3,h4,h5,h6 {
            color: #FCFCFC;
        }
        p {
            color: #CCCCCC;
        }
        a {
            color: #7db8d4;
        }
        hr.line {
            border: 1px dotted #f1f1f4;
        }
        .left {
            color: #CCCCCC;
        }
        .right {
            color: #CCCCCC;
        }
        .footer {
            background-color: #333333;
        }
        .card {
            background-color: #2d2c2c;
            border-color:#000000;
        }
        .dropdown-menu {
            background-color: #333333;
            border-color:#000000;
        }
        .dropdown-item {
            color: #CCCCCC;
        }
        .dropdown-item:hover {
            background-color: #232323;
            color: #CCCCCC;
        }
        .dropdown-toggle {
            background-color: #232323;
        }
        #navbarDropdown {
            color: #CCCCCC;
        }
        .footertext {
            color: #CCCCCC;
        }
    }