@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%;
  }
  /*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%;
  }
  #div {
    font-family: 'Calibri';
    color: rgb(207, 163, 234);
    text-align: center;
  }
  .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;
        }

  .header {
    background-color: rgb(31, 19, 43);
    padding-top: 1rem;
  }
#me_block{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#me {
  border: 2px solid white;
  display: block;
  margin: auto;
  width: 150px;
}