/* main css file */

/** sets box-sizing to border-box for easier sizing of elements */

html{
  box-sizing:border-box;
}

*, *::before, *::after{
  box-sizing:inherit;
}

*{
  color: rgb(0, 0, 38);
  padding:0;
}

.hero, footer, .footer-section {
    background-color:rgb(10, 0, 66);
}

/** hero footer text white **/
navigation a,footer p,.hero p, .hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6, .hero a {
    color: white;
}

.main-section{
  flex-grow:1;
}
.footer-selection{
  margin:0;
  align-self: center;
  flex-grow:0;
}
footer{
  margin:0;
  padding: 0.5rem 0;
}

footer p{
  opacity: 0.8;
  font-size: 0.9rem;
  margin:0;
  text-align: center;
}

/** styles navigation bar */

navigation {
  display:block;
  box-sizing: border-box;
  width:80vw;
  margin: 0 10vw;
  padding-top:1rem;
  padding-bottom:1rem;
}

navigation ul{
  list-style-type: none;
  display: flex;
  flex-wrap:wrap;
  justify-content: flex-end;
  gap:1rem;
  margin:0;
  padding-left:0;
}

navigation li{
flex:0 0 auto;
margin:0;
}

navigation .logo{
  margin-right:auto;
  margin-left:0;
}

/* styles body */
body {
  display: flex;
  flex-direction: column;
  min-height:100vh;
  font-family: Georgia, 'Times New Roman', Times, serif, Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  line-height: auto;
  padding: 0;
  margin:0;
  background-color: #dbffef;
}

/* styles text */
h1, h2, h3, h4, h5, h6, strong {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  line-height: 1.3;
}

p{
   padding-bottom:0.6rem;
   padding-top:0.2rem;
}

li,h1,h2,h3,h4,h5,h6,textarea
{
  margin-bottom:0.4rem;
}

/* adds indentation to lists */
ul,ol{
  display:block;
  margin-left:2rem;
}

/* aligns article body to the centre of the page */
article{
width:80vw;
margin: 0 auto;
}

/* adds style to table of contents section */
nav{
  border-left:2px solid black;
  padding-left: 1rem;
}

/* adds style to code text */
code {
  
  font-family: monospace, serif, times, sans-serif;
  font-size: 0.9em;
  background-color: rgb(125, 221, 188);
  border: 1px solid #370000;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  display: inline-block;
}

/* adds style to code-boxes */
pre {
  font-family: monospace, serif, times, sans-serif;
  font-size: 0.9em;
  background-color: #fffb7a8c;
  border: 1px solid #001406;
  padding: 12px;
  border-radius: 6px;
  width:auto;
  height:auto;
  white-space: pre-line;
  overflow-x:auto;
}

.rendered-html  {
  font-family: monospace, serif, times, sans-serif;
  font-size: 0.9em;
  background-color: #fffb7a5d;
  border: 1px solid #001406;
  padding: 12px;
  border-radius: 6px;
  width:auto;
  height:auto;
  overflow-x: auto;
}

/* styles links */
.nav-link {
  color:black;
}

.nav-link:hover {
  text-decoration:underline;
  color:rgb(0, 0, 0);
}

a{
  text-decoration: none;
  color: rgb(0, 0, 102);
}

/* styles images to be responsive */
img {
  display: block;
  max-width: 100%;
  max-height:75vh;
  width:auto;
  height: auto;
  margin:1rem auto;
}

/* styles the text selection */
::selection {
  background: rgb(139, 228, 194);
  color: black;
}




.carousel-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1rem;
    
    gap:0.5rem;
    margin-bottom:0.5rem;
}

.carousel-image img{
    min-width:15vw;
    max-width: 20vw;
    max-height:20vh;
    height: auto;
    aspect-ratio: 1/1;
    border-radius:0.5em;
    object-fit: cover;
    
    margin:0.5rem;
}

.carousel-image img.symbol{
  object-fit: contain;
}

.carousel-item,a.flex-link{
  flex:1;
  min-width: 220px;
  height: auto;
  max-width: auto;
  display: flex;
  flex-direction: row;
  align-content: flex-start; 
  border: 1px solid black;
  border-radius:1rem;
  gap:1rem;
}

.carousel-text{
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

.carousel-text h3{
  flex-grow:1;
}

.carousel-item div.carousel-text{
  flex:1 1 auto;
  
}


/**
*{
  border: 1px solid red;
}

**/