#circle1,#circle2,#circle3
  {
      height: 15px;
      width: 15px;
      background-color: white;
      border-radius: 50%;
      position: fixed;
      top: 5px;
      left: 5px;
      transform: translate(-50%, -50%);
      opacity: 0;
      pointer-events: none;
      transition: all .08s;
  }
  
  #circle2
  {
      height: 10px;
      width: 10px;
      background-color: #66FCF1;
      transition: all .15s;
  }
  
  #circle3
  {
      height: 5px;
      width: 5px;
      background-color: white;
      transition: all .2s;
  }
  
  
  
  body {
    margin: 0;
    width: 100%;
  }


  
  #main {
      background:  url(pics/fon.jpg) ; 
      font-family: 'Barlow', sans-serif;
margin:  0;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
  }
  
 .menu1 {
    position: absolute;
    z-index: 10;
display: flex;
width: 200px;
  
}

.menu2 {
    position: absolute;
    z-index: 10;
 display: flex;
top: 70px;
    writing-mode: vertical-lr; 
    transform: scale(-1);
}
.paragraphMenu{
    padding: 12px;
    margin: 12px;
    font-size: 25px;
    filter: drop-shadow( 1px 2px  #2fc7ff);
    font-weight: bolder;
}
 .redFont {
  color: red;
  filter: drop-shadow( 1px 2px  rgb(228, 217, 217));
 }
a {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
}

  
  .sp-container {
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100vh;
      z-index: 0;
      background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.3));
      background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.3));
      background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.3));
      background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.3));
  }
  
  .sp-content {
    display: flex;
    justify-content: center;
      position: absolute;
      width: 100%;
      height: 100vh;
      left: 0px;
      top: 0px;
      z-index: 1;
  }
  .sp-container h2 {
    
      position: absolute;
      top: 50%;
      line-height: 100px;
      height: 90px;
      margin-top: -50px;
      font-size: 46px;
      width: 70%;
      text-align: center;
      color: transparent;
      -webkit-animation: blurFadeInOut 1.5s ease-in backwards;
      -moz-animation: blurFadeInOut 1.5s ease-in backwards;
      -ms-animation: blurFadeInOut 1.5s ease-in backwards;
      animation: blurFadeInOut 1.5s ease-in backwards;
  }

  .sp-container h2.frame-1 {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      -ms-animation-delay: 0s;
      animation-delay: 0s;
  }
  .sp-container h2.frame-2 {
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      -ms-animation-delay: 1.5s;
      animation-delay: 1.5s;
  }
  .sp-container h2.frame-3 {
      -webkit-animation-delay: 3s;
      -moz-animation-delay: 3s;
      -ms-animation-delay: 3s;
      animation-delay: 3s;
  }
  .sp-container h2.frame-4 {

      -webkit-animation-delay: 4.5s;
      -moz-animation-delay: 4.5s;
      -ms-animation-delay: 4.5s;
      animation-delay: 4.5s;
  }
  .sp-container h2.frame-5 {
      -webkit-animation: none;
      -moz-animation: none;
      -ms-animation: none;
      animation: none;
      color: transparent;
      text-shadow: 0px 0px 1px #fff;
  }
  .sp-container h2.frame-5 .span1 {
      -webkit-animation: blurFadeIn 1s ease-in 6s backwards;
      -moz-animation: blurFadeIn 1s ease-in 6s backwards;
      -ms-animation: blurFadeIn 1s ease-in 6s backwards;
      animation: blurFadeIn 1s ease-in 6s backwards;
      color: transparent;
      text-shadow: 0px 0px 1px #fff;
  }
  .sp-container h2.frame-5 .span1:nth-child(2) {
      -webkit-animation-delay: 6.5s;
      -moz-animation-delay: 6.5s;
      -ms-animation-delay: 6.5s;
      animation-delay: 6.5s;
  }
  .sp-container h2.frame-5 .span1:nth-child(3) {
      -webkit-animation-delay: 7s;
      -moz-animation-delay: 7s;
      -ms-animation-delay: 7s;
      animation-delay: 7s;
  }
  
  
  @-webkit-keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -webkit-transform: scale(1.3);
      }
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -webkit-transform: scale(1);
      }
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          -webkit-transform: scale(0);
      }
  }
  @-webkit-keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -webkit-transform: scale(1.3);
      }
      50% {
          opacity: 0.5;
          text-shadow: 0px 0px 10px #fff;
          -webkit-transform: scale(1.1);
      }
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -webkit-transform: scale(1);
      }
  }
  @-webkit-keyframes fadeInBack {
      0% {
          opacity: 0;
          -webkit-transform: scale(0);
      }
      50% {
          opacity: 0.4;
          -webkit-transform: scale(2);
      }
      100% {
          opacity: 0.2;
          -webkit-transform: scale(5);
      }
  }
  @-webkit-keyframes fadeInRotate {
      0% {
          opacity: 0;
          -webkit-transform: scale(0) rotate(360deg);
      }
      100% {
          opacity: 1;
          -webkit-transform: scale(1) rotate(0deg);
      }
  }
  
  
  @-moz-keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -moz-transform: scale(1.3);
      }
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -moz-transform: scale(1);
      }
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          -moz-transform: scale(0);
      }
  }
  @-moz-keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          -moz-transform: scale(1.3);
      }
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          -moz-transform: scale(1);
      }
  }
  @-moz-keyframes fadeInBack {
      0% {
          opacity: 0;
          -moz-transform: scale(0);
      }
      50% {
          opacity: 0.4;
          -moz-transform: scale(2);
      }
      100% {
          opacity: 0.2;
          -moz-transform: scale(5);
      }
  }
  @-moz-keyframes fadeInRotate {
      0% {
          opacity: 0;
          -moz-transform: scale(0) rotate(360deg);
      }
      100% {
          opacity: 1;
          -moz-transform: scale(1) rotate(0deg);
      }
  }
  
  
  @keyframes blurFadeInOut {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          transform: scale(1.3);
      }
      20%, 75% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          transform: scale(1);
      }
      100% {
          opacity: 0;
          text-shadow: 0px 0px 50px #fff;
          transform: scale(0);
      }
  }
  @keyframes blurFadeIn {
      0% {
          opacity: 0;
          text-shadow: 0px 0px 40px #fff;
          transform: scale(1.3);
      }
      50% {
          opacity: 0.5;
          text-shadow: 0px 0px 10px #fff;
          transform: scale(1.1);
      }
      100% {
          opacity: 1;
          text-shadow: 0px 0px 1px #fff;
          transform: scale(1);
      }
  }
  @keyframes fadeInBack {
      0% {
          opacity: 0;
          transform: scale(0);
      }
      50% {
          opacity: 0.4;
          transform: scale(2);
      }
      100% {
          opacity: 0.2;
          transform: scale(5);
      }
  }
  @keyframes fadeInRotate {
      0% {
          opacity: 0;
          transform: scale(0) rotate(360deg);
      }
      100% {
          opacity: 1;
          transform: scale(1) rotate(0deg);
      }
  }
  .everyDay {
    display: flex;
    flex-direction: column;
  }
  
  
  
  
  
  
  
  
  
  
  .png {
    display: flex;
  justify-content: center;
  }
  .picPng {
  position: absolute;
  z-index: 10;
  filter: drop-shadow(2px 2px 8px  #2fc7ff);
  width: 380px;
  margin-top: 50px;
  
  }
  .picPng:hover {
  filter: drop-shadow(2px 2px 8px  rgb(228, 217, 217));
  }
  .iconLocation {
    display: flex;
    justify-content: center;
  }
  .iconList {
  position: absolute;
  z-index: 10;
  bottom: 40px;
  }

  .icon {
   background-color:#2fc7ff;
  border-radius: 100%;
  padding: 5px;
  margin: 10px;
  filter: drop-shadow( 1px 2px  rgb(228, 217, 217));
  width: 35px;
  }
  .icon:hover {
  background-color: beige;
  }

h1 {
    font-size: 100px;
    margin: 0;
}
















@media all  and (max-width: 950px)  {
    .picPng {
        margin-top: 170px;
   }
}

  
  @media all  and (max-width: 820px) {
    .paragraphMenu{
        padding: 10px;
        margin: 10px;

    }
    .picPng {
         margin-top: 120px;
    }
    .sp-container h2 {
        font-size: 53px;
      }
  }
   
  @media all  and (max-width: 770px) {
    .sp-container h2 {
        font-size: 40px;
    }
      
  }

  @media screen and (max-width:600px) {
    .picPng {
        margin-top: 100px;
   }
  }
  
  
  @media screen and (max-width: 540px) {
    .picPng {
        margin-top: 80px;
        width: 350px;
   }
   .sp-container h2 {
    font-size: 35px;
}
.sp-container h2.frame-4 {
    font-size: 40px;
 }
 .icon {

    width: 40px;
 }
  }
  
 
  
  
  @media all  and (max-width: 440px)  {
    .paragraphMenu{
        padding: 8px;
        margin: 8px;
        font-size: 23px;
    }
    .picPng {
        margin-top: 100px;
        width: 300px;

   }
   .sp-container h2 {
    font-size: 25px;
}
.sp-container h2.frame-4 {
    font-size: 30px;
 }
  }

  @media all  and (max-width: 375px) {
    .picPng {
        width: 250px ;
    
  }
  .paragraphMenu{
    padding: 7px;
    margin: 10px;
    font-size: 20px;
}

.icon {
   width: 30px;
   }
   .sp-container h2 {
    font-size: 20px;
  }
  }
  @media all  and (max-width: 320px) {
    .paragraphMenu{
      margin: 7px;
      font-size: 18px;
  }
  }
  

   
  @media screen and (max-width: 280px) {
    .picPng {
      width: 240px;
      height: 240px;
    }
  
    .sp-container h2 {
      font-size: 17px;
    }
    .sp-container h2.frame-4 {
        font-size: 20px;
     }
     .paragraphMenu{

      font-size: 15px;
  }
  }