/* == LIGHT MODE == */
/* :root {
    --text-color: black;
    --background-color: #f3f3f3;
} */
/* == DARK MODE == */
/* @media (prefers-color-scheme: dark) {
    :root {
        --text-color: white;
        --background-color: #1b1b1b;
    }
    .main {
        text-shadow: 1px 1px 2px black;
    }
} */
:root {
        --text-color: white;
        --background-color: #1b1b1b;
    }
    .main {
        text-shadow: 1px 1px 2px black;
}
/* Fonts */
@font-face {
    font-family: 'Calibri Light';
    src: 
    url('assets/fonts/calibril.ttf') format('truetype'),
    url('assets/fonts/calibril.otf') format('opentype'),
    url('assets/fonts/calibril.svg') format('svg');   
}

/* == UNIVERSAL RULES == */
.body, body, main {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Calibri Light', Verdana, Tahoma, serif, sans-serif;
    font-weight: lighter;
}
.link { 
    font-size: 105%;
    text-decoration: underline;
    color: var(--text-color);
}
.link:hover {
    color: var(--text-color);
}
b {
    font-size: 105%;
    font-weight: bold;
}
#top { /* To push down top block of content */
    margin-top: 3em;
}
/* Hide Scrollbar */
html::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Transition Timer */
* {
	-webkit-transition-property: all;
	-webkit-transition-duration: .1s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
.bg { /* Asset and css from https://codepen.io/iceable/pen/yLBrZOd! */
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
    background-repeat: repeat;
    animation: bg-animation .2s infinite;
    opacity: .4;
    visibility: visible;
    z-index: -999;
}          
@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}
/* Courtesy of https://www.gradient-animator.com/! */
.bottomBar {
    background: linear-gradient(70deg, #ff4a00, #ff0075);
    background-size: 300% 300%;

    -webkit-animation: BottomBar 20s ease infinite;
    -moz-animation: BottomBar 20s ease infinite;
    -o-animation: BottomBar 20s ease infinite;
    animation: BottomBar 20s ease infinite;

    height: 20px;
    width: 100vw;
    position: static;
    margin-top: auto;
    bottom: 0px;
}
@-webkit-keyframes BottomBar {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-moz-keyframes BottomBar {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-o-keyframes BottomBar {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@keyframes BottomBar {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
/* End animation css! */

/* == LARGE SCREENS == */
/* Primary, Secondary, and Wide Sizes for content */
.primary {
    max-width: 600px;
    margin: 0 30px 0 20px;
}
.secondary {
    max-width: 82vw;
    margin: 0 30px 0 20px;
}

/* Custom Font Sizes */
.header { 
    font-size: 2.5em;
}
.big { 
    font-size: 1.7em;
}
.medium {
    font-size: 1.5em;
}
.small {
    font-size: 1.3em;
}
.paragraph {
    font-size: .8em;
}
.title {
    text-shadow: 1px 1px #ff0075;
}

/* Header and Navbar */
.bar {
    color: var(--text-color);
    margin-left: 20px;
    min-height: 5em;
    position: relative;
    display: flex;
    align-items: center;
    
}
header {
    margin-left: 7vw;
    z-index: 999;
}
.bar > .btn{
    background:rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    text-decoration:none;
    letter-spacing:2px;
    margin: 20px 2px;
    text-transform: uppercase;
    position: relative;
    color: var(--text-color);
    top: 20px;
    transition: .2s;
}
.bar > .btn:hover{
    border:none;
    background: rgba(0, 0, 0, 0.4);
    background: #fff;
    padding: 20px 20px;
    margin: 0px 2px;
    color: #1b1b1b;
}

/* Card Buttons */
.cardButtons {
    text-align: center;
}
.cardButtons > .btn {
    /* background: linear-gradient(70deg, #ff4a00, #ff0075); */
    margin: 0px 15px 10px;
}
/* Abstract Page Images */
.image {
    max-width: 600px;
    margin: 0px 0px 1em 20px;
    filter: drop-shadow(2px 2px 2px #00000054);
}

/* Works Page Tabs */

/* Style the tab */
.tab {
    margin-left: 12px;
    
}

/* Style the buttons that are used to open the tab content */
.tab > .tablinks {
    top: 0;
}
.tab button {
    

}


/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--text-color);
}

/* Style the tab content */
.tabcontent {
  display: none;
}




footer.footer {
    margin: 10px 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

table.table, th, td {
    color: var(--text-color);
    background-color: var(--background-color);
    filter: drop-shadow(2px 2px 2px #00000054);
    padding: 5px;
    font-size: .85em;
    border: 1px solid black;
    border-collapse: collapse;
}
table{}

.main { /* Content Alignment */
    margin: 2vw auto 3vw 7vw;
    background-color: transparent;
}

/* Project Card Rules */
.card { 
    color: black;
}
div.card-footer {
    padding: .5rem .75rem 0.1rem;
    text-align: center;
}
.projectCard {
    display: inline-block;
    margin-bottom: 15px;
}
#projectCardList {
    text-shadow: none;
    column-count: 3;
    max-width: 70vw;
    margin: 0 15px;
    column-gap: 15px;
}
/* Remove underline from href card links */
.projectCard:link { text-decoration: none; }
.projectCard:visited { text-decoration: none; }
.projectCard:hover { text-decoration: none; }
.projectCard:active { text-decoration: none; }

/* MEDIUM SCREENS */
@media only screen and (max-width: 1080px) {
    .bar { /* Navbar */
        height: 60px; 
    }
    .logo { /* Navigation Logo */
        margin: 5px 0 0 5px;
        max-width: 50px;
        max-height: 50px;
    }
    .main { /* Content Alignment */
        margin: 2em 8vw;
    }   
    /* Custom Font Sizes */
    .header { 
        font-size: 2.4em;
    }
    .big { 
        font-size: 1.9em;
    }
    .medium {
        font-size: 1.4em;
    }
    .small {
        font-size: 1.2em;
    }
    /* Primary and Secondary Sizes for content */
    .primary {
        max-width: 80vw;
        margin: 0 auto;
    }
    .secondary {
        max-width: 70vw;
        margin: 0 auto;
    }
    /* Project Card Rules */
    #projectCardList {
        columns: 2;
    }
    /* Abstract Page Images */
    .image {
        max-width: 500px;
    }
}
/* == SMALL SCREENS ==*/
@media only screen and (max-width: 750px) { 
    /* Main Block Margins */
    .main { /* Content Alignment */
        margin: 2em 5vw;
    }
    #top {
        margin-top: 2.5em;
    }
    /* Primary and Secondary Sizes for content */
    .primary {
        max-width: 80vw;
    }
    .secondary {
        max-width: 70vw;
    }
    /* Custom Font Sizes */
    .header { 
        font-size: 1.9em;
    }
    .big { 
        font-size: 1.6em;
    }
    .medium {
        font-size: 1.2em;
    }
    .small {
        font-size: .9em;
    }
    /* Project Card Rules */
    #projectCardList {
        columns: 1;
        max-width: 80vw;
        margin: 0 auto;
    }
    /* Abstract Page Images */
    .image {
        max-width: 350px;
    }

    /* Nav Bar */
    header {
        margin: 0;
    }
    .bar {
        text-align: center;
        margin: auto;
    }
    .bar > .btn{
        font-size: .9em;
        letter-spacing: 0px;
        padding: 10px 12px;
        margin: 15px 1px;
    }
    .bar > .btn:hover{
        padding: 15px 12px;
        margin: 0px 1px;
    }
}