style.css

html, body {
    margin: 0vw;
    /* padding: 2vw; */
    background-color: #090909;
    /* background-image: linear-gradient(#9253A1,#F063A4); */
  }
  header{
    /* background-color: #def0ed; */
    background-repeat:repeat-x;
    background-size: cover;
    /* height: 15vh; */
    /* margin-bottom: 5%; */
    color: #F063A4;
    font-size: 100%;
  }
  
  header #index {
    height: 20vh; 
    /* margin-bottom: 10vh; */
  }
  
  p {
    margin-left: auto;
    margin-right: auto;
    /* padding: 1vw; */
    font-size:x-large;
    max-width: 90vw;;
  }
  
  div #intro {
    width: 95vw;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  
  li {
    font-size: xx-large;
  }
  
  
 h2 {
   text-align: center;
 }
  
  /* header img {
    opacity: 0.25;
  } */
 
  
  h1{
    font-family: Arial, Helvetica, sans-serif;
    padding: 2%;
    font-size: 300%;
    text-align: center;
    text-transform: uppercase;
    /* text-shadow: 2px 2px #0D1A44; */
    color: #FFFFFF;
  }
  
 
  canvas {
    display: block;
  }
  
  code {
    padding: 1vw;
    background-color: #4a9abd;
    color: black;
    /* max-width: 500px; */
  }
  
  div {
    margin: 1vh;
    padding: 1vw;
    color: #fff;
  }
  
  .tile {
    max-width: 200px;
  }
  
  .images {
    display: flex;
    flex-direction:row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1vh;
  }

  iframe {
    margin-top: 1vh;
    width: 90vw;
    margin-left: 1vw;
    /* margin-right: auto; */
  }
  
  a:link, a:visited {
    color:#361660;
    /* background-color: #fff; */
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }
  
  a:hover, a:active {
    color: #70327E;
    background-color: #fff;
  }
  
  /* Style the Image Used to Trigger the Modal */
  #myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  /*Hide nav bar for mobile devices*/
  nav .topNav {visibility:hidden  !important;}
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  /* The Overlay (background) */
  .overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    color: #ffffff;
    background-color: #0a1a32;
  
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 40px;
    color: #ffffff;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #5eb5fb;
    background-color: #ffffff;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }


  /* Dropdown Button */
.dropbtn {
  background-color: #70327E;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4a9abd;}
  /* .active{
      color: #black;
      background-color: #ffffff;
      opacity: 80%;
  }
   */
  
  /* a:hover #genLink {
      background-color: tranparent !important;
      color: #ffffff;
  } */
  #demo {
  
    margin-left: 2%;
    margin-right: 2%;
  }
  
  .flex-container {
    display:flex;
    flex-direction: column;
    /*flex-direction:column;*/
    height: 88vh;
    justify-content: space-between;
  }
  
  
  /* When the height of the screen is less than 450 pixels, change the font-size of
  the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }
  @media screen and (min-width: 600px) {
    #ham {display:none;}
    #about {visibility: visible !important;
            }
    #mobileAbout{
            max-height: 0px;
            visibility:hidden;
        }
    .topNav {
          display: inline-flex;
          /* justify-content:left; */
          width: 100%;
          text-align: left;
    }
  
    
     .topNav  a {
          visibility: visible;
          /* background-color: transparent; */
          color: #fff;
          /* color:#1ba1db; */
          font-weight:bold;
          font-size: 70%;
          text-align: center;
          width: 9%;
          padding: 2px;
          text-decoration: none;
          border: 4px solid #ffffff;
          border-radius: 4px;
          /* margin-top: 5%; */
          margin-left: 2%;
          margin-right:2%;
          }
          
      .topNav a:active {
              color: #210f38 !important;
              border: 4px solid #60fbff;
          }
      .topNav a:hover {
          color: #210f38;
          border: 4px solid #210f38;
      }
      .flex-container {
         flex-direction:row;
      }
     
  }
  
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
   Show the link that contains should open and close the topnav (.icon) */
  @media screen and (min-width: 600px) {
    .topnav a:not(:first-child) {display: flex;}
    .topnav a.icon {
      display: none;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
  This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (min-width: 780px) {
    .topnav.responsive a {
      float: none;
      display: flex;
    }
  }
  
  @media only screen and (min-width: 780px) {
    .flex-container {
      flex-direction:row;
  }
  #myImg:hover {opacity: 0.7;}
  }
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }