/* Page Code */
    h1 {text-align: center;}
    p {text-align: center;}
    div {text-align: center;}
    
 @font-face {
  font-family: myFont;
  src: url(text/Postface.otf);
  
}

* {
   font-family: myFont;
}

.StaticCenterContainer {
    position: relative ;
    display: block;
    width: 95% ; 
    max-width: 1000px ; 
    border: 4px double #000000;    
    padding: 20px;              
    background-color: #ffffff;  
    color: #000000;             
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); 
    text-align: center;
    margin-top: 20px ;
    margin-bottom: 20px ;
    margin-left: auto ;
    margin-right: auto ;
    height: auto;
}

html, body {
     margin: 0;
            padding: 10px; 
            box-sizing: border-box;
            align-items: flex-start;     
            background-color: #000000;  
           
}



@media (min-width: 1024px) {
    .StaticCenterContainer {
        padding: 20px;    
    }
}

@media (max-width: 480px) {
    .StaticCenterContainer {
        padding: 15px; 
        margin: 10px auto;
    }
}

    .MarqueeWithSidesRow {
            display: flex;
            align-items: flex-start;    
            justify-content: center;
            width: 100%;
            max-width: 950px;           
            margin: 20px auto;
            gap: 20px;
        }

        .MarqueeSideAssets {
            width: 180px;               
            height: 520px;            
            border: 15px double #FF46A2;    
            background-color: #ffffff;  
            box-sizing: border-box;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            overflow: hidden;         
            padding: 20px 0;
            flex-shrink: 0;           
        }
           .MarqueeSideAssets2 {
            width: 180px;               
            height: 520px;            
            border: 15px double #FF46A2;    
            background-color: #ffffff;  
            box-sizing: border-box;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            overflow: hidden;         
            padding: 20px 0;
            flex-shrink: 0;           
        }
  
  
        .SideScrollContent {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;                  
        }

    
        .MarqueeTextContent {
            font-size: 1.2em;          
            line-height: 1.7;   
        }


        .SideScrollContent img {
            max-width: 90%;
            height: auto;
            object-fit: contain;
        }


        @media (max-width: 768px) {
            .MarqueeWithSidesRow {
                flex-direction: column; 
                align-items: center;
                gap: 15px;
            }
            
            .StaticCenterContainer {
                max-width: 100%;        
                order: 1;            
            }

            .MarqueeSideAssets {
                width: 100%;
                max-width: 100%;       
                height: 160px;          
                order: 0;            
            }
            
            
            .MarqueeSideAssets2 {
                width: 100%;
                max-width: 100%;       
                height: 160px;          
                padding: 10px;
                order: 2;               
            }
            
            .SideScrollContent {
                flex-direction: row;   
                flex-wrap: nowrap;
                gap: 30px;
                padding: 0 10px;
            }

            .SideScrollContent img {
                height: 100px !important; 
                width: auto !important;
            }
            
            .BiggerFont {
                font-size: 2em;
            }
        }
  

        .profile-img {
            display: block; 
            margin: 0 auto 5px auto;
            align-items: center; 
           justify-content: center;

        }

        .MarqueeTextContent {
            font-size: 1.2em;          
            line-height: 1.2;   
        }


         /* Padding  */
   
        .action-blank {
         font-size: 0.95em;        
            padding-top: 10px;
            padding-bottom: 10px;
        }

    /* Float*/
   
        .float-left {
          float: left;
          margin-left: 15px;
        }
        .float-right {
          float: right;
          margin-right: 15px;
          max-width: 100%; 
          height: auto; 
          max-height: 220px;
          display: block; 
          margin: 0 auto 20px auto;
        }
        
        .float-none {
         float: none;
       }
 
        /* Beautiful Angel - https://www.cursors-4u.com/cursor/beautiful-angel */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/beautiful-angel-117422f1-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */

/* Scale hover */
.image-container img {

    transition: transform 0.3s ease-in-out;

}

.image-container:hover img {

    transform: scale(1.4); 

}

/* Shake hover */
.image-containers img {

    transition: transform 0.3s ease-in-out;

}

.image-containers:hover img {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}