/* only works on a minimum screen size of iphone 5/5s */
@media only screen and (max-width: 319px) {
  body {
    display: none;
  }
}

/* works on every modern smartphone size */
@media only screen and (min-width: 319), (max-width: 500px) {
  * {
    box-sizing: border-box;
  }
  body {
    background-image: linear-gradient(to right, #151516, #090a0a, #151617);
    color: white;
  }

  .flex-container {
    background-color: #333;
    border-radius: 20px;
    border: 5px solid white;
    color: white;
    text-shadow: 0 0 10px #396afc;
    margin: 20px;
    padding: 20px;
    font-size: xx-large;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden; /*keeping things from spilling out in smaller phones */
  }

  .myNiche ol {
    border: 2px solid #396afc;
    line-height: 20px;
    list-style-type: none;
  }

  h1 {
    color: white;
    font-size: 30px;
    text-shadow: 0 0 15px#396afc;
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  .languages {
    line-height: 2px;
    letter-spacing: 5px;
  }

  .flex-items img {
    max-width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    border: 4px solid #396afc;
  }

  .flex-items p {
    font-size: 48px;
  }

  .flex-items,
  a {
    position: relative;
    animation: me 2s 1 steps(100);
    color: white;
    font-family: monospace;
    text-decoration: none;
  }
  a {
    border-bottom: 2px solid #396afc;
  }

  @keyframes me {
    0% {
      left: calc(100% + 30px);
    }
    100% {
      left: 0;
    }
  }

  button {
    background-color: #396afc;
    border: 2px solid white;
    padding: 20px;
    font-size: 30px;
    font-family: fantasy;
  }
}

/* screen size of desktop and tablets */
@media only screen and (min-width: 501px) {
  * {
    box-sizing: border-box;
  }
  body {
    background-image: linear-gradient(to right, #151516, #090a0a, #151617);
    color: white;
  }

  .flex-container {
    background-color: #333;
    border-radius: 20px;
    border: 5px solid white;
    color: white;
    text-shadow: 0 0 10px #396afc;
    margin: 20px;
    padding: 20px;
    font-size: xx-large;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  h1 {
    color: white;
    font-size: 30px;
    text-shadow: 0 0 15px#396afc;
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  .languages {
    line-height: 2px;
    letter-spacing: 5px;
  }

  .flex-items img {
    max-width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    border: 4px solid #396afc;
  }

  span {
    text-decoration: underline;
    font-variant-caps: all-petite-caps;
  }
  /* hover effect on my name */
  span:hover {
    font-size: 100px;
    font-variant: small-caps;
    animation: KISHAN 0.1s infinite steps(60);
  }

  @keyframes KISHAN {
    100% {
      /* gives a flickering effect to my name */
      background-image: linear-gradient(to right, red, green, blue);
      color: white;
    }
  }

  .flex-items p {
    font-size: 48px;
  }

  .flex-items,
  a {
    position: relative;
    animation: me 2s 1 steps(100);
    color: white;
    font-family: monospace;
    text-decoration: none;
  }

  a:hover {
    background-color: #396afc;
  }

  a {
    border-bottom: 2px solid #396afc;
  }

  @keyframes me {
    0% {
      left: calc(100% + 30px);
    }
    100% {
      left: 0;
    }
  }

  button {
    background-color: #396afc;
    border: 2px solid white;
    padding: 30px;
    font-size: 30px;
    font-family: fantasy;
    animation: button 0.5s infinite steps(100);
  }

  @keyframes button {
    0% {
      transform: perspective(500px) translate3d(5px, 0, 0px);
      background-image: linear-gradient(to right, red, green, blue);
      color: white;
    }
  }
}