:root {
  --bg-color: #F5F5F5;
  --lgreen: rgba(2,204,168,1.0);
}

/* --- Media Queries for Screen sizes --- */
/* Common items for all mobile devices */
@media screen and (max-width: 1199.98px) {
    html {
        font-size: 12px; /* 1rem = 12px */
    }
    #pc {
        display: none;
    }
    #mobile {
        display: block;
    }

    body {
        background-color: var(--bg-color) !important;
        color: black !important;
    }

    /* TITLE and HEADINGS STYLING */
    .headings {
        border-bottom: solid 3px black;
        padding: 10vh 0 2vh 0;
    }
    #title{
        padding-top: 30vh !important;
        width: 85vw;
        color: white;
        height: 100vh;
    }
    #title-style {
        font-size: 5rem; !important;
    }
    #conf-dates {
        font-size: 2.5rem; !important;
    }
    .sub-title {
        display: inline-block; 
        color: var(--lgreen);
        transform: translateX(0%); 
        opacity: 1;
    }

    /* CAROUSEL STYLING */
    .carousel-inner{
        background-color: Black;
        height: 100vh;
    }
    .carousel-item {
        background-color: Black;
        height: 100vh;
    }
    .carousel-item img{
        opacity: 0.75;
    }
    .carousel{
        z-index: -1;
    }
    #carouselIndicators-mobile {
        font: 'Helvetica', arial, sans-serif;
        position : fixed;
        width: 100vw;
        height: 100vh !important;
    }

    /* NAVBAR STYLING */
    #iiser-logo img {
        height: 8vh;
    }
    #logo img {
        height: 8vh;
    }
    #bookmark {
        margin-left: 20px;
        transition: padding-top 0.5s ease;
        -webkit-transform: translate3d(0,0,0);
    }
    #mobile_logo {
        transition: opacity 1s ease;
    }
    #navbarToggleExternalContent {
        width: 100%;
        position: fixed;
        z-index: 2 !important;
        padding: 5px;
        transition: 0.5s;
        background: var(--lgreen) !important;
    }
    #navbarToggleExternalContent ul{
       justify-content: left;
    }
    .nav-item {
        color: white !important;
        font-family: "Janna", sans-serif;
        font-size: 1rem;
        text-decoration: none;
        display: inline-block;
        font-weight: bold;    
        text-align: center;
    }
    .nav-item a{
        font-size: 1.2rem;
        color: white !important;
        text-decoration: none;
    }
    .nav-item a:hover{
        color: white !important;
        font-weight: normal;
        text-decoration: underline;
    }
    .nav-item a:focus{
        color: white !important;
        text-decoration: underline;
    }
    .nav-item a:visited {
        color: white !important;
    }
    .nav-item a:active {
        color: white !important;
    }

    /* PROGRAM SECTION STYLING */
    .date{
        display: inline-block;
        font-size: 0.5em;
        border: 1px solid black;
        padding: 1%;
    }
    .tg {
        width: 80vw !important;
    }
    .tg td {
        font-size: 14px;
    }
    .tg th {
        font-size: 14px;
    }

    /* SPEAKERS SECTION STYLING */
    #speakers {
        height: 100vh;
    }

    /* OLD QFTA SECTION STYLING */
    #numbers_bg_mobile{
        height: auto;
        width: 100%;
        background-color: var(--bg-color);
    }
    #numbers_bg_mobile a{
        color: var(--lgreen);
    }
    #qfta19 {
        padding: 2vh 10vw 2vh 0;
        margin: 1vh 0 0 1vw;
        font-size: 5rem;
        width: 100vw;
        background-color: var(--bg-color);
        float: left;
    }
    #qfta20 {
        padding: 2vh 0 2vh 10vw;
        margin: 2vh 1vw 2vh 0;
        font-size: 5rem;
        width: 100vw;
        background-color: var(--bg-color);
        float: left;
    }

    /* ORGANIZERS SECTION STYLING */
    #advisors a{
        color: black;
    }

    /* REGISTER SECTION STYLING */
    #register {
        height: 100vh;
    }

    /* VENUE SECTION STYLING */
    #venue {
        background-color:var(--bg-color);
        color: black;
        /* background-color: var(--bg-color); */
        padding-bottom: 0vh;
    }

    /* FOOTER SECTION STYLING */
    #foot {
        color: white;
        padding-top: 3vh !important;
        background-color:var(--lgreen);
        text-decoration: none;
    }
}


/* Extra Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    /* Galaxy M21*/
    #title-style {
        font-size: 4.5rem;
        padding: 20px 0 20px 0;
        border-radius: 10px 100px 10px 50px;
        -moz-border-radius: 10px 100px 10px 50px;
        -webkit-border: 10px 100px 10px 50px;
    }
    #conf-dates{
        font-size: 3rem;
    }
}

/* Small devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Sample Device???*/
    #title-style {
        font-size: 6rem;
/*        background-color: rgba(255,0,0,0.15);*/
    }
    #conf-dates{
        font-size: 3rem;
    }
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* IPad Air 3 Portrait */
    #iiser-logo img {
        height: 7vh;
    }
    #logo img {
        height: 7vh;
    }
    #title-style {
        font-size: 6rem;
/*        background-color: rgba(255,0,0,0.15);*/
    }
    #conf-dates{
        font-size: 3rem;
    }
    #navbarToggleExternalContent ul{
       justify-content: center;
    }
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* IPad Air 3 Landscape */
    .carousel-item img{
        height: auto;
        width: 100%;
    }
    #title-style {
        font-size: 6rem;
/*        background-color: rgba(255,0,0,0.15);*/
    }
    #conf-dates{
        font-size: 3rem;
    }
    #navbarToggleExternalContent ul{
       justify-content: center;
    }
}

/* Extra Large devices (laptops/desktops, 1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* 1280x1024 Screens */
    html {
        font-size: 12px; /* 1rem = 12px */
    }
    .container {
        width: 70vw !important;
        margin-left: 15vw !important;
        margin-right: 10vw !important;
    }
    #social {
        position:fixed;
        width: 50%;
        margin-left: 50%;
        padding-right: 3.5vh;
        margin-top: 10vh;
    }
    .iiser-social{
        right: 0;
        margin-right: 5vh;
        margin-top: 2vh;
        width: 6vw;
    }
    #logo-black {
        width: 9vw;
    }
    #logo-white {
        width: 9vw;
    }

    .carousel-item img{
        height: 100%;
        width: auto;
    }

    #title-style {
        font-size: 6rem;
/*        background-color: rgba(255,0,0,0.15);*/
    }
    #conf-dates{
        font-size: 3rem;
    }
    #navbarToggleExternalContent ul{
       justify-content: center;
    }
    .nav-item {
        font-size: 1em;
        margin-top: 5px;
    }
    .nav-item a{
        font-size: 1.4rem;
    }
}

/* XXL devices (huge monitors, 1400px to 1599px) */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    /* No media query needed, this is the default */
}

/* XXXL devices (ultra-wide monitors, 1600px and up) */
@media (min-width: 1600px) {
    /* No media query needed, this is the default */
}