style.css

html {
  scroll-behavior: smooth;
}

body, nav {
  transition: background 0.3s linear;
}

.footerLight {
  background-color: #f23a66;
}

.footerDark {
  background-color: #FFDB4A;
}

.ic {
  color: white;
}

.darkMode {
  background-color:#1269F3;
  height: 26px;
  width: 50px;
  display:flex;
  border-radius: 50px;
  align-items: center;
  justify-content: space-between;
  padding:3px;
  position:relative;
  transform: scale(1.5);
}

.floating-toggle {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.fa-moon {
  color: #f1c40f;
}

.fa-sun {
  color: #f39c12;
}

.ball {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
  top:2px;
  left:2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked + .darkMode .ball {
  transform:translateX(24px);
}

.checkbox:checked + .darkMode{
  background-color: #4152be;
}

.checkbox {
  opacity: 0;
  position:absolute;
}

.po {
  color: black;
}
.indent {
  text-indent: 2em;
}
.cont-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10%;
}
.cont{
  padding:30px;
  margin:2%;
  background:white;
  width:30%;
  border:1px solid #d6d6d6;
  cont-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  border-radius:3px;
  transition:.2s all; 
}
.cont-wrap:hover .cont{
  filter:blur(3px);
  opacity:.5;
  transform: scale(.98);
  cont-shadow:none;
}
.cont-wrap:hover .cont:hover{
  transform:scale(1);
  filter:blur(0px);
  opacity:1;
  cont-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}

.featured-dv {
  max-width: 56.25rem;
  margin: auto !important;
}