css.css

body{
    background-color: black;
}
img{
    max-width: 100%;
    max-height: 100%;
    height: 40vh;
    width: 30vw;
    margin: 10px;
    border: 2px solid #FD3A3A;
    
}
img_div:hover{
    opacity: 0.5;
}

image_1{
    position: absolute;
    left: 10px;
    top: 10px;
}
image_2{
    position: absolute;
    right: 10px;
    top:10px;
}
image_3{
    position: absolute;
    left: 10px;
    bottom: 10px;
}
image_4{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
vs{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-size: 10vw;
    color:#FFFFA1;
}
left_name{
    position: absolute;
    top:47%;
    left:16%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-size: 1.5vW;
    color: #FFFFA1;
}
right_name{
    position: absolute;
    top:47%;
    left:84%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-size: 1.5vW;
    color: #FFFFA1;
}
left_id{
    position: absolute;
    top:51%;
    left:16%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-size: 1.5vW;
    color: #FFFFA1;
}
right_id{
    position: absolute;
    top:51%;
    left:84%;
    transform:translate(-50%,-50%);
    text-align: center;
    font-size: 1.5vw;
    color: #FFFFA1;
}
clock{
    position: absolute;
    top:85%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 3vw;
    color:black;
    background-color: #ECECEC;
    border-right: 5vw solid #ECECEC;
    border-left: 5vw solid #ECECEC;
    border-top-left-radius: 5vw 3vw;
    border-top-right-radius: 5vw 3vw;
    border-bottom-left-radius: 5vw 3vw;
    border-bottom-right-radius: 5vw 3vw;

}
stage{
    position: absolute;
    top:5%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 4vw;
    color:#FFFFA1;
}