.footer {
     text-align: center;
     box-shadow: 0px -30px 15px -18px rgba(0, 0, 0, 0.1);
     padding: 0px;
     width: 100%;
     margin: 0;
     font-weight: 400;
     background-size: cover;
 }
#navbar
{
     background-size: cover;
     font-size: 18px;
}
#headertext{
     font-size: 25px;
}
 #navbtn{
       outline: none;
       border: none;
}
body{

  background: linear-gradient(90deg, #eaf4ed 0%, #f4f6f5 40%, #fafafa 100%);

}


.main-content {
  padding: 20px;
  text-align: center;
}

.profile-picture {
  width: 250px;
  height: 250px;
  border-radius: 20%;
  object-fit: cover;
  margin: 10px;
  padding: 5px;
}

    
.skills-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.skills-list li {
  background-color: #e0e0e0;
  padding: 8px 15px;
  margin: 5px;
  border-radius: 20px;
}
.skills-list u {
  background-color: #fef;
  padding: 8px 15px;
  box-shadow: 0px 3px 5px;
  margin: 7px;
  margin-top: 0px;
  border-radius: 6px;
}



.short-modal-dialog {
    max-width: 430px;
    width: calc(100% - 2rem);
    margin: 1rem auto;
}

.short-modal-dialog .modal-content {
    max-height: 95vh;
}

.short-modal-dialog .modal-body {
    overflow: hidden;
}

.short-modal-dialog .ratio {
    --bs-aspect-ratio: 177.78% !important;
}

.short-modal-dialog iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* Smaller screens */
@media (max-width: 576px) {

    .short-modal-dialog {
        max-width: calc(100% - 1rem);
        width: calc(98% - 1rem);
        margin: .5rem auto;
        height: 110vh;
    }
    .short-modal-dialog .ratio {
    --bs-aspect-ratio: 220.78% !important;
}

}
/* Registering the custom CSS variables as color types */
@property --light-color-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #e0f2fe; /* Light Blue */
}

@property --light-color-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fef3c7; /* Light Yellow */
}

body {
  /* Apply the variables to a radial or linear gradient */
  background: radial-gradient(circle at top left, var(--light-color-1), var(--light-color-2));
  
  /* Runs the color swapping animation back and forth */
  animation: morphColors 10s ease-in-out infinite alternate;
}

/* Smoothly swap the colors directly within the keyframes */
@keyframes morphColors {
  0% {
    --light-color-1: #e0f2fe; /* Light Blue */
    --light-color-2: #fef3c7; /* Light Yellow */
  }
  50% {
    --light-color-1: #fce7f3; /* Light Pink */
    --light-color-2: #e0e7ff; /* Light Indigo */
  }
  100% {
    --light-color-1: #dcfce7; /* Light Green */
    --light-color-2: #fef3c7; /* Light Yellow */
  }
}