@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

 @media screen and (max-width: 793px){
body{display:flex;flex-direction:column}
#imagewrap{order:-2}
.picgrid{order:-1}
#content-inner-venue iframe{width:100%}
}



     body {
        background-color: #000000;
        color: #33FF00;
        font-family: 'Inconsolata', monospace;
         /*font-size:4vw;*/
         font-size: large;
      }

      .info {
        /*border: 1px solid #33FF00;*/
        padding: 200px;
        margin: 5px;
        font-size:3vw;

        width: auto;
        height: fit-content;
        /*animation: 1ms breathe infinite alternate;*/
      }

      ul {
        list-style-type: none;
          font-size: 4rem;
          /*background-image: url('/static/hack.gif');*/
          /*opacity: 30%;*/
      }


      .hacker_ul{
          list-style-type: none;
          background-image: url('/static/hack.gif');
          opacity: 60%;
          font-size: 4rem;
          /*width: 100px;*/
      }

      .education_await{
        border: 1px solid white;
        padding: 10px;
        /*padding-top: 100px;*/
        margin-top: 300px;
        width: 200px;
        height: 200px;
        animation: 1s breathe infinite alternate;
        background-image: url('/static/nerd.gif');
        opacity: 60%;
        color: blue;
        scale: 200%;
          /*font-size:8vw;*/
      }

      .education {
        border: 1px solid blue;
        padding: 10px;
        margin: 5px;
        color: #FFFFFF;
        /*animation: 1s breathe infinite alternate;*/
      }

      .links_ul{
          list-style-type: disc;
          font-size: 6vw;
          width: 100%;
      }

      li {
        padding: 5px;
        /*border: white;*/
      }

      .topnav a {
          float: left;
          display: block;
          color: green;
          text-align: center;
          /*border: 500px;*/
          padding: 1rem 2rem;
          text-decoration: none;
          font-size: 2rem;
          border-bottom: 3px solid transparent;
          /*line-break: anywhere;*/
        }

      .topnav a:hover {
          border-bottom: 3px solid red;
        }

        .topnav a.active {
          border-bottom: 3px solid red;
        }


      body {
        background-color: #000000;
        color: #33FF00;
        font-family: 'Inconsolata', monospace;
          /*font-size:4vw;*/
      }

      nav {
        display: flex;
        border: blue;
        background-color: #000000;
        padding: 20px;
        justify-content: space-around;
        align-items: center;
          font-size:4vw;
        /*animation: 10s breathe infinite alternate;*/
      }

      a {
        color: #33FF00;
        text-decoration: none;
      }

      a:hover {
        color: #FFD700;
      }

      @keyframes breathe {
        0% { background-color: #000000; }
        100% { background-color: #006600; }
      }
      /*@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');*/

      body {
        background-color: #000000;
        color: #33FF00;
        font-family: 'Inconsolata', monospace;
          /*font-size:4vw;*/
      }

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: hidden;
        padding-left:16px;
        /*font-size: ;*/
        clear:both;
          /*font-size: xxx-large;*/
      /*font-size:4vw;*/
      }

      .job_await {
        border: 1px solid red;
        padding: 10px;
        margin: 5px;
        animation: 500ms jobbreathe infinite alternate;
        scale: 200%;
      }

      .activity_await {
        border: 1px solid #33FF00;
        padding: 10px;
        margin: 5px;
        animation: 1s breathe infinite alternate;
        scale: 200%;
          /*font-size:8vw;*/
      }

      .links_await {
        border: 1px solid darkmagenta;
        padding: 10px;
        margin: 5px;
        animation: 250ms linksbreathe infinite alternate;
        scale: 200%;
          /*font-size:8vw;*/
      }

      .activity {
        border: 1px solid #33FF00;
        padding: 10px;
        margin: 5px;
        /*animation: 1s breathe infinite alternate;*/
      }

      /*@media (min-width: 600px) {*/
      /*      .activity { grid-template-columns: repeat(2, 1fr); }*/
      /*  }*/

      .job {
        border: 1px solid red;
        padding: 10px;
        margin: 5px;
        /*animation: 1s breathe infinite alternate;*/
      }
      .about {
        border: 3px solid darkblue;
        padding: 10px;
        margin: 5px;
        /*animation: 1s breathe infinite alternate;*/
      }

    .activity h1, .activity h2, .activity p {
        margin: 10px 0;
        /*font-size: 8rem;*/
    }

    .activity h1 {
        font-size: 2rem;
        color: #FFD700;
    }

    .activity h2 {
        font-size: 1.5rem;
        color: #FFFFFF;
    }

    .activity p {
        font-size: 1rem;
        color: #999999;
    }

    .job h1 {
        font-size: 2rem;
        color: #FFD700;
    }

    .job h2 {
        font-size: 1.5rem;
        color: #FFFFFF;
    }

    .job p {
        font-size: 1rem;
        color: #999999;
    }

    .education h1 {
        font-size: 2rem;
        color: #FFD700;
    }

    .education h2 {
        font-size: 1.5rem;
        color: #FFFFFF;
    }

    .education p {
        font-size: 1rem;
        color: #999999;
    }

    @media (max-width:1280px) {
    .activity h1 {
        font-size: 4rem;
        color: #FFD700;
    }

    .activity h2 {
        font-size: 3rem;
        color: #FFFFFF;
    }

    .activity p {
        font-size: 2rem;
        color: #999999;
    }

    .job h1 {
        font-size: 4rem;
        color: #FFD700;
    }

    .job h2 {
        font-size: 3rem;
        color: #FFFFFF;
    }

    .job p {
        font-size: 2rem;
        color: #999999;
    }

    .education h1 {
        font-size: 4rem;
        color: #FFD700;
    }

    .education h2 {
        font-size: 3rem;
        color: #FFFFFF;
    }

    .education p {
        font-size: 2rem;
        color: #999999;
    }
}

    .blink {
      animation: 1s blink infinite alternate;
    }
      .grid-container {
      /*display: grid;*/

          width: 100%;
          height: 100%;
          margin-top: 10%;
          display: grid;
          gap: 1rem;
          align-content: start;
          justify-content: flex-end;
          grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
          /*font-size:4vw;*/

    }

      @keyframes breathe {
        0% { background-color: #000000; }
        100% { background-color: #006600; }
      }

      @keyframes jobbreathe {
        0% { background-color: #000000; }
        100% { background-color: lightcoral; }
      }

      @keyframes linksbreathe {
        0% { background-color: #000000; }
        100% { background-color: darkviolet; }
      }

      @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
      }