body{
    height: 100vh;
    background-image: url("https://blog.spoongraphics.co.uk/wp-content/uploads/2019/composite-background/final-lg.jpg");
    background-size: 100% 100%;
}
.ota {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.div {
    width: 25%;
    height: 300px;
    background-color:black;
    border-radius: 10px;
    border: 3px solid red;
    position: relative;
    bottom: 120px;
    transition-duration: 1s;
}

.div:hover {
    box-shadow: 1px 1px 10px 10px green;
    width: 26%;
    height: 320px;
}

.img {
    border-radius: 10px;
    position: relative;
    left: 38px;
    top: 20px;
    transition-duration: 1s;
}

.img:hover {
    box-shadow: 1px 1px 10px 5px blue;
    position: relative;
    left: 40px;
}

.p{
    position: relative;
    top: 30px;
    left: 145px;
    width: 70px;
    transition-duration: 1s;
    color: aqua;
}

.p:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.p1 {
    position: relative;
    top: 30px;
    left: 140px;
    width: 110px;
    transition-duration: 1s;
    color: aqua;
}

.p1:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.p2 {
    position: relative;
    top: 30px;
    left: 160px;
    width:50px;
    transition-duration: 1s;
    color: aqua;
}

.p2:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.p3 {
    font-size: 100px;
    color:black;
    background-color: black;
    position: relative;
    bottom: 100px;
    left: 500px;
    text-align: center;
    width: 500px;
    height: 0px;
    transition-duration: 1s;
}

.p3:hover {
    box-shadow: 1px 1px 10px 10px blue;
    color: blue;
    text-shadow: 10px 10px 5px red;
}
.ota1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.div1 {
    width: 25%;
    height: 300px;
    background-color:black;
    border-radius: 10px;
    border: 3px solid red;
    position: relative;
    bottom: 70px;
    transition-duration: 1s;
}

.div1:hover {
    box-shadow: 1px 1px 10px 10px green;
    width: 26%;
    height: 320px;
}

.img1 {
    border-radius: 10px;
    position: relative;
    left: 38px;
    top: 20px;
    transition-duration: 1s;
}

.img1:hover {
    box-shadow: 1px 1px 10px 5px blue;
    position: relative;
    left: 40px;
}

.p4{
    position: relative;
    top: 30px;
    left: 145px;
    width: 90px;
    transition-duration: 1s;
    color: aqua;
    text-align: center;
}

.p4:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.p5 {
    position: relative;
    top: 30px;
    left: 140px;
    width: 110px;
    transition-duration: 1s;
    color: aqua;
    text-align: center;
}

.p5:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.p6 {
    position: relative;
    top: 30px;
    left: 140px;
    width:100px;
    transition-duration: 1s;
    color: aqua;
    text-align: center;
}

.p6:hover {
    box-shadow: 1px 1px 10px 5px red;
    background-color: red;
}

.b {
    text-decoration: none;
    padding: 10px 20px;
    width: 250px;
    height: 100px;
    background-color: transparent;
    font-weight: 900;
    border: 3px solid red;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50px;
    position: relative;
    bottom: 170px;
    left: 200px;
    font-size: 40px;
    animation: rainbow 3s infinite linear;
    transition-duration: 1s;
}

.b:hover {
  transform: scale(1.3);
  box-shadow: 
    0 0 30px #38bdf8,
    0 0 60px #38bdf8,
    0 0 100px #38bdf8;
}

    @keyframes rainbow {
      0% { 
        color: red;
        box-shadow: 1px 1px 10px 10px red;
        }
      20%  {
        color: aqua; 
        box-shadow: 1px 1px 10px 10px aqua;
        }
      40%  {
        color: deeppink; 
        box-shadow: 1px 1px 10px 10px deeppink;
        }
      60%  {
        color: green; 
        box-shadow: 1px 1px 10px 10px green;
        }
      80%  {
        color: blue;
        box-shadow: 1px 1px 10px 10px blue; 
        }
      100% {
        color: purple;
        box-shadow: 1px 1px 10px 10px purple; 
        }
    }

.v {
    text-decoration: none;
    padding: 10px 20px;
    width: 250px;
    height: 100px;
    background-color: transparent;
    font-weight: 900;
    border: 3px solid red;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50px;
    position: relative;
    bottom: 170px;
    left: 950px;
    font-size: 40px;
    animation: rainbow 3s infinite linear;
    transition-duration: 1s;
}

.v:hover {
  transform: scale(1.3);
  box-shadow: 
    0 0 30px #38bdf8,
    0 0 60px #38bdf8,
    0 0 100px #38bdf8;
}

    @keyframes rainbow {
      0% { 
        color: red;
        box-shadow: 1px 1px 10px 10px red;
        }
      20%  {
        color: aqua; 
        box-shadow: 1px 1px 10px 10px aqua;
        }
      40%  {
        color: deeppink; 
        box-shadow: 1px 1px 10px 10px deeppink;
        }
      60%  {
        color: green; 
        box-shadow: 1px 1px 10px 10px green;
        }
      80%  {
        color: blue;
        box-shadow: 1px 1px 10px 10px blue; 
        }
      100% {
        color: purple;
        box-shadow: 1px 1px 10px 10px purple; 
        }
    }