bd.css

*{
  
    margin: 0 auto;
    user-select: none;
 
}
body
{
    background-color: rgb(2, 2, 3);
}

.main
{
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    background-color: wheat;
    

}

.name
{
    height: 20vh;
    width: 100%;
   
    display: flex;
}
.time
{
    height: 15vh;
    width: 24vh;
    font-size: 2em;
    display: inline;
    text-align: center;
    padding-top: 5vh;
    box-sizing: border-box;
}
#tt
{
    display: inline;
}
.title
{
    font-size: 100%;
    font-weight: bold;
    width: 70%;
    background-image: url("https://see.fontimg.com/api/renderfont4/8MVEg/eyJyIjoiZnMiLCJoIjo2NCwidyI6MTI1MCwiZnMiOjUxLCJmZ2MiOiIjMDAwMDAwIiwiYmdjIjoiI0ZGRkZGRiIsInQiOjF9/aW1hZ2UgcmVjb2duaXRpb24/pumpkin-type-halloween.png");
    
    background-size: 100% 10vh;
    background-repeat: no-repeat;
    
}
.score
{
    height: 15vh;
    width: 24vh;
    font-size: 2em;
   
    
    display: inline;
    padding-top: 5vh;
    box-sizing: border-box;

}
#nn
{
    display: inline;
}

#downbox
{
height: 70vh;
width: 100%;
border: 1px solid black;
display: flex;
 
background-repeat: no-repeat;
background-size:170vh 70vh;
}

.but
{
    height: 10vh;
    width: 10%;
    border: 1px solid black;
    margin-top: 30vh;
    text-align: center;
    padding-top: 3vh;
    box-sizing: border-box;
    transition-duration: .25s;
    user-select: none;
}
#next:hover
{
    transform: scale(1.1) translate(2.1rem, 0ex);
    
}
#prev:hover
{
    transform: scale(1.1) translate(-2.1rem, 0ex);
    
}
#prev
{
    background-image: url("https://i.postimg.cc/MKyxK1B6/prev.jpg");
    background-size:100% 10vh; 
}
#next
{
    background-image: url("https://i.postimg.cc/FRR3h9nv/next.jpg");
    background-size:100% 10vh; 
}

#list
{
    height: 60vh;
    width: 100vh;
    border: 1px solid black;
    margin-top: 5vh;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    background-image: url("https://i.postimg.cc/KcHqs5Z9/b2.jpg");
}
.k
{
    height: 55vh;
    width:90vw ;
     border: 1px solid black;
     background-image: url("https://i.postimg.cc/xCn5SDLy/b1.jpg");
   
}

.o
{
    height: 150px;
    width:300px ;
     margin: auto;
     overflow: scroll;    
}

.answ
{
    height: 8vh;
    width:90vw ;
     
    padding: 5px;
    background-color: transparent;
    text-align: center;
}
.result
{
    height: 20vh;
    width:90vw ;
    border: 1px solid green;
    background-color: aqua;
     text-align: center;
     font-size: 2em;
   
}
.remark
{
    margin-top: 30px;
 
}

button
{
    margin-left: 87%;
    transform: scale(2);
}
button:hover{
    transform: scale(2.3);
}
input
{
    font-size: large;
    background-color: transparent;
}

.o img
{
   transform: scale(4);
   transform-origin: top left;
   user-select: none;
   -webkit-user-drag: none;
   transition-duration: 1s;
}
.finalheading
{
    text-align: center;
    font-weight: bolder;
}
.finalremark
{
    font-size: 3em;
    font-style: oblique;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-top: 50px;
}

.back
{
    margin-left: 90%;
    transform: scale(2);
}