body{

  background-image: linear-gradient(to left, #F2B655);
     display: flex;
     align-items: center;
     justify-content: center; 
     height: 100vh;
     width: 100%;
     
    }
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
      width: 400px;
      height: 400px;
      box-shadow: 3px 3px 400px 30px red;  
      position: relative;
      margin-top: 50%;
      margin-bottom: 50%;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
}
.logo{
      
        width: 400px;
    height: 400px;
    background:no-repeat url(1757094345221.png)  center ;
    background-size: cover;
    border-radius: 50%;
    z-index: 2;
    position: relative; 
}

.information{
    transition-duration: 1s;
     height: 0;
     width: 0;
     border-radius: 50%;
    border-radius: 10px;
    background-color: red;
    position: relative;
    bottom: 400px;
         right: 100px;

        transition: width 0.5s ease-in-out ;
    
}
.image{
  position: relative;
  bottom: 20px;
           right: 100px;


}
.word{
     height: 0;
     width: 0;
    color: white;
    display: none;
    position: relative;
    bottom: 40px;

}
h2{font-style: italic;}
a{font-style: italic;
  text-decoration: none;
color: white;
background-color: blue;
border-radius: 20px;
padding: 10px;
transition: 1.5s;
 box-shadow: 3px 3px 10px 10px black;  
position: relative;
left: 120px;
top: 60px; 
}
a:hover {
   background-color: white;
   color: blue; 
 box-shadow: 3px 3px 10px 10px rgb(8, 8, 10);  



}

.content:hover {
  background-color: red;
  height: 300px;
  width: auto;

border-radius: 50px 50px 50px 50px;
  
}

.content:hover .information{
  width: 400px;
  height: 400px;
   top: 100px;
}

.information:hover .image{
   animation-name: image;
   animation-duration: 3s;
   position: relative;
   animation-fill-mode: forwards;
}

.content:hover p{
   position: absolute;
   z-index: 3;
   top: 100px;
}
.content:hover a{
   position: absolute;
   z-index: 3;
   top: 220px;
}
.content:hover h2{
   position: absolute;
   z-index: 3;
}
.information:hover .word{
  animation-name: word;
   animation-fill-mode: forwards;
   animation-duration: 2s;
position: relative;
  width: 200px;

  display: block;
}

@keyframes image{
0%{
  left:0px;
}

100%{left: 280px;}
}
@keyframes word{
0%{left:0px}
100%{left: 36px;}
}


@media(min-width:0px) and (max-width:600px){
body{

  background-image: linear-gradient(to left, #F2B655);
     display: flex;
     align-items: center;
     justify-content: center; 
     height: 100vh;
     width: 100%;
     
    }
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
      width: 400px;
      height: 400px;
      box-shadow: 3px 3px 400px 30px red;  
      position: relative;
      margin-top: 50%;
      margin-bottom: 50%;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
}
.logo{
      
        width: 400px;
    height: 400px;
    background:no-repeat url(1757094345221.png)  center ;
    background-size: cover;
    border-radius: 50%;
    z-index: 2;
    position: relative; 
}

.information{
    transition-duration: 1s;
     height: 0;
     width: 0;
     border-radius: 50%;
    border-radius: 10px;
    background-color: red;
    position: relative;
    bottom: 400px;
         right: 100px;

        transition: width 0.5s ease-in-out ;
    
}
.image{
  position: relative;
  bottom: 20px;
           right: 100px;


}
.word{
     height: 0;
     width: 0;
    color: white;
    display: none;
    position: relative;
    bottom: 40px;

}
h2{font-style: italic;}
a{font-style: italic;
  text-decoration: none;
color: white;
background-color: blue;
border-radius: 20px;
padding: 10px;
transition: 1.5s;
  border: 20px black;

box-shadow: 3px 3px 10px 5px black;  
position: relative;
left: 160px;
top: 60px; 
}
a:hover {
   background-color: white;
   color: blue; 
 box-shadow: 3px 3px 10px 5px rgb(8, 8, 10);  



}
.content:hover .logo{
  width: 200px;
  height: 200px;
}
.content:hover {
  background-color: red;
  height: 300px;
  width: auto;

border-radius: 50px 50px 50px 50px;
  
}

.content:hover .information{
  width: 400px;
  height: 400px;
   top: 100px;
}

.information:hover .image{
   animation-name: image;
   animation-duration: 3s;
   position: relative;
   animation-fill-mode: forwards;
}

.content:hover p{
   position: absolute;
   z-index: 3;
   top: 100px;
}
.content:hover a{
   position: absolute;
   z-index: 3;
   top: 220px;
}
.content:hover h2{
   position: absolute;
   z-index: 3;
}
.information:hover .word{
  animation-name: word;
   animation-fill-mode: forwards;
   animation-duration: 2s;
position: relative;
  width: 150px;

  display: block;
}

@keyframes image{
0%{
  left:0px;
}

100%{left: 260px;}
}
@keyframes word{
0%{left:0px}
100%{left: 100px;}
}


}