body {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: black;
   color: white;
 }

 .title {
   position: absolute;
   background-color: black;
   border-radius: 5%;
   animation: shadowAnimation 2s infinite, borderAnimation 2s infinite;
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 240px;
   height: 340px;
 }

 .titlesub {
   border-radius: 4%;
   background-color: rgba(255, 255, 255, 0.828);
   width: 210px;
   height: 310px;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: backgroundAnimation 1s infinite alternate;
 }

 .titlebox {
   border-radius: 4%;
   background-color: black;
   width: 200px;
   height: 300px;
   display: grid;
   grid-template-columns: auto;
   align-items: center;
   justify-content: center;
 }

 .text {
   text-align: center;
   margin: auto;
   animation: textAnimation 2s infinite;
 }

 img {
   width: 230px;
   height: 230px;
   ;
   animation: imgAnimation 2s infinite;
 }

 @media screen and (max-width: 300px) {
   .title {
     width: 75px;
     height: 115px;
   }

   .titlesub {
     width: 65px;
     height: 95px;
   }

   .titlebox {
     width: 60px;
     height: 90px;
   }

   .text {
     font-size: 7px;
   }

   img {
     width: 70px;
     height: 70px;
   }
 }

 @keyframes shadowAnimation {
   0% {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   }

   50% {
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
   }

   100% {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   }
 }

 @keyframes borderAnimation {
   0% {
     border: 1.5px solid #d6ccc2;
   }

   50% {
     border: 3px dotted #edede9;
   }

   100% {
     border: 2px dashed #f5ebe0;
   }
 }

 @keyframes backgroundAnimation {
   0% {
     background-color: rgba(255, 255, 255, 0.828);
   }

   50% {
     background-color: #f5ebe0;
   }

   100% {
     background-color: rgba(255, 255, 255, 0.3);
   }
 }

 @keyframes textAnimation {

   0%,
   100% {
     opacity: 0.5;
     color: #778da9;
   }

   50% {
     opacity: 1;
     color: #e0e1dd;
   }
 }

 @keyframes imgAnimation {

   0%,
   100% {
     opacity: 0.5;

   }

   50% {
     opacity: 1;
   }
 }