/* GENERAL */
#my404 { min-height: calc(100vh - 7rem); }
#my404 h1 { color: #00b5cc; }

main { padding: 0; margin: 0; display: flex; height: 100vh; flex-direction: column; align-items: center; justify-content: center; background: transparent; position: relative; }
main::after { content: ''; position: absolute; z-index: 0; inset: 0; background-image: url("../img/bgs/backgorund-sheet0.png"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; animation: fadein 1s ease forwards; }

main section { z-index: 1; }

#flip-card { perspective: 1000px; width: 100vw; height: 100vh; inset: 0; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 1; }
#flip-card-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; transition: transform 0.8s ease; will-change: transform; }
.flip-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.flip-card-front { transform: rotateY(0deg); cursor: pointer; }
.flip-card-back { transform: rotateY(180deg); }
#flip-card.is-flipped #flip-card-inner { transform: rotateY(180deg); }

#welcome-ribbon { width: 800px; height: 800px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#welcome-ribbon img, #planets-wrapper img { max-width: 100%; height: auto; }
#wr-circle { display: block; }
#wr-ribbon { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

#santa-layer { position: absolute; z-index: 0; }


.rotate360 { display: inline-block; animation: bounceIn 1s ease, spin 40s linear infinite; animation-delay: 500ms; transform-origin: center; }



@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}




@media only screen and (max-width: 1200px){
}



@media only screen and (max-width: 1024px){
}



@media only screen and (max-width: 992px){
}



@media only screen and (max-width: 768px){	
	.container, .container-sm, .container-fluid { padding: 2rem; }
}



@media only screen and (max-width: 576px){
}



@media only screen and (max-width: 320px){
}