html {
   scroll-behavior: smooth;
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;

 }

 /* Color the background and add some space to the sides of the main column. */
 .container-fluid {
   background-color: #F8B003;
   /* We use !important to override the padding setting that Bootstrap already put for the container-fluid class. */
   padding-left: 10% !important;
   padding-right: 10% !important;
 }

 /* Color the main column background white. */
 .col {
   background-color: white;
 }

 .navbar {
   box-shadow: 0px 4px 8px rgba(17, 17, 17, 0.2);
 }

 /* Bold the navbar's brand and put spacing on its left so it shifts right. */
 .navbar-brand {
   font-weight: bold;
   color: indianred;
 }

 .components {
  font-size: large;
  text-transform: capitalize;
  color: blue;
  margin-top: 5px;
  margin-left: 5px;
}

 #subjects {
   position: relative;
   background-image: url("images/wave.webp");
   height: 250px;
   background-size: cover;
 }

 .a {
   text-align: center;

 }

 .p {
   margin-left: 5px;
 }

 .empic {
   background-image: url("/images/em.png");
   background-size: cover;
   height: 250px;
 }

 .button a {
   color: #ffffff;
   text-decoration: none;
 }

 .button:hover a {
   color: #ffffff;
   text-decoration: none;
 }

 @media screen and (min-width: 600px) {
   #subjects {
     height: 500px;
   }

   #top {
     width: 100%;
     height: 25px;
   }

 }

 @media screen and (min-width: 768px) {
   .content>.empic,
   .content>.components {
     align-self: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     flex-wrap: wrap;
     max-width: 80%;
     margin-top: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .content>.empic,
   .content>.components {
     max-width: 50%;
   }
 }