/* Header */
#header {
    grid-area: header;
    width: 100%;
    }

/* Add a black background color to the top navigation */
#topnav {
    background-color: #1f1273;
    overflow: hidden;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
}


.topbar-icon {
    height: 30px;
    cursor: pointer;
}


.topbar-icon:hover {
    transform: scale(1.1);
    transition: transform .5s;
}

.progress-bar {
    width: min(30vw, 360px);
    accent-color: #3df2ff;
    cursor: pointer;
}

.time-display {
    color: white;
}








/* GRID RAH */
#gridContainer {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: 
        'header header header header header'
        'item1 item2 item3 item4 item5'
        'item6 item7 item8 item9 item10';
    place-items: center;
}

.gridContainer > div {
  padding: 20px 0;
  height: 25vh;
  width: 19vw;
  display: grid;
  text-align: center;
  place-items: center;
  justify-content: center;
  justify-items: center;
}


.gridContainer > div > img {
    place-self: center;
}


/* 

    background-color: rgba(217, 60, 69);
    background-color: rgba(249, 184, 91);
    background-color: rgba(78, 79, 84);
    background-color: rgba(88, 157, 161);
    background-color: white;

*/



.item1 {
    grid-area: item1;
    background-color: rgba(78, 79, 84);

}

.item2 {
    grid-area: item2;
    background-color: rgba(88, 157, 161);
}

.item3 {
    grid-area: item3;
    background-color: white;
}

.item4 {
    grid-area: item4;
    background-color: rgba(88, 157, 161);
}

.item5 {
    grid-area: item5;
    background-color: rgba(78, 79, 84);
}
.item6 {
    grid-area: item6;
    background-color: rgba(249, 184, 91);
}

.item7 {
    grid-area: item7;
    background-color: rgba(217, 60, 69);
}

.item8 {
    grid-area: item8;
    background-color: rgba(88, 157, 161);
}

.item9 {
    grid-area: item9;
    background-color: rgba(217, 60, 69);
}

.item10 {
    grid-area: item10;
    background-color: rgba(249, 184, 91);
}






.Gurren {
    max-width: 17vw;
    max-height: 19vh;
    /* padding: 10px; */
    object-fit: cover;
    object-position: center;
    transition: transform .5s;
}

.Gurren:hover {
    cursor: pointer;
    transform:scale(1.1);
        transition: transform .5s;
}.Lagann {
    max-width: 17vw;
    max-height: 25vh;
    margin: 0px;
    object-fit: cover;
    object-position: center;
    transition: transform .5s;
}

.Lagann:hover {
    cursor: pointer;
    transform:scale(1.1);
        transition: transform .5s;
}



/****** CSS Animation for Playing ****/

.play {
   animation-name: playing;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-direction: alternate-reverse;
}

@keyframes playing {
    0%    {background-color: #882020; }
    20%   {background-color: #3df2ff; }
    40%   {background-color: #2f2ce8; }
    60%   {background-color: #e8a92c; }
    80%   {background-color: #eb43d4; }
    100%  {background-color: #882020; }
}

.pause {
    animation-name: paused;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes paused {
    0%    {background-color: #5d0069; }
    50%  {background-color: #21031d; }
    100%    {background-color: #5d0069; }
}



@media only screen and (max-width: 1000px) {
    #gridContainer {
    padding: 20px;
    grid-gap: 10px;
    grid-template-areas: 
        'header header header'
        'item1 item7 item5' 
        'item4 item3 item2'
        'item6 item8 item10'
        '.     item9 .    ';
    }

    .gridContainer > div {
        padding: 0px 0;
        height: 33vh;
        width: 30vw;
        text-align: center;
      } 

    .gridContainer > div > img {
        place-self: center;
        justify-self: center;
    }

    .Gurren {
        max-width: 27vw;
        max-height: 27vh;
    }

    .Lagann {
        max-width: 27vw;
        max-height: 27vh;
    }
}

@media screen and (max-width: 780px){

    #gridContainer {
    grid-gap: 10px;
    padding: 0px;
    grid-template-areas: 
        'header header'
        'item1 item5' 
        'item6 item10'
        'item2 item9'
        'item7 item8'
        'item3 item4';
    } 

     .gridContainer > div {
        /* padding: 0px 0; */
        height: 50vh;
        width: 45vw;
        text-align: center;
      } 

    .Gurren {
        max-width: 41vw;
        max-height: 41vh;
    }

    .Lagann {
        max-width: 41vw;
        max-height: 41vh;
    }

    .item3 {
        grid-area: item3;
        background-color: rgba(217, 60, 69);
    }

}

@media only screen and (max-width: 590px) {
    #gridContainer {
    display: grid;
    grid-gap: 10px;
    padding: 20px;
    grid-template-areas: 
        'header'
        'item1' 
        'item2'
        'item3'
        'item4'
        'item5'
        'item6'
        'item7'
        'item8'
        'item9'
        'item10';
    }
    
    #gridContainer > div {
    text-align: center;
    padding: 10px 0;
    width: 80vw;
    }
    
    .Gurren {
        max-width: 72vw;
        max-height: 47vh;
    }
    
    .Lagann {
        max-width: 72vw;
        max-height: 47vh;
    }


}





body {
  background: radial-gradient(circle at top, #1d2538 0, #050816 55%, #020617 100%);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.spiral-pulse {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(56, 191, 248, 0.6), transparent 80%);
  opacity: 0;
  animation: pulseEnergy 5s infinite ease-in-out;
  z-index: -1;
}

@keyframes pulseEnergy {
  0% { opacity: 0; transform: scale(1); }
  5% { opacity: 0.25; transform: scale(1.2); }
  10% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}







@font-face {
  font-family: Graveblade; /* set name */
  src: url('../fonts/Graveblade.ttf'); /* url of the font */
}
@font-face {
  font-family: Folkard; /* set name */
  src: url('../fonts/folkard_.ttf'); /* url of the font */
}
@font-face {
  font-family: Roboto; /* set name */
  src: url('../fonts/Roboto-Regular.ttf'); /* url of the font */
}
@font-face {
  font-family: Times_; /* set name */
  src: url('../fonts/times.ttf'); /* url of the font */
}