@font-face {
    font-family: 'comic_sans_msregular';
    src: url('fonts/comic-sans-ms_fr.allfont.net-webfont.woff2') format('woff2'),
         url('fonts/comic-sans-ms_fr.allfont.net-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    height:100%;
    display: flex;
    margin: 0;
    background-color: black;
}
.model-viewer {
    height : 100%;
    width: 100%;
}
.containerBody {
    aspect-ratio : 1 / 1;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center; /* horizontally center the child elements */
    align-items: center; /* vertically center the child elements */
    max-height: 1080px;
    max-width: 1080px;
    height: 100%;
    width: max-content;
}
.slide {
    display: flex;
    justify-content: center; /* horizontally center the child elements */
    align-items: center; /* vertically center the child elements */
    position: absolute;
    flex-grow: 1;
    height: 100%;
    width: max-content;
}
#TOY{
    width: 100%;
    background-color: rgb(0, 0, 0);
    
}

#PFP{
    width: 100%;
    background-color: rgb(0, 0, 0);
    
}

#modelViewerDiv{
    width: 100%;
    background-color: rgb(0, 0, 0);
}
.slide > * {
    display: flex;
    height: 100%;
    width: 100%;
}
/* center img */
.loadingImg {
    
    position:absolute;
    display: flex;
    height: 200px;
    width: 200px;
    animation: blink 1.5s infinite;
    

        
}


.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s linear;
  background-color: antiquewhite;
 
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
 
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}