/*custom fonts*/
@font-face {
    font-family: 'silkscreen';
    src: url('../fonts/slkscre-webfont.woff');
}

@font-face {
    font-family: 'silkscreenbold';
    src: url('../fonts/slkscreb-webfont.woff');
}

@font-face {
    font-family: 'madisonsq';
    src: url('../fonts/madisonsq-webfont.woff');
}

@font-face {
    font-family: 'carbontype';
    src: url('../fonts/carbontype-webfont.woff');
}

@font-face {
    font-family: 'caviar';
    src: url('../fonts/CaviarDreams-webfont.woff');
}

/*styling here will apply to the body of the page */
html {
    scroll-behavior:smooth;
}


body {
    font-family:caviar;
    

    background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

background-attachment: fixed;


}

/*styling for main HTML tag sections. Organized in the order they appear on the HTML page (header to footer)*/
nav a, section a {
    color:#e0b974;
}

nav a:hover, section a:hover {
    color:#ffffff;
    text-decoration:none;
}



.bignav-container {
    display:flex;
    width:80%;
    margin:auto;
}

    .bignav-container > a {
        width: 48%;
        margin: 5px;
        font-size: 100px;
        color: #ffffff;
        border: 5px solid #ffffff;
        border-radius: 10px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        text-decoration: none;
    }

    

    .bignav-container > a:hover {
        color: #9b9b9b;
        border: 5px #9b9b9b solid;
    }

       

    .bignav-container > i {
        padding-top:10px;
    }


    .bignav-text {
        font-size:1.5rem;
        font-weight:bolder;
    }

.bignav-container a:nth-child(1) {
    background-color: #552929;
}

.bignav-container a:nth-child(2) {
    background-color: #854c26;
}

.bignav-container a:nth-child(3) {
    background-color: #485746;
}

.bignav-container a:nth-child(4) {
    background-color: #2d3757;
}

header {
    height: 300px;
    width: 100%;
    background-color: #e17e1c;
    background-image: url('../images/header03a.png');
    background-position:left;
    background-size:cover;
    /*background-repeat:repeat-x;*/
    background-repeat:no-repeat;
    padding-left:5px;
    overflow-y:hidden;
    

}

h1 {
    font-family:madisonsq;
    font-size:4.5em;
    top:10px;
    
    
    
}

/*e7e6f7,e3d0d8,aea3b0,827081,c6d2ed*/

nav {
    margin-bottom: 40px;
    background-color:#000000;
    color:#ffffff;
    font-family: silkscreen;
    text-align:center;
    font-size:1.5em;
    padding-top:5px;
    padding-bottom:5px;
    position:sticky;
    top:0px;
}



section {
    
    margin-bottom: 40px;
    padding-left: 5px;
    
}

h2 {
    font-family:carbontype;
    font-size:3em;
    color:#000000;
    padding:8px;

}

[class*="hmod"] {
    border: 1px solid #282828;
    border-bottom-left-radius:20px;
    border-top-right-radius: 20px;
    margin-bottom:5px;
    background-repeat:repeat-x;
    background-position:center;
}

.hmod01 {
    background-image: url('../images/bg01.png');
    color: #552929;
}

.hmod02 {
    background-image: url('../images/bg02.png');
    color: #854c26;
}

.hmod03 {
    background-image:url('../images/bg03.png');
}

.hmod04 {
    background-image: url('../images/bg04.png');
    color: #485746;
}

.hmod05 {
    background-image: url('../images/bg05.png');
    color: #2d3757;
}

.hmod06 {
    background-image:url('../images/bg06.png');
}

section {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    color:#ffffff;
    padding-left:5px;
    padding-bottom:5px;
    border-radius:10px;
}

.radio_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 75%;
    margin: auto;
    /*background-color: #6f3e1e;*/
    padding: 10px;
}

.radio_grid > div iframe {
    display: block;
    margin: auto;
}

.display-grid {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    width:80%;
    margin:auto;
    grid-row-gap: 10px;
    grid-column-gap: 5px;
}

    .display-grid > div:nth-child(odd) {
        width: 100px;
        height: 97px;
        background-position: center center;
        background-size: cover;
    }


    

    .piclist1 > div:nth-child(even) {
        background-color: #502020;
    }

table.piclist {
    display:block;
    width:80%;
    margin:auto;
}

    table.piclist1 tbody tr td {
        border-bottom: #552929 solid 5px;
    }

table.piclist2 tbody tr td {
    border-bottom: #854c26 solid 5px;
}

table.piclist3 tbody tr td {
    border-bottom: #485746 solid 5px;
}

table.piclist4 tbody tr td {
    border-bottom: #2d3757 solid 5px;
}

table.piclist tbody tr td:nth-child(odd) {
    width:100px;
    height:100px;
    background-position:center center;
    background-size:cover;
}

.pic1 {
    background-image: url("../images/web01_roth.jpg");
}

    .pic2 {
        background-image: url("../images/web02_pippin.jpg");
    }

    .pic3 {
        background-image:url("../images/web03_barradas.jpg");
    }

    .pic4 {
        background-image:url("../images/web04_krupp.jpg");
    }

    .pic5 {
        background-image:url("../images/js01_roth.jpg");
    }

    .pic6 {
        background-image:url("../images/js02_pippin.jpg");
    }

    .pic7 {
        background-image:url("../images/js03_barradas.jpg");
    }

.pic8 {
    background-image: url("../images/mediawrite01_mentalhealth.jpg");
}

.pic9 {
    background-image:url("../images/mediawrite02_media.jpg");
}

.pic10 {
    background-image:url("../images/mediawrite03_edu.jpg");
}

.pic11 {
    background-image:url("../images/mediawrite04_race.jpg");
}

.pic12 {
    background-image: url("../images/blog01_3percent.jpg");
}

.pic13 {
    background-image: url("../images/blog02_advitam.jpg");
}

.pic14 {
    background-image: url("../images/blog03_btu.jpg");
}

.pic15 {
    background-image: url("../images/blog04_biohack.jpg");
}

.pic16 {
    background-image: url("../images/blog05_bletchley.jpg");
}

.pic17 {
    background-image: url("../images/blog06_humans.jpg");
}

.pic18 {
    background-image: url("../images/blog07_omni.jpg");
}

.pic19 {
    background-image: url("../images/blog08_osmosis.jpg");
}

.pic20 {
    background-image: url("../images/blog09_orphan.jpg");
}

.pic21 {
    background-image: url("../images/blog10_yaw.jpg");
}

.pic22 {
    background-image: url("../images/video01_speedrun.jpg");
}

.pic23 {
    background-image: url("../images/video02_filter.jpg");
}

.pic24 {
    background-image: url("../images/video03_bodyimage.jpg");
}

.pic25 {
    background-image: url("../images/video04_phones.jpg");
}

.pic26 {
    background-image: url("../images/video05_surveillance.jpg");
}

.pic27 {
    background-image: url("../images/video06_vr.jpg");
}

.pic28 {
    background-image:url("../images/portfolio01_roth.jpg");
}

.pic29 {
    background-image:url("../images/riiimemes.jpg");
}

.pic30 {
    background-image: url('../images/mediawrite00_full.jpg');
}

.pic31 {
    background-image: url('../images/tlcpl-lourdes-dms.jpg');
}

.pic32 {
    background-image:url('../images/portfolio02_barrera.jpg');
}

.pic33 {
    background-image:url('../images/dms300f21exhibit.jpg');
}

.pic44 {
    background-image: url('../images/web05_pallottini.jpg');
}

.pic45 {
    background-image: url('../images/js04_pallottini.jpg');
}

.pic46 {
    background-image: url('../images/mediawrite05_climate.jpg');
}

.pic47 {
    background-image: url('../images/mediawrite06_mental.jpg');
}

.pic48 {
    background-image: url('../images/mediawrite07_economics.jpg');
}

.pic49 {
    background-image: url('../images/portfolio03_pippin.jpg');
}

    table.piclist tbody tr td:nth-child(even) {
       
        font-size:1.5rem;
        padding-left:5px;
        padding-bottom:10px;
    }

table.piclist1 tbody tr td:nth-child(even) {
    background-color: #502020;
    
}

table.piclist2 tbody tr td:nth-child(even) {
    background-color: #6f3e1e;
    width:88%;
}

table.piclist3 tbody tr td:nth-child(even) {
    background-color: #3b4939;
    width:88%;
}

table.piclist4 tbody tr td:nth-child(even) {
    background-color: #262f4c;
    width:88%;
}

p, ul, ol {
    font-size:1.5em;
}

h3, h4 {
           font-family:silkscreenbold;
                    
       }

h3 {
    font-size:2em;
}

h4 {
    font-size:1.5em;
    
}

h5 {
    font-size:1.1em;
    font-family:silkscreen;
}

article.mod01 section {
    background-color:#552929;
}

article.mod02 section {
    background-color:#854c26;
}

article.mod03 section {
    background-color:#9c793b;

}

article.mod03 section a {
    color:#282828;
}

article.mod03 section a:hover {
    text-decoration:none;
    color:#5b3f2c;
}

article.mod04 section {
    background-color:#485746;
}

article.mod05 section {
    background-color:#2d3757;
}

article.mod06 section {
    background-color:#3e2e4e;
}

iframe {
    display:block;
}

.centerit {
    margin: auto;
    text-align: center;
}

.indent {
    padding-left:40px;
}

[id*="assess"] ol li  {
    list-style-type:none;
}




.topnav {
    display:inline-block;
    position:fixed; /*keep the button on the page all the time*/
    bottom:10px;
    right:10px;
    color:rgba(209, 205, 190, 0.82); /*last number is the transparency index*/
    text-align:center;
    z-index: 10;
}

.endsection:after {
    display: block; 
  content: " "; 
  height: 800px; 
  visibility: hidden; 
}

.spacer:before {
    display:block;
    content:" ";
    height:40px;
    visibility:hidden;
}

footer {
    background-color:#808080;
    color: #d4d4d4;
    text-align:center;
    border: 1px solid rgba(132, 108, 91, 0.80);
    border-top-left-radius:10px; 
    border-bottom-right-radius:10px;
}

@media screen and (max-width: 800px) {
    .radio-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 80%;
    }
}