/* STYLING FOR LARGER DESKTOP SCREENS ******************************************/
/* @media only screen and (max-width: 8000px) { */

    /* YOU'RE MISSING THE END BRACKET ONCE YOU UNCOMMENT THIS MEDIA QUERY */
    * {
        font-family: 'Montserrat', sans-serif;
        color: rgb(51, 49, 49);
        scroll-behavior: smooth;
        /* border: 1px dotted red; */
    }

    .index_hero_image {
        background-image: url('../img/abstract-smooth-empty-grey-studio-well-use-as-background-business-report-digital-website-template-backdrop.jpg');
        height:100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
        position:relative;
    }
    
    /* .aws_hero_image {
        background-image: url('../img/aws_background.jpg');
        height:100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
        position:relative;
    } */

    html {
        width: 100vw;
        height: 100vh;
    }

    body {
        padding-top: .1px;
        width: 100vw;
        height: 100vh;
    }  

    header {
        display: block;
        position: fixed;
        height: 7vh;
        width: 100%;
        padding-top: 5px;
        z-index: 999;
        background: rgba(255,255,255,.98);
        box-shadow: 0px 0px 10px 0px rgba(5, 0, 71, 0.2);
    }

    .menu-container {
        display: grid;
        grid-template-columns: 40% 60%;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 100%;
        width: 100%;
        padding: 5px 5px 5px 5px;
    }

    .header_name, .item1 {
        display: inline;
        font-size: 3vw;
        height: 2vh;
        text-align: left;
        margin-left: 10px;
        
    }

    span {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        margin: 0px;
        padding: 0px;
    }

    span:nth-child(1) {
        animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }

    span:nth-child(2) {
        animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(3) {
        animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(4) {
        animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(5) {
        animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(6) {
        animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(7) {
        animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(8) {
        animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(9) {
        animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(10) {
        animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(11) {
        animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(12) {
        animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(13) {
        animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
        animation-delay: 100s;
      }
      
      span:nth-child(14) {
        animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(15) {
        animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      span:nth-child(16) {
        animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
        animation-delay: 2s;
      }

      .span2>p {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
        font-size: 3vw;
      }

      .span3>p {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
        font-size: 3vw;
      }

      .span4>p {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        animation: fade-in 0.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
        font-size: 3vw;
      }

      .span5>p {
        display: inline;
        opacity: 0;
        filter: blur(4px);
        animation: fade-in 0.8s 2.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
        font-size: 3vw;
      }
      
      @keyframes fade-in {
        100% {
          opacity: 1;
          filter: blur(0);
        }
      }

    .fixedLinks, .item2 {
        display: inline;
        font-size: 1.5vw;
        height: 10%;
        width: 100%;
        text-align: right;
        margin: 0%;
    }

    .nav_link {
        margin: 0% 2% 0% 2%;
        color: rgb(29, 65, 88);
    }
    .container {
        /* width: 100vw; */
        font-size: 1.5vw;
        max-width: auto;
        /* background-color: inherit; */
    }

    .page_intro, .item3{
        padding-top: 150px;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        max-width: auto;
    }

    .page_content, .item4{
        height: 100vh;
        width: 100%;
        grid-row-start: 2;
        grid-row-end: 3;
        padding-top: 50px;
        max-width: auto;
    }

    /* #git, #edu, #aboutme,#resume, #languages, #safe_beacon, #stack,  #baya, #onev, #pacman{
        font-size: 2em;
        font-weight: bold;
        color: rgb(21, 55, 247);
        text-align: center;
        height: 50%;
    } */


    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        text-decoration: none;
        color: black;
    }
    
    .collapsible_button {
        background-color: rgb(29, 65, 88);
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        margin-bottom: 10px;
        border: none;
        border-radius: 5px;
        text-align: left;
        outline: none;
        font-size: 2vw;
        z-index: 800;
    }

    .sticky_button >button {
      font-size:large;
      color: white;
      position:fixed;
      bottom:auto;
      margin: 120px 0px 0px 95%;
      height:auto;
      width:auto;
      border: none;
      box-shadow: 0px 2px 9px 0px gray;
      background:rgb(70, 117, 146)
      /* background: linear-gradient(orange,rgb(255, 204, 110),orange); */
      /* z-index: 100; */
    }


    .table-content {
        display: none;
        background-color: white;
        border: none;
        /* height: 100%; */
        width: 100%;
        margin-bottom: 10px;
        padding: 15px;
        box-shadow: 0px 5px 8px 0px gray;
    }   

    table {
        border: 1px solid gray;
        width: 100%;
        color: black;
        table-layout: auto;
    }

    th,td,tr {
        padding: 5px;
        text-align: left;
        vertical-align: top;
        border-bottom:1px solid rgba(214, 197, 197, 0.466);
        color: black;
        padding: 1%;
    }


    tr:hover {
        background-color: rgba(255, 255, 224, 0.034);
    }

    img {
        height: 100%;
        width: 100%;
        margin-bottom: 2%;
    }

    #funStat {
        display:flex;
        justify-content: center;
        position:absolute;
        bottom: 0;
        font-size:xx-small;        
    }
 
    #rating{
        display: grid;
        grid-row: 1;
        grid-column: 2;
        grid-template-columns: auto;
        grid-template-rows: 1em 1em;
        grid-auto-flow: column;
        justify-self: right;
        justify-items: center;
        width: 20%;
        padding: 0;
        grid-gap: 5px;
        
    }

    #ratingtext{
        grid-row: 1;
        /* grid-auto-flow: column; */
        grid-column: 1/3;
        /* text-align: center; */
    }



    ul, ol,li {
        list-style-type: circle;
        color: black;
        /* display: block; */
    }

    hr {
        background: white;
    }

    .projects-card{
        background-color: #0b132b;
        padding: 1%;
        width: 40%;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        box-shadow: 0px 5px 5px 0px rgb(1, 6, 15);
        margin: 1%;
        border: 1px solid black;
        min-height: 550px;
    }

    .projects-card:hover{
        background-color: #192a5f;
        position: relative;
        width: 40%;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        border: none;
        box-shadow: 5px 5px 20px rgb(6, 35, 88);
        margin: 1%;
    
    }

    /* .sectionHeader{
        font-size: 5em;
    } */

    .index_grid_container {
        display: grid;
        margin-top: 15%;
        justify-content: center;
        font-size: 3vw;
    }

    .iframeContainer{
        position: relative;
        overflow-y: hidden;
        overflow-x: hidden;
        padding-top: 56.25%;

    }

    .iframeContainer iframe{
        overflow-y: hidden;
        overflow-x: hidden;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 0;
    }
/* 
    .hoveraffect:hover {
        background-color: rgb(29, 65, 88);       
    } */