@font-face 
{
  font-family: Deltarune; 
  src: url(assets/fonts/deltarune.woff2);
}

@font-face 
{
  font-family: field; 
  src: url(assets/fonts/field.ttf);
}

.noselect 
{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

body 
{
  background-color: black;
  font-family: Deltarune;
  overflow-x: hidden;
  background-image: url(https://file.garden/Z7YtBbyd-wefsoli/UTDR_BG%20SLOWED.gif) !important;
  background-attachment: fixed !important;
  background-position: 50% 50%;
  background-repeat: repeat;
  color: white;
  position: relative;
  padding: 0%;
  margin: 0%;
  text-shadow: 1.5px 1.5px #121f91;
}

.container
{
  overflow: hidden;
  height : 100vh;
  width: 100vw;
  position: relative;
  display: flex;
}

.leftInfo
{
    width: 30vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.leftInfoContent
{
    margin:10%;
    height: 70%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.gridContainer
{
    width: 68vw;
    height: 80vh;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: 23.45% 23.45% 23.45% 23.45%;
    margin-top: 10vh;
    margin-bottom: 10vh;
    gap: 16px;
    
}

.gridItemContainer
{
    width: 192.2666667px;
    /* height: 93%; */
    border: white solid 6px;
    position: relative;
    transition: transform 0.3s ease;
    background-color: black;
}

.gridItemContainer:hover
{
    transform: scale(1.03) translateY(-10px);
    z-index: 50;
}

.gridItemContainer img
{
    width: 100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}

.darkOverlay
{
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    inset: 0;
    position: absolute;
    display: none;
}

.showverlay
{
    display: block;
}



.currentCharacter
{   
    height: 40%;
    width: 60%;
    border: white solid 6px;
}

.currentCharacter img
{
    width: 100%;
    height:100%;
    object-fit: cover;
}

.hovered
{
    border-color: yellow;
}

.flippedCard
{
    border-color: rgb(141, 141, 141);
    /* filter: brightness(0.6) saturate(100%); */
}

.characterNameBox
{
    border: white solid 5px;
    height: fit-content;
    background-color: black;
    position: absolute;
    width: 194px;
    left: -6px;
    max-height: 200px;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 100;
    top: -80px;
}

.characterNameBox p
{
    font-size: 1.3rem;
}

.playmusicwarning
{
  position: absolute;
  bottom: 0px;
  left: 30%;
}

.playmusicwarning 
{
  font-size: 1.5rem;

}










/* ----------------------audio------------------------------- */

.btmRightContainerTest
{
  display: flex;
  position: fixed;
  bottom:  10px;
  right: 10px;
  z-index: 100;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.squimpyTest
{
  width: 15vw;
  min-width: 200px;
  border: #202c94 solid 2px;
  aspect-ratio: 3 / 1;
  border-image-source: url(https://oliverspace.neocities.org/textbox.gif);
  border-image-width: 25px;
  border-image-repeat: repeat;
  border-image-slice: 27.6% fill;
  border-image-outset: 11px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}

/* fix size of the parent container */
.squimpyTest span
{
  font-size: clamp(15px, .9vw, 40px);
  letter-spacing: .5px;
  padding-left: 10%;
  padding-top: 4%;
  padding-bottom: 2%;
  text-indent: -.7em; 
}

.hideSquimpy
{
  transform: translateX(150%);
  transition: transform 0.4s ease;
}

.playlistButtons
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding-bottom: 3px;
  
}

.playlistButtons button
{
  width: 28%;
  aspect-ratio: 1.3 / 1;
  border: white, 3px, solid;
  background: black;
  color: white;
  font-family: Deltarune;
  font-size: 1.1rem;
  cursor: pointer;
}

.togglePlaylist
{
  width: 3.6vw;
  min-width: 50px;
  aspect-ratio: 1.3 / 1;
  background-image: url(assets/about/img/prophecy.gif);
  transition: filter .9s ease, transform 0.4s ease;
}

.togglePlaylist button {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 0;  
  cursor: pointer;
  display: block;

}

.togglePlaylist img {
  width: 100%; 
  height: 100%;
  display: block;
}

.playlistHide
{
  transform: translateX(420%);
  transition: transform 0.4s ease, filter .9s ease;
}

.togglePlaylist:hover 
{
  filter: saturate(69%) hue-rotate(45deg);
  
}

.ostDisplay
{
  position: fixed;
  z-index: 100;
  bottom: 10px;
  left: 0;
  transform: translateX(-100%);
  will-change: transform;
  opacity: 1;
}

@keyframes ostSlideIn 
{
    0%   { transform: translateX(110%); opacity: 0}
    20%  { transform: translateX(114%); opacity: 1} 
    75%  { transform: translateX(114%); opacity: 1} 
    100% { transform: translateX(117%); opacity: 0}   
}

.ostSlide 
{
    animation: ostSlideIn 4s ease-in-out;
}


.ostDisplay p
{
  font-size: 2rem;
  color: white;
  font-family: field;
  text-shadow: 
    -2px -2px 0 #121f91,  
     2px -2px 0 #121f91,
    -2px  2px 0 #121f91,
     2px  2px 0 #121f91;
}