/* 
  26/03/2024
  Most content from the embedded css of the 2021 content
 */

/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Open+Sans:wght@300&display=swap'); */

p {
  font-family: 'Open Sans', sans-serif;
}

li {
  font-family: 'Open Sans', sans-serif;
  font-size: 115%;
}

display-1, display-2, display-3, display-4, display-5 { 
   font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5 { 
   font-family: 'Montserrat', sans-serif;
   font-weight: 300;
}

/* a {
  color: #6db3ed;
  text-decoration: none;
} */

nav p a {
  color: #808080;
  text-decoration: none;
  font-size: 125% !important;
}

a:hover {
  color:  #ee6e73 !important;
  text-decoration: underline;
}

/* .para a {
  color: #0D234C;
  font-size: 125% !important;
}

.para a:link { 
  text-decoration: underline; 
}

.para a:visited { 
  text-decoration: underline; 
}

.para a:hover { 
   color: #B73334;
   text-decoration: underline;
}

.para a:active { 
  text-decoration: underline; 
} */

.para { 
  font-size: 125% !important;
  font-family: 'Open Sans', sans-serif;
}

.para-first { 
  font-size: 125% !important;
  font-family: 'Open Sans', sans-serif;
  margin-top: 0.5em;
}

.note {
  color: gray;
  font-size: 75% !important;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0em;
}

.small {
  font-size: 85% !important;
}

.indent {
  margin-left: 2em;
}

.list { 
  font-size: 115% !important;
  font-family: 'Open Sans', sans-serif;
}

.carmine-pink { 
   color: #ee6e73 !important;
}

.faux-fawn { 
   color: #eda76d !important;
}

.faux-aero { 
   color: #6db3ed !important;
}


.link-colour { 
   color: #ee6e73 !important;
}

.image-container {
  position: relative;
  zmax-width: 800px;
  margin: 0 auto;
  border-radius: 5px;
}

.image-container .content {
  position: absolute;
  top: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  border-radius: 5px;
}

/* 
I couldn't get Bootstrap 5 RFS to work properly, so I used this:
https://css-tricks.com/snippets/css/fluid-typography/
*/

@media screen and (min-width: 320px) {
  .shrink {
    font-size: calc(28px + 6 * ((100vw - 320px) / 680)); /* */
  }
}

@media screen and (min-width: 991px) {
  .shrink {
    font-size: 3.2rem;
  }
}
 

  .highlight {
    font-weight: 500;
    color: #B73334;
  }