/* import fonts:
        https://fonts.google.com/specimen/Source+Code+Pro
        https://fonts.google.com/specimen/Open+Sans
        https://fonts.google.com/specimen/Oswald
        https://fonts.google.com/specimen/Raleway
        https://fonts.google.com/specimen/Raleway+Dots
        https://fonts.google.com/specimen/Sen
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&familyOpen+Sans&family=Roboto&family=Oswald:wght@700&family=Raleway:wght@100;300;400;500;600&family=Sen:wght@400;700;800&display=swap');

/* CLIPBOARD*/



/* * {
    border: 1px solid black;
} */

/* Bootstrap formatting overrides */

    /* light mode */
        body {
            /* background-color: #f4f1f2;  */
            /* background-color: #f2f0f0; */
            background-color: #f3f1f2;
        }
        p {
            color: #26262c;
        }
        h1,h2,h3,h4,h5,h6  {
            color: #26262c;
        }
        a {
            color: #266886;
        }
        .fixed {
            font-family: 'Courier New', Courier, monospace !important;
            color:#26262c;
        }
        hr.line {
            border: 1px dotted #26262c;
        }
        .altback {
            border-radius: 10px;
            background: #ebe9ea;
        }
        img {
            opacity: 100%;
        }
        .footer {
            /* background-color: #edebec; */
            background-color: #eceaeb;
        }
    
    /* dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #26262c; 
        }
        p,h1,h2,h3,h4,h5,h6 {
            color: #f1f1f4;
        }
        a {
            color: #7db8d4;
            text-decoration: underline;
        }
        .fixed {
            font-family: 'Courier New', Courier, monospace !important;
            color:#f1f1f4;
        }
        hr.line {
            border: 1px dotted #f1f1f4;
        }
        .altback {
            border-radius: 10px;
            background: #313138;
        }
        img {
            opacity: 75%;
        }
        .footer {
            background-color: #313138;
        }
    }
    /* all modes */
    html {
        width: 100vw;
        position: relative;
        min-height: 100%;
    }
    body {
        margin-bottom: 30px;
        overflow-x: hidden;
    }
    a {
        font-family: 'Raleway';
        font-weight: 400;
        text-decoration: underline;
    }
    p {
        font-family: 'Raleway';
        font-weight: 400;
        line-height: 19px;
        /* padding-top: 10px; */
        text-align: justify;
        hyphens: auto;
    }
    h1,h2,h3,h4,h5,h6 {
        font-family: 'Oswald';
        font-weight: 700; /* Sen comes in 400, 700, and 800 */
        text-decoration: none;
        text-transform: uppercase;
        text-align: left;
        letter-spacing: -1px;
        opacity: 90%;
        line-height: 33px;
    }
    h6 {
        line-height: 25px;
    }
    b {
        font-weight: 500;
        /* font-family: 'Oswald'; */
    }
    a:hover {
        color: #f4952e;
    }
    a:active {
        color: #af876b;
    }

/* element specific formatting */

.darrenheader {
    font-family: 'Sen';
    font-weight: 800;
    font-size: 75px;
    /* text-decoration: none !important; */
    text-transform: uppercase;
    letter-spacing: -5px;
    text-align: right;
    opacity: 100%;
    line-height: 45px;
    padding-top: 15px;
}
.nav-link {
    text-decoration: none !important;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 10px 10px 0px 0px;
}
.footertext {
    font-family: 'Source Code Pro';
    font-size: 10px;
    font-weight: 200;
    text-align: center;
    color: grey;
}
/* .footertext:before {
    content: "site by darren locke ";
}
.footertext:after {
    content: "2020";
} */
hr.line {
    opacity: 10%;
}


.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    z-index: 10;
    max-width: 100%;
  }
  
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    z-index: 10;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }