@font-face {
    font-family: 'Faith';
    font-style: normal;
    font-weight: 200;
    src: local('Faith'), url('/Fonts/faith.otf') format('woff');
 
}
@font-face {
    font-family: 'Ramona';
    font-style: normal;
    font-weight: 200;
    src: local('Ramona Bold'), url('/Fonts/ofont.ru_Ramona.ttf') format('woff');
 
}


@media only screen and (max-width: 600px) {
     *
    {
        
    margin: 0px;
    padding: 0px;
    font-size: 18px;    
    }
   
    body
    {
    margin: 0px;
    padding: 0px;
    
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    }

    header
    {
        
    position: relative;
    display: flex;
    width: 100%;
    height: 100px;
    font-family: 'Faith';
    
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
   justify-content: center;

   }
  
#telegram{
    
  
    
   
 text-decoration: none;
 color: white;
 width: 100%;
 height: 64px;
      display: flex;
    
     margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
 
 justify-content: center;
 
 
}
#telegramIco{
 margin-right: 5px;
display: block;
    width: 64px;
background: url(/Images/telegram.png);

 

    
  
  
   
}
#telegramText{
    margin-left: 5px;
  display: flex;
 margin-left: auto;
    margin-right: auto;
align-items: center;

 height: 64px;
  font-family: Ramona;


 
}
.description{
    margin: 0px;
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    padding-top: 0px;
    padding-bottom: 0px;
    
}
.animFrame{
    margin-top: 20px;
 background: linear-gradient(90deg, #e2632c,#fb4955,#ff3286,#fc39be,#d35bf8);
   max-width: 360px;
    height: 550px;
    border-radius: 45px;
     margin-left: auto;
    margin-right: auto;

    display: block;
   transform:scale(100%,100%);
   visibility: hidden;
}
#audioPlayer{
    
display: block;
margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 45px;
   padding-top: 20px;
    
}
#vibeText{
    text-align: center;
    color: white;
    display: flex;
    height: 10%;
    font-size: 22px;
    padding-top: 1%;
   font-family: Ramona;
  
   justify-content: center;
   align-items: center;
}
#vibeGif{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 340px;
    max-height: 360px;
    border-radius: 25px;

    margin-top: 5%;
}
#titleDiv
{
   
display: flex;

align-items: center;

}
#titleHead
{
    


   color: white;

      font-size: 32px;
}
.btnFrame{
 
     background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    height: 150px;
    display: flex;
    width: 100%;
   
 
     justify-content: center;
     align-items: center;
}
#btnRnd{
    height: 50%;
    width: 50%;
    display: block;
    font-size: 24px;
   border-radius: 15px;
   border: none;

background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
   font-family: Ramona;
   color: white;
   transition: all 0.3s;
}

#btnRnd:focus{
    animation: colorChange 1s infinite;
}
  
}
 @media only screen and (min-width: 600px){
    *
    {
        
    margin: 0px;
    padding: 0px;
    font-size: 24px;    
    }
   
    body
    {
    margin: 0px;
    padding: 0px;
    
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    }

    header
    {
        
    position: relative;
    display: flex;
    width: 100%;
    height: 100px;
    font-family: 'Faith';
    
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
   justify-content: center;

   }
  
#telegram{
    
  
    
   
 text-decoration: none;
 color: white;
 width: 256px;
 height: 64px;
      display: flex;
    
     margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
 
 justify-content: center;
 
 
}
#telegramIco{
 margin-right: 5px;
display: block;
    width: 64px;
background: url(/Images/telegram.png);

 

    
  
  
   
}
#telegramText{
    margin-left: 5px;
  display: flex;
 margin-left: auto;
    margin-right: auto;
align-items: center;

 height: 64px;
  font-family: Ramona;


 
}
.description{
    margin: 0px;
    background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    padding-top: 20px;
    padding-bottom: 60px;
    
}
.animFrame{
    margin-top: 20px;
 background: linear-gradient(90deg, #e2632c,#fb4955,#ff3286,#fc39be,#d35bf8);
   max-width: 500px;
    height: 550px;
    border-radius: 45px;
     margin-left: auto;
    margin-right: auto;

    display: block;
   transform:scale(100%,100%);
   visibility: hidden;
}
#audioPlayer{
    
display: block;
margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 45px;
   padding-top: 20px;
    
}
#vibeText{
    text-align: center;
    color: white;
    display: flex;
    height: 10%;
    font-size: 22px;
    padding-top: 1%;
   font-family: Ramona;
  
   justify-content: center;
   align-items: center;
}
#vibeGif{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
    max-height: 360px;
    border-radius: 25px;

    margin-top: 5%;
}
#titleDiv
{
   
display: flex;

align-items: center;

}
#titleHead
{
    


   color: white;

      font-size: 46px;
}
.btnFrame{
 
     background: #DE3D7C;
background: linear-gradient(90deg, rgba(222, 61, 124, 1) 0%, rgba(255, 66, 86, 1) 100%);
    height: 150px;
    display: flex;
    width: 100%;
   
 
     justify-content: center;
     align-items: center;
}
#btnRnd{
    height: 50%;
    width: 25%;
    display: block;
    font-size: 24px;
   border-radius: 15px;
   border: none;

background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
   font-family: Ramona;
   color: white;
   transition: all 0.3s;
}
#btnRnd:hover{
       width: 35%;
     height: 65%;
     font-size: 26px;
       transition: all 0.3s;
}
#btnRnd:focus{
    animation: colorChange 1s infinite;
}
}




@keyframes colorChange {
 0%{
background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
 }
  33%{
background: linear-gradient(90deg,rgba(252, 176, 69, 1) 0%, rgba(131, 58, 180, 1) 50%, rgba(253, 29, 29, 1) 100%);
  }
  66%{
background: linear-gradient(90deg,rgba(253, 29, 29, 1) 0%, rgba(252, 176, 69, 1) 50%, rgba(131, 58, 180, 1) 100%);
  }
  100%{
background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  }
}