style.css

.main {
  background-color: rgba(255, 255, 255, 0.5);
  background: url('assets/bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
#teams{
  height: 100vh;
  overflow-y: scroll;
}
.title-div{
    padding-bottom: 4rem;
}
.title {
  font-size: 8rem;
  font-family: "Anton", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 0.9;
  margin-top: 3rem;
  color: gold;
  text-shadow: 5px 5px #000000;
}
.title-date {
  font-size: 1.1rem;
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  letter-spacing: 4.5px;
}
.ipl-logo {
  width: 40%;
}
.teams {
  font-family: "Poppins", sans-serif;
  font-style: normal;
}
.teams h2 {
    font-weight: 700;
}
.team-col{
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.team-col a{
  background-color: rgba(0, 1, 42, 0.5);
  border: 2px solid gold;
  gap: 10px;
}
.team-col a:hover{
      background-color: rgba(0, 1, 42, 0.779);
}
.team-col img{
  height: 50px;
  width: 50px;
}
.teamname{
  width: 100%;
  display: flex ;
  justify-content: center;
}
.team-each{
    width: max;
    border-radius: 20px;
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    color: #eee;
}
.down-arrow{
    display: none;
    margin-top: 2rem;
    width: 3rem;
}
@media (max-width: 640px) {
    #teams{
      height: max-content;
    }
    .ipl-logo {
        width: 70%;
      }
    .team-col{
        width: 100%;
    }
    .title{
        line-height: 1;
    }
    .title-date {
        font-size: 0.9rem;
        letter-spacing: 2px;
      }
      .down-arrow{
        display: block;
      }
      .teamname{
        justify-content: flex-start;
      }
  }