@font-face {
    font-family: myfont;
    src: url(fonts/SfEspionageMedium-YMa2.ttf);
}

body {
  background-image: url("bg.png");
  background-repeat: repeat;
}

h1, h3, h4, li{
    font-family: myfont;
    color: rgb(238, 233, 223);
}
.homepage h1 {
    font-size: 75px;
    text-align: center;
    align-self: center;
}
.homepage h3 {
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
    max-width: 60%;
   
}
a {
    color:rgb(163, 19, 19);
    font-family: myfont;
    
}
.homepagelinks {
    text-align:center;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 200px;
}
.welcomemessage {
    display: flex;
}
.welcomemessage h1 {
    padding: 10px;
}
.welcomemessage img {
    width: 200px;
    height: 200px;
}
.pagebg {

}


/* Float list items to make them horizontal */
.navbar li {
  float: left;
  margin: 0 auto;
}
.navbar ul {
  list-style-type: none; /* Removes bullet points */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0f0101; /* Dark background */
}
/* Link styling */
.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* Removes underline */
}
/* Hover effect */
.navbar li a:hover {
  background-color: #230303;
}

.lists {
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    
    display: flex;
    flex-direction: column;
}
.lists h1 {
    font-size: 70px;
    padding-top: 10px;
    padding-left: 0px;
    margin: 0 auto;
}
.lists h4 {
    color: brown;
    font-weight: bolder;
    font-size: 20px;
    padding-bottom: -10px;
}
.lists h3 {
    font-size: 60px;
}
.lists ul {
    font-size: 27px;

}

.favdrinks img{
    width:78px;
    height:150px;
    padding-top: 10px;
    padding-left: 80px;
}
.favalbums {
    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px; /* space between items */
}
.lists h3 {
    font-size: 50px;
    text-align: center;
}
.lists ul li {
    font-size: 35px;
    
}
.album {
 
    
}
.album img{
    width:200px;
    height:auto;
    padding-top: 0px;
    padding-left: 0px;

    
}
.album h2{
    font-family: myfont;
    color: white;
    font-size: 20px;
    max-width: 200px;
}


@media (min-width: 280px) {
    .favalbums ul{
       font-size: 27px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
}

@media (min-width: 300px) {
    .favalbums ul{
       font-size: 27px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
}

@media (min-width: 900px) {
    .favalbums ul{
       font-size: 27px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
}
}
}



.favmovies img{
    width:125px;
    height:190px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 90px;
}

.favmeals img{
    width:400px;
    height:350px;
    padding-top: 10px;
    padding-left: 0px;
}

.favsnacks img{
    width:130px;
    height:200px;
    padding-top: 10px;
    padding-left: 0px;
}