body{
width: 100%;
height:150vh;
display: grid;
background-image:url('images/stars.gif');
background-repeat: repeat;
}

main{
display: grid;
grid-template-columns: 315px 315px 250px 200px 200px;
grid-template-rows: 440px 200px 200px 200px;
}



nav{
  grid-column: 1 / 1;
grid-row: 1 / 2;
  display: flex;
}

#tele{
    position: absolute;
    z-index: -1;
    top: 40px;
}

.albums {
    top: 88px;
    left: 55px;
    position: absolute;
    width: 380px;
}

.carrusel {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 270px;
    border: 19px solid rgb(0, 0, 0);
    display: flex;
    overflow: hidden;
    border-radius: 22px;
}

.group {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: spin 35s infinite linear;
}

.carrusel:hover .group {
    animation-play-state: paused;
}



.card {
    position: relative;
    flex: 0 0 400px;
    height: 250px;
    width: 300px;
    overflow: hidden;
    background: #ffe6e6;
}

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

@font-face {
font-family: magazine;
src: url(https://dl.dropbox.com/s/9a122x5sim0udkw/MagazineLetterByBrntlbrnl-Regular.ttf);
 
}


@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     
    

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 219, 99, 0.75);
    color: rgb(32, 59, 16);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 21px;
    pointer-events: none;
    font-family: magazine;
}

.card:hover .overlay { opacity: 1; }

@keyframes spin {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

#favs{
    grid-column: 5 / 6;
    grid-row: 1 / 4;
    background-color: black;
    border-radius: 15px;
    border: dotted rgb(8, 148, 8);
    display: grid;
    grid-template-columns: 1fr;
    grid-row: 30px 1fr;
    overflow: hidden;
    overflow-y: scroll;
}



.rectanglesuperior{
    grid-row: 1 / 2;
    grid-column: 1;
    display: flex;
    max-width: 200px;
    width: 100%;
    justify-content: center;
    color: rgb(217, 255, 205);
    font-family: magazine;
}

.rectangleinferior{
    padding: 10px;
    grid-column: 1;
    grid-row: 2 / 3;
    display: flex;
    max-width: 200px;
    width: 100%;
    flex-direction: column;
    justify-content: center;

}

.rectangleinferior img{
    border: double rgb(193, 255, 193);
}

::-webkit-scrollbar {
width: 7px;
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
border-left: 0px solid #888;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgb(38, 122, 27) 0%, rgb(201, 255, 194) 28%, rgb(166, 238, 138) 55%, rgba(202,227,252,1) 87%);
  border-left: 1px solid #888;
}

#ilovemoviestext{
    position: absolute;
    top: 20px;
    left: 700px;
}

.musikin{
    position: absolute;
    top: 500px;
    left: 20px;
}