/* Styles for the MSP application */

/* default theme colour palette */
.default {
  --primary-blue: #4fabec;
  --secondary-blue: #285779;
  --mid-blue: #08436d;
  --dark-blue: #063455;
  --gradient-top: rgb(82, 125, 206);
  --gradient-bottom: rgba(58, 92, 155);
  --alt-white: white;
  --grey: white;
  --text-color: black;
  transition: all 0.2s ease-in-out;
}

/* dark theme colour palette */
.dark {
  --primary-blue: #2e2e40;
  --secondary-blue: #33313f;
  --mid-blue: #261c42;
  --dark-blue: #18122b;
  --gradient-top: rgb(61, 49, 94);
  --gradient-bottom: rgb(1, 17, 46);
  --alt-white: #382c4b;
  --grey: #373441;
  --text-color: white;
  transition: all 0.2s ease-in-out;
}


/************* Main Elements *************/


/* font import */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Source+Sans+Pro:wght@300;400&display=swap");


body {
  /* gradient applied to whole body */
  background: linear-gradient(
    to bottom,
    #4fabec,
    #285779
  );
  font-family: "IBM Plex Sans", sans-serif;
  margin: 0;
  height: 100vh; /* full height */
  display: flex; /* allow items to be laid out in a column */
  flex-direction: column; /* stack items vertically */
}


/* Styling for small screens - Bootstrap */
@media (max-width: 991.98px) {

  
  body {
    background: linear-gradient(
      to bottom,
      #285779,
      #285779
    );
    font-family: "IBM Plex Sans", sans-serif;
    margin: 0;
    height: 100vh; /* full height */
    display: flex; /* allow items to be laid out in a column */
    flex-direction: column; /* stack items vertically */
  }
}