/*
    BLACKOUT styles for personal portfolio website.
    created by frankylee.
    Copyright 2021.
*/

:root {
    --blackout: #000;
    --nightout: #212121;
    --whiteout: #fefefe;
    --lightout: #bfbfbf;
    --fog: #555;
    --gold: #D4AC0D;
    --oldgold: #9A7D0A;
}
html {
    background: var(--blackout) url('../img/pnw-forest-ferns-near-quartzville-oregon-by-frankylee.jpg') no-repeat fixed center center;
    background-size: cover;
    height: 100%;
}
body {    
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: lighter;
    color: var(--whiteout);
    background: none;
}
header {
    height: calc(100vh - 104px);
    -webkit-filter: drop-shadow(2px 2px 4px var(--blackout));
    filter: drop-shadow(2px 2px 4px var(--blackout));
    /* 
        TODO: clamp the display-4 font-size 
    */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    header {
        height: -moz-fit-content;
        height: fit-content;
    }
}
header h1.display-4 {
    font-size: clamp(2rem, 16vw, 3.5rem);
}
h1, h2, h3, h5, .h1, .h2, .h3, .h5 {
    font-weight: 100;
}

/*  
    Link colors and hover effects  
*/
nav a, 
.btn {
    color: var(--whiteout);
}
nav a:hover,
footer a:hover {
    color: var(--oldgold);
}
a {
    color: var(--oldgold);
}
a:hover {
    color: var(--lightout);
}
.btn:hover {
    background-color: var(--nightout);
    color: var(--whiteout);
}
footer a {
    color: var(--fog);
}

code {
    color: var(--whiteout);
}
.simple i {
    font-size: 1.3rem;
}

/*
    Global design classes 
*/
.bg-blackout {
    background-color: var(--blackout);
}
.bg-gold {
    background-color: var(--oldgold);
}
.bg-blur {
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(3px);
}
.bg-darken {
    background-color:rgba(0, 0, 0, .6)
}
.border-top {
    border-top: 1px solid var(--nightout)!important;
}
.simple {
    list-style-type: none;
}
.text-gold {
    color: var(--oldgold);
}
.text-muted {
    color: var(--fog)!important;
}


/* 
    YOU MADE IT TO THE BONUS ROUND  :D
*/
::selection {
    color: var(--oldgold);
    background-color: var(--blackout);
}
:focus-visible {
    /* keeping this for inclusive ui design */
    outline-color: var(--oldgold);
}