/* 12 October 2023
/* RR adapted and simplified/modified from stylesheet at https://tejalwakchoure.github.io/, which has the basic elements I need (two columns, good text size on mobile)
/* # is an ID selector
/* . is a class selector


/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
/*# sourceMappingURL=bootstrap.min.css.map */
@charset "UTF-8";


/******************************/
/*                            */
/*  NEW CSS- NOV 2023         */
/*                            */
/******************************/
/* RR 11/5/23 trying to get the text below article thumbnails in portfolio index is aligned to the top */
.portfolio-section-desc {
    margin: 0; /* This removes any default margins on the paragraph tags */
    padding-top: 0;
}
.portfolio-article-desc {
    /* margin: 0;
    padding-top: 0; */
    margin-top: auto;
}




/******************************/
/*                            */
/*  GENERAL CSS               */
/*                            */
/******************************/
 html,body   
{
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    width: 100%;
    margin: 0px;    
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    font-weight: 400;
    line-height: 1.5;
    font-family: clarendon-urw, serif !important;
    color: #F4F7D9;
}


.btn {  
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: none;
}

.fa {
    font-size: 1.5em;
}

footer .fa {
    font-size: 1.5em;
}

footer .fa-envelope {
    font-size: 1.4em;
}

footer .col {
    text-align: center !important;
  }

.fa-linkedin {  
    background: transparent;
  }
.fa-github {    
    background: transparent; 
  }

.kill-on-large-devices {
    display: none !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    scrollbar-width: none;
}
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.body-with-bkg {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0D506D;
}

#body-container {
    -o-transition: background-color 1s ease;  /* Opera 10.50–12.00 */
    -moz-transition: background-color 1s ease;  /* Firefox 4-15 */
    -webkit-transition: background-color 1s ease;  /* Chrome 1-25, Safari 3.2+ */
    transition: background-color 1s ease;
    position: relative;
    
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}


.show-on-submit {
    display: none;
    color: #ffffff;
}

p, ul, ol { 
    font-size: 1.15rem;
}   

.small {   
    font-size: 1rem !important;
    font-weight: unset;  
}

.large {   
    font-size: 2rem;    
}

a {
    color: #E3AE50;
}

a:hover,    
a:focus,    
a:active,   
a.active {  
    outline: 0; 
    /* text-transform: none; */
    text-decoration: none;
    color: #E3AE50;
}   

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {    
    /* text-transform: uppercase;   */
    letter-spacing: 2px; 
    word-spacing: 2px;
    color: #F4F7D9; 
}

hr { 
    margin: 20px auto;
    padding: 0;
    max-width: 1.8rem;
    border: 0;
    border-top: 1px solid #F4F7D9; /*#393939*/
}

.img-centered { 
    margin: 0 auto; 
}
.transparent_back {
    background-color: transparent !important;
}

/* this sets the box-sizing property for every element on the webpage, dependent on browser versions. not sure if I need it */
*{      
    -moz-box-sizing: border-box; /* Firefox 1+ */
    -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
    box-sizing: border-box; 
}
/******************************/
/*                            */
/* SECTION                     */
/*                            */
/******************************/


section {   
    padding: 0 3vw 0 3vw;
    width: 100%;    
    display: grid;
    margin: 0;  
    color: #F4F7D9;
    align-content: space-between;
    grid-auto-rows: 1fr;
}   

section .container {    
    display: grid;  
    vertical-align: middle;   
}   




/******************************/
/*                            */
/* HEADER - only used now in homepage                    */
/*                            */
/******************************/
header {    
    height: 70vh;
    width: 100vw;
    padding-right: 0;
    padding-left: 6vw;
    margin: 0;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    flex-direction: row;
    background: #0D506D;
}

header picture {
    width: 100%;
}

header .img_div img {
    z-index: 0;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    margin-top: 0;
    max-width: none;
    width: 100%;
    max-height: 100%;
}

header .img_div .col {
    max-height: 100%;
}

header .img_div .row {
    max-height: calc(100vh / 3);
}

header .img_div .container {
    vertical-align: top;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
}

header .img_div {
    padding: 0;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; 
    align-items: center;
    max-width: 40%;
}

.header-title {
    /* for header parallax */
    width: 75%;
    position: relative;
    
    align-items: center;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;    
    /* font-style: italic; */
    color: #000000;
}

.header-intro-text {
    display: block; 
    text-align: left;
    width: 100%;
    /* text-transform: lowercase; */
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 0;
    font-weight: normal;
    line-height: 1.5;
    padding-left: 8%;
}

.header-intro-text .name {
    font-size: 7vw;
    font-weight: 700;     
    letter-spacing: 1px;
    
    font-size: min(7vw, 100px);
}   

.header-intro-text .skills {    
    font-size: 2.25vw;
    font-weight: 200; 
    letter-spacing: 0.5px;
    font-size: min(2.25vw, 30px);
}

.header-intro-text .toc {    
    font-size: 1.5vw;
    font-weight: 200; 
    letter-spacing: 0.5px;
    font-size: min(1.5vw, 24px);
}


/******************************/
/*                            */
/* ABOUT                    */
/*                            */
/******************************/
#about .hello {
    text-align: left;
    text-transform: none;
    letter-spacing: initial;
    word-spacing: initial;
    font-size: 3rem;
    /* color: #000000; */
}

#about .about-main-text {
    /*width: 60%;*/
    flex-basis: 65%;
    max-width: 1000px;
    min-width: 600px;
    margin: auto;
    color: #F4F7D9;
}
#about a {
    color: #E3AE50;
}

#about .timepass p {
    line-height: 1.4em;
}
#about .timepass .fa-parent {
    /*position: relative; */
    height: 6em;
    max-width: 12em;
    margin: 0 0 0.8em 0;
    display: flex;
    border-radius: 5px;
    vertical-align: middle;
    text-align: center;
    /*border: 2px solid #dcdcdc;*/
    box-shadow: 0px 0px 5px 0px #dcdcdc;
}
#about .timepass .fa {
    font-size: 3em;
    margin: auto;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 45%;*/
    /*transform: translate(-45%,0);*/
}

#about .container {
    padding: 0; 
    display: flex; 
    flex-direction: row;
}

#about .row {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; 
    flex-flow: row wrap;
}
#about .about-col,
#about .timepass .col {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}
#about .about-col {
    padding-top: 50px;
}
#about .about-img-col {
    flex-basis: 35%;
    width: 100%;
    text-align: center;
    padding-right: 2vw;
}
#about h3 {
    /* color: #000000; */
}
#about img {
    vertical-align: middle;
    /*width: 25vw;*/
    width: 100%;
    height: auto;
    object-fit: cover;
    /*-webkit-filter: grayscale(1) brightness(1.5);
    filter: grayscale(1) brightness(1.5);*/
    -webkit-filter: brightness(1.15);
    filter: brightness(1.15);
    border-radius: 5px;
}

/******************************/
/*                            */
/* PORTFOLIO                    */
/*                            */
/******************************/

#portfolio {
    padding: 0;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

#portfolio hr {
    width: 100%;
    max-width: 100%;
}

#portfolio .portfolio-link-wrapper
{
    position: relative; 
    /*overflow: hidden; */
    height: 100%; 
    width: 100%;
    /* visibility: hidden; */
    color: #393939;
}

#portfolio .portfolio-link-wrapper img {
    /*-webkit-filter: grayscale(1) contrast(1.1);
    filter: grayscale(1) contrast(1.1);*/
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    /*background: white;*/
    /*aspect-ratio: 1;*/
    margin: 2px;
}

#portfolio .portfolio-link-wrapper .grid-name {
    margin: 1.5rem 0 0.5rem 0; 
    font-size: 1.3rem;
    /* font-style: italic; */
    font-family: clarendon-urw, serif;
    /* font-family: Poppins, 'Source Sans Pro', Helvetica, sans-serif; */
    font-weight: 600;
    letter-spacing: 0.1px;
    text-transform: capitalize;
    color: #E3AE50; 
}


#portfolio .tagname,
#portfolio .portfolio-link-wrapper .grid-type {
    font-size: 1.1rem;
    margin: 0;
    color: #F4F7D9; 
    font-style: italic;
}

#portfolio .portfolio-link-wrapper:hover img {
    /*-webkit-filter: grayscale(1) contrast(1.1);
    filter: grayscale(1) contrast(1.1);*/
    border: 2px solid #393939;
    /*transition: all 200ms ease-in-out;*/
}

/******************************/
/*                            */
/* MASONRY (2 column layout for index                    */
/*                            */
/******************************/
.masonry-grid {
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    width: 100%;
    margin: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mt10 {
    margin-top: min(20vh, 300px);
}

.masonry-item {
    display: flex;
    flex-direction: column; /* adding this two lines enabled text to appear below (not beside) the photos */
    width: 500px;
    max-width: 500px;
    margin: 0;
    padding: 30px 25px;
    flex: 1 1 45%;
/*    adding this to align descriptive text to the top */
    /* align-items: flex-start; 
}

.arcadia-book-item {
    width: 285px;
    max-width: 285px;
    /* height: 411px;
    max-height: 411px;
    /* height: -moz-fit-content; */
    /* height: -webkit-fit-content;
    height: fit-content; */
    /* flex: 0 0 auto; */
    /* width: 50%; */
    
    /* height: 700px; */
    
    margin: 0;
    padding: 30px 25px;
    display: flex;
    flex: 1 1 45%;
}

.masonry-item img,
.masonry-item picture {
    width: 100%;
    height: 500px;
}

/******************************/
/*                            */
/*  INDEX PAGE ONLY           */
/*                            */
/******************************/
.heading,
.name,
.skills {
    font-family: clarendon-urw, serif !important;
    
}

.skills a {
    color: #E3AE50;
}

.toc {
    font-family: clarendon-urw, serif !important;
    
}

.toc a {
    color: #E3AE50;
}

.heading {
    font-size: 6.5rem;
    word-spacing: 2px;
    /* text-transform: lowercase; */
    color: #F4F7D9;
    
    /* font-style: italic; */
    font-weight: 600;
}

/******************************/
/*                            */
/* IMAGES and VIDEOS                    */
/*                            */
/******************************/
/* RR 10/15/23 added this myself */
/* first of each styles the container (as used for a div tag)
second styles images or videos within the container */

.image-container {
    max-width: calc(100vw - 20px);  /* Maximize image width */
    max-height: 100vh;  /* Ensures image height does not expand beyond screen height */
    width: auto;        /* By default, it takes the natural width of the image */
    height: auto;       /* By default, it takes the natural height of the image */
    display: block;     /* Prevents inline gaps */
    margin-right: auto;     /* Centers the image horizontally within the wrapper */
}

.image-container img {
    width: 100%;
    height: auto;
}

/* using this version in cps-near-south-side to center Chicago Community Area map and set max width to 600 */
.image-container2 {
    max-width: 600px;
    margin: 0 auto;
}

.video-container {
    position: relative;
    overflow: hidden; /* This might help in certain situations where children overflow. */
    padding-bottom: 56.25%; /* This is for a 16:9 ratio. */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video {
    width: 99%;
    height: auto;
    display: block; /* This ensures it takes the full width of its container */
    max-width: 100%; /* This ensures the video never exceeds its container's width */
}

/******************************/
/*                            */
/* TEXT ALIGNMENT             */
/*                            */
/******************************/
#work {
    scroll-behavior: smooth;
    flex: 1 0 auto;
    display: flex;
}

.row-content {
    margin-left: 10px;
    clear: both;
}

.row-lyric {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/******************************/
/*                            */
/* MEDIA QUERY                */
/*                            */
/******************************/
@media (min-width: 769px){
    #navbarContent {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    #navbarContent .navbar-toggler {
        display: none;
    }
}

@media ( max-width: 1023px ) {
    header {
        height: 60vh;
    }
    #about .outer-row {
        flex-flow: column;
        margin: auto;
    }
    #about .about-main-text {
        min-width: 0;
    }
    #about .about-col {
        margin: 10px !important;
    }
    #about img {
        margin: 10px 0;
        height: 250px;
        width: 40vw;
    }
    .masonry-grid {
        padding: 0 35px;
    }
    .masonry-item {
        /* height: 400px !important; */
        /* display: block; */
        /* display: flex;
        flex-direction: column; */
    }
    .masonry-item img,
    .masonry-item picture {
        height: 250px !important;
    }
    .masonry-grid {
        /* height: calc( 400px * 4 ); */
    }
    #work {
        padding-bottom: 0;
    }
    .mt10 {
        margin-top: min(16vh, 300px);
    }
}

/******************************/
/*                            */
/* MEDIA QUERY-medium devices  */
/*                            */
/******************************/
@media(max-width:768px) {
    .kill-on-small-devices {
        display: none !important;
    }
    .kill-on-large-devices {
        display: flex !important;
    }
    .heading {
        font-size: 5rem;
        font-weight: 500;
    }
    .heading-col {
        padding: 0;
    }
    p, ul, ol { 
        font-size: 1.1rem;
    }   
    .small {   
        font-size: 0.9rem !important;  
    }
    .large {   
        font-size: 1.5rem !important;
    }
    
    section {   
        padding: 6%;
        padding-top: 60px; /* Accounting for the navbar height = 53px */
        table-layout: fixed;
    }
    section.first { 
        padding-top: 75px;  
    }   
    section h2, #projectDetails h3 {    
        font-size: 2rem; 
    }
    section,
    .header-intro-text .skills,
    footer a {
        color: #F4F7D9 !important;
    }
    
    header {
        padding: 53px 5vw;
        justify-content: space-evenly;
    }
    
    .header-title {
        width: 100%;
        padding-left: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .header-intro-text {
        width: 100%;
    }
    
    #under_construction .header-intro-text .name, .header-intro-text .name { 
        font-size: 4rem;
        padding-bottom: 0.5rem;
    }   

    #about .about-col {
        padding: 0;
    }
    #about .hello {
        font-size: 2.5rem;
        padding-bottom: 0;
    }
    #about .timepass .col {
        flex-basis: 40%;
    }
    #about .container {
        flex-direction: column;
    }
    .masonry-item {
        /* height: 450px !important; */
        /* width: 80%; */
        flex: 1 1 100%;
    }
    /* .masonry-item:nth-child(n) {
        order: 1;
    } */
    .masonry-item img,
    .masonry-item picture {
        height: 400px !important;
    }
    .masonry-grid {
        height: -moz-fit-content;
        height: -webkit-fit-content;
        height: fit-content;
    }
    #about .about-col {
        flex-direction: column;
    }
    #about .about-img-col {
        width: auto;
        margin: 50px auto !important;
    }
    #about .row {
        width: 100%;
        margin: 0;
    }
    .navbar-nav {
        flex-direction: row !important;
        height: -moz-fit-content;
        height: -webkit-fit-content;
        height: fit-content;
        width: 100%;
        padding: 0;
        justify-content: flex-end;
        padding-top: 3px;
    }
    #navbarContent .page-scroll {
        /*padding: 0 20px;*/
        padding: 0 10px;
    }
    #navbarContent .text {
        letter-spacing: 0.5px;
        font-size: 0.95em;
    }
    .navbar-brand-scroll {
        width: 10%;
        padding-top: 0;
    }
    .navbar-brand {
        font-size: 2em;
    }
    #navbarContent {
        width: 100%;
        height: -moz-fit-content;
        height: -webkit-fit-content;
        height: fit-content;
        padding-left: 2em;
    }
    .transparent_back {
        background: #ffffff !important;
    }
}

/******************************/
/*                            */
/* MEDIA QUERY-small devices  */
/*                            */
/******************************/


@media (max-width: 480px) { 
    .heading {
        font-size: 3.125rem;
    }
    .header-intro-text {
        width: -moz-min-content;
        width: -webkit-min-content;
        width: min-content;
        margin: auto;
        width: 100%;
        padding-left: 0;
    }
    #under_construction .header-intro-text .name, .header-intro-text .name { 
        font-size: 3rem;
    }
    .header-intro-text .skills {    
        font-size: 1.25rem;
        font-weight: normal;
    }
    .header-intro-text .toc {    
        font-size: 1rem;
        font-weight: normal;
    }
    section {   
        padding: 2%;
    }
    #about img {
        height: 200px;
        width: 60vw;
    }
    #about .hello {
        font-size: 2rem;
    }
    .masonry-item {
        /* height: 550px !important; */
        width: 100%;
        max-width: 100%;
        padding: 0;
        padding-bottom: 60px;
    }
    
    .masonry-item img,
    .masonry-item picture {
        height: 250px !important;
    }
    footer .row {
        align-items: center;
        width: 100%;
        flex-direction: column;
    }
    footer .col-md {
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: fit-content;
        margin-bottom: 15px 0;
    }
    footer .fa {
        padding: 0 7px !important;
        font-size: 1.75em !important;
    }
    footer .fa-envelope {
        font-size: 1.6em !important;
    }
}



@-ms-viewport{  
    width: device-width;  
}