*{
  margin: 0;
  padding: 0;
}



.header{
  border: 2px solid yellow;
  background-image: url('https://pastella.neocities.org/pink%20cheetah%20header.jpg');
  grid-area: header;
}



.logo_cont{
  height: 100%;
  
}

.logo_cont h1{
  color: white;
  height: 100%;
  vertical-align: middle;
  font-family: 'Orbitron';
  text-shadow:
    -1px -1px 0 black, 
    1px -1px 0 black,  
    -1px 1px 0 black,  
    1px 1px 0 black,  
    2px 2px 5px rgba(0, 0, 0, 0.5); 
  -webkit-text-stroke: 0.75px black; 
}


.navigation {
  height: 100%;
}

.navigation a {
 height: 100%;
}

.navigation a li{
 vertical-align: middle;
 height: 100%;
 color: white;
 font-family: 'Orbitron';
 font-size: 16px;
   text-shadow:
    -1px -1px 0 black, 
    1px -1px 0 black,  
    -1px 1px 0 black,  
    1px 1px 0 black,  
    2px 2px 5px rgba(0, 0, 0, 0.5); 
  -webkit-text-stroke: 0.75px black;
  transition: 0.8s all;
}

.navigation a li:hover {
  background-color: pink;
  font-size: 18px;
}

ul {
  list-style-type: none;
  overflow: hidden;
  }

a {
  float: left;
  }
  
a li {
  display: block;
  padding: 3vh;
  }

.container-grid {
  height: 100%;
  border: 5px solid white;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas:
    "header header header"
    "left center right"
    "footer footer footer";
}

.left {
    background-color: black;
    border: 2px solid blue;
    grid-area: left;
}

.center {
    background-image: url('https://pastella.neocities.org/y2k%20wallpaper%202.jpg'); 
    grid-area: center;
    border: 2px solid green;
}

.right {
    background-color: black;
    border: 2px solid orange;
    grid-area: right;
    overflow: hidden;
}

.footer{
 background-color: black;
 border: 2px solid white;
 grid-area: footer;
 text-align: center;
 display: block;
}



h3 {
  color: white;
  font-family: 'Orbitron';
  text-shadow:
    -1px -1px 0 black, 
    1px -1px 0 black,  
    -1px 1px 0 black,  
    1px 1px 0 black,  
    2px 2px 5px rgba(0, 0, 0, 0.5); 
  -webkit-text-stroke: 0.25px black; 
}

#vinyl-gallery * {
    all: unset;
  }
 
  #vinyl-gallery {
    all: initial!important;
    width: 100%!important;
    height: 230px!important;
    margin: 30px 0!important;
    display: flex!important;
    flex-direction: row!important;
    position: relative!important;
    margin-left: -6px!important;
  }
 
  #vinyl-gallery .vinyl {
      all:unset!important;
    perspective: 500px !important;
    width: 15px!important;
    transition: width 0.5s!important;
  }
 
  #vinyl-gallery .vinyl:hover {
    width: 148px!important;
  }
 
  #vinyl-gallery img {
      all:unset!important;
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 150px!important;
    height: 150px!important;
    transform: rotateX(0deg) rotateY(25deg)!important;
    transform-style: preserve-3d!important;
    border-radius: 4px!important;
    border: 2px solid rgba(0, 0, 0, 0.1)!important;
object-fit: cover!important;
  }
 
  #vinyl-gallery .vinyl:hover img {
    transform: rotateX(0deg) rotateY(10deg)!important;
    width: 188px!important;
    height: 188px!important;
    margin-top: -2px!important;
  }
 
  #vinyl-gallery .title {
    color: white;
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
    font-family: 'Orbitron';
    text-shadow:
    -1px -1px 0 black, 
    1px -1px 0 black,  
    -1px 1px 0 black,  
    1px 1px 0 black,  
    2px 2px 5px rgba(0, 0, 0, 0.5); 
  -webkit-text-stroke: 0.25px black; 
  font-size: 15px;
  }
 
  #vinyl-gallery .vinyl:nth-child(n):hover + .title {
    visibility: visible;
  }








body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: black;
  font-family: Verdana;
}