@media only screen and (min-width: 768px) { 
    /**media query**/
    }
  i {
    color:rgb(44, 74, 119);
    size: 30%;
    font-family: 'myFirstFont';
    margin-left: 8%;
    margin-right: 4%;
    }
  /* iframe{
      margin-left: 10%;
      height: 20;
      width: 30;
    } */

    @font-face {
        font-family: myFirstFont;
        src: url(RubikIso-Regular.ttf);
    }
  /*headings*/
  /* h1 {
    text-align: center;
    color: rgb(70, 104, 133);
    font-family: 'Impact';
    font-size: 350%;
  } */
  h2 {
    text-align: center;
    color: rgb(54, 115, 158);
    font-family: 'Calibri';
    font-size: 250%;
  }
  h3 {
    text-align: center;
    color: rgb(71, 141, 177);
    font-family: 'Calibri';
    font-size: 150%;
  }
  h4 {
    text-align: center;
    color: rgb(86, 184, 201);
    font-family: 'Calibri';
    font-size: 115%;
  }
  h5 {
    text-align: center;
    color:rgb(44, 74, 119);
    font-family: 'Calibri';
    font-size: 100%;
  }
  /*text*/
  p {
    font-family: 'Calibri';
    color: rgb(207, 163, 234);
    margin-left: 2%;
    margin-right: 2%;
  }

/*ID's*/
  #Header2 {
    color: aliceblue;
  }
  #lis {
    font-family: Courier;
    font-weight: bold;
  }
  #about_me {
    text-align: center;
    margin-left: 7%;
    margin-right: 7%;
  }
  #sharkiframe {
    margin-right: 10%;
    height: 200%;
    width: 65%;
  }
  #div {
    font-family: 'Calibri';
    color: rgb(207, 163, 234);
    text-align: center;
  }
  .contactBox {
    margin-top: 50px;
    font-family: 'Calibri';
    color: rgb(131, 36, 189);
    background-color: rgb(255, 242, 225);
    padding: 1.27%;
    width: 55%;
    outline-style: solid;
    border-radius: 40px;
    /* outline-style: dashed; */
    outline-width:.2cap;
    outline-color: rgb(207, 163, 234);
    align-content: center;
    text-align: center;
  }
  #Game1 {
    width: 6%;
    margin-left: 1%;
    margin-right: 1%;
  }

/*Class Selectors*/
  /*images*/
  .artImages {
    margin-left: 2%;
    margin-top: 1.5%;
    width: 30%; 
  }
  .artImages2 {
    margin-left: 2%;
    margin-top: 1.5%;
    width: 47%; 
  }
  .artImagesSaber {
    margin-left: 2%;
    margin-top: 1.5%;
    width: 20%; 
  }
  .comicArtsFest {
    margin-left: 25%;
    margin-top: 1.5%;
    width: 50%; 
  }
  .magicalHorns {
    margin-left: 30%;
    margin-right: 10%;
    min-width: 10%;
    max-width: 40%;
  }
  .mySkills {
    margin-left: 1%;
    width: 10%;
  }
  .media1 { 
    color:aqua;
    font-family: monospace;
    font-size: 200%;
    font-weight: 2500;
  }
  .media2 { 
    color: rgb(77, 126, 85);
    font-family: Garamond;
    font-size: 200%;
    font-weight: 2500;
  }
  .media3 { 
    color: rgb(255, 136, 0);
    font-family: 'Franklin Gothic Medium';
    font-size: 200%;
    font-weight: 2500;
  }

  /*animations*/
    .spin:hover{
            animation: rotation 6s linear infinite;
    }
    .rotate {
            animation: rotation 6s linear infinite;
        }
        @keyframes rotation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(359deg);
            }
        }
    .rotate:hover {
            animation: rotation .5s linear infinite;
        }