LMS.css

}
         
body {
background: #f2f4f8;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
font-family: "Open Sans";
}

.education {
--bg-color: #f1bf36d4;
--bg-color-light: #ffeeba;
--text-color-hover: #4C5656;
--box-shadow-color: rgba(255, 215, 97, 0.48);
}

.credentialing {
--bg-color: #B8F9D3;
--bg-color-light: #e2fced;
--text-color-hover: #4C5656;
--box-shadow-color: rgba(184, 249, 211, 0.48);
}

.wallet {
--bg-color: #CEB2FC;
--bg-color-light: #F0E7FF;
--text-color-hover: #fff;
--box-shadow-color: rgba(206, 178, 252, 0.48);
}

.human-resources {
--bg-color: #DCE9FF;
--bg-color-light: #f1f7ff;
--text-color-hover: #4C5656;
--box-shadow-color: rgba(220, 233, 255, 0.48);
}

.card {
width: 220px;
height: 321px;
background: #fff;
border-top-right-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 14px 26px rgba(0,0,0,0.04);
transition: all 0.3s ease-out;
text-decoration: none;
}

.card:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0,0,0,0.11),
  0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
transform: scale(4) translateZ(0);
}

.card:hover .circle {
border-color: var(--bg-color-light);
background: var(--bg-color);
}

.card:hover .circle:after {
background: var(--bg-color-light);
}

.card:hover p {
color: var(--text-color-hover);
}

.card:active {
transform: scale(1) translateZ(0);
box-shadow: 0 15px 24px rgba(0,0,0,0.11),
  0 15px 24px var(--box-shadow-color);
}

.card p {
font-size: 17px;
color: #4C5656;
margin-top: 30px;
z-index: 9;
transition: color 0.3s ease-out;
}

.circle {
width: 131px;
height: 131px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: all 0.3s ease-out;
}

.circle:after {
content: "";
width: 118px;
height: 118px;
display: block;
position: absolute;
background: var(--bg-color);
border-radius: 50%;
top: 7px;
left: 7px;
transition: opacity 0.3s ease-out;
}

.circle svg {
z-index: 10000;
transform: translateZ(0);
}

.overlay {
width: 118px;
position: absolute; 
height: 118px;
border-radius: 50%;
background: var(--bg-color);
top: 70px;
left: 50px;
z-index: 0;
transition: transform 0.3s ease-out;
}
.row{
  background-color: #556298;
}
.image-container {
background-image: url("black-4k-blue-lines-wallpaper-preview.jpg"); /* The image used - important! */
background-size: cover;
position: relative; /* Needed to position the cutout text in the middle of the image */
height: 220px; /* Some height */
}

.text {
background-color: white;
color: black;
font-size: 10vw; /* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen; /* This makes the cutout text possible */
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  display: none;
}

.popup form {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 20px;
  background-color: #3476a1;
  border-radius: 5px;
}

.popuph2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #17a2b8;
  font-family: 'Times New Roman', Times, serif;
  text-decoration: solid;
  background-color:#941d54b5; 
  border: 2px solid black;
  display: inline;
}

.popup input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ffffff;
}

.popup select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #fcfcfc;
}

.submit {
  background-color: #34087a;
  color: #ffffff;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.popup button:hover {
  background-color: #999999;
}

.close {
  position:fixed;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #fcfcfc;
}

/* //for displaying books */
.popupdisplay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 11;
  overflow:scroll;
  display: none;
}
.table {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  /* background-color: #3476a1; */
  border-radius: 5px;
  /* border:2px dashed rgb(116, 109, 109) ; */
  
}
.table :nth-child(odd) :hover {
  background-color: #6986b5ce;
}

/* //for deleting books */
.popupdelete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 11;
  overflow:scroll;
  display: none;
}
.hover :nth-child(odd) :hover {
  background-color: #17a2b8
 
}

/* for reserving books */
.popupreserve {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 11;
  overflow:scroll;
  display: none;

}
/* for buttons */
.delete {

  color: #ffffff;
  padding: 4px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.reserve {
  background-color: #941d55;
  color: #ffffff;
  padding: 4px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.deposit {
  background-color: #116992;
  color: #ffffff;
  padding: 4px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}