nav a{
    padding:1em;
    color:rgb(255, 0, 242);
    text-decoration:none;
    border:5px solid rgb(255, 0, 242);
    border-radius:40px;
    backdrop-filter:blur(5px);
    display:inline-block;
    font-size:20px !important;
    font-family:'Times New Roman', Times, serif;
    font-weight: normal;
    line-height: 1.2;
    transition: .7s ease all;
} 
#grid a{
    color: rgb(255, 0, 183);
    text-decoration: none;
    font-style: bold;
    font: times;
}
#grid {
    margin-top:90px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;


  }
  @keyframes colorchange{
    0%{
        background-color:rgb(124, 1, 89);
    }
    50%{
        background-color:rgb(0, 0, 0)
    }
    100%{
        background-color:rgb(21, 0, 136)
    }
    }
   
#grid .odd{
    background-color: rgb(34, 0, 255);
    text-decoration:none;
    display:inline-block;
    height: 20vh;
    font-size: 50px;
    text-align:center;
    font-style:bold;
    justify-content: center;
    transition: 1.5s ease all;
    border: 5px solid rgb(255, 0, 183);
    border-radius:50px;

  display: flex;
  align-items: center;
  justify-content: center;
}
#grid .even{
    background-color: rgb(34, 0, 255);
    text-decoration:none !important;
    display:inline-block;
    height: 20vh;
    font-size: 50px;
    text-align:center;
    justify-content: center;
    transition: 1.5s ease all;
    border: 5px solid rgb(255, 0, 183);
    border-radius:80px;

  display: flex;
  align-items: center;
  justify-content: center;
}
body.home {
        animation-name: colorchange;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
#grid .odd:hover{
    background-color:rgb(255, 0, 183);
    color: rgb(34, 0, 255);
    border: 5px solid rgb(34, 0, 255);
}
#grid .even:hover{
    background-color:rgb(255, 0, 183);
    color: rgb(34, 0, 255);
    border: 5px solid rgb(34, 0, 255);
}
nav a:hover{
    background-color:rgb(34, 0, 255)
}
html, body {
  height: 100%;
  margin: 0;
}
.ges {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .7rem ;
  font-size: 40px;
  text-align: center;
  z-index: 999;
  color: white;
  border: 5px solid;
  border-radius: 30px;
  background-color: black;
  font-style: times;
}
a.prev{
    position:fixed;
    bottom:5px;
    left:5px
}
a.next{
    position:fixed;
    bottom:5px;
    right:5px
}