/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Goldman&family=Source+Sans+3:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&family=Open+Sans:wght@300;400&family=Source+Sans+3:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Titillium+Web:wght@200;300;400&display=swap');
@import "font-awesome";

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(229, 56.29%, 22.7%);
  --first-color-alt: rgb(25, 37, 91);
  --title-color: hsl(231, 100%, 96%);
  --text-color: hsl(0, 0%, 100%);
  --text-color-light: hsl(0, 0%, 100%);
  --body-color: hsla(230, 94%, 6%, 0.986);
  --container-color: hsl(27, 4%, 95%);


  /* Change the first number */
  /* Blue: 207 - Purple: 250 - Pink: 356 - Teal: 174 */
  --gradient-color: linear-gradient(180deg,
                      hsla(229, 56.29%, 22.7%),
                      rgb(255, 254, 253));

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  /* --body-font: 'Source Sans 3', sans-serif; */
  --body-font: 'Titillium Web', sans-serif;
  --title-font: 'Goldman', sans-serif;
  --biggest-font-size: 1.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.75rem;
  --h3-font-size: 1rem;
  --h4-font-size: .875rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 3rem;
    --h1-font-size: 1.75rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --larger-font-size: 2.25rem;
    --normal-font-size: 1.25rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
    --tiny-font-size: .688rem;
  }
}

/*=============== BASE ===============*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: var(--body-font);
  font-size: var(---font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background .1s; /* for dark mode animation */
}

main{
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

h1, h2, h3, h4, h5, h6{
  color: var(--title-color);
  font-family: var(--title-font);
}

h5{
  font-size: var(--normal-font-size);
}

p{
  font-family: var(--body-font);
  font-weight: 400;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

hr{
  margin-top: 3.25rem;
}

.logo__img{
  max-width: 1.25rem;
  height: auto;
  margin-bottom: 1.25rem;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container{
  max-width: 1024px;
  margin-inline: 1.25rem;
}

.btn-ghost {
  color: #eaedfd;
  padding: 8px 24px;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  font-size: var(--small-font-size);
  margin-top: 1.25rem;
  border: 1px solid #585858;
}

.btn-ghost:hover {
  opacity: .7;
  color: #ffffff;
  background-color: #070c20;
  /* border: 2px solid #4A4A4A; */
  border: 1px solid #585858;
}

.grid{
  display: grid;
  /* gap: 1.5rem; */
  gap: 1.25rem;
}

.section{
  padding-block: 2.5rem;
}

.section__border{
  border-bottom: 1px solid var(--title-color);
  padding-bottom: 3.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section__title,
.section__subtitle{
  text-align: center;
}

.section__title{
  font-size: var(--h1-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: .25rem;
}

.section__subtitle{
  display: block;
  font-size: var(--small-font-size);
  color: var(--first-color);
  margin-bottom: 3rem;
}

/*=============== HEADER & NAV ===============*/
.container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  justify-content: space-between;
  padding: 2.25rem 4.5rem;
}

.navbar-brand{
  margin-right: 0px;
}

.navbar img {
  width: 12rem;
}

.navbar h1 {
  text-align: center
}

.navbar h3{
  color: var(--title-color);
}

/*=============== MAIN ===============*/
.content__container{
  display: grid;
  grid-template-columns: 2fr 1fr;
}

/*=============== DESCRIPTION ===============*/
.description__section {
  background-color: #0a1334;
  border-radius: 8px;
  padding: 2rem 2.25rem;
  box-shadow: 0 0 16px rgba(0,0,0,0.2);
}

.description__section h2{
  /* font-weight: bold; */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.description__section p{
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.75rem;
  color: #ebeeff;
  opacity: .8;
}

/*=============== CHART ===============*/
.charts__container{
  display: flex;
  justify-content: center;
  background-color: #0a1334;
  margin: 2rem 0px;
  border-radius: 8px;
}

.charts__container h4{
  padding-bottom: 6px;
  text-align: center;
}

.description__section, .charts__container, .key__table, .info__container{
  box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 100%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
    0 3.5px 6px hsla(0, 0%, 100%, 0.09);
}

.info__container{
  box-shadow:
  inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
  /* shadow ring 👇 */
  0 0 0 1px hsla(0, 0%, 100%, 0.05),
  /* multiple soft shadows 👇 */
  0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
  0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
  0 3.5px 6px hsla(0, 0%, 100%, 0.09);
}


.chart__container{
  height: auto;
  border-radius: 8px;
  background-color: #050b20;
  padding: 3.25rem;
  box-shadow:
  inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
  /* shadow ring 👇 */
  0 0 0 1px hsla(0, 0%, 100%, 0.05),
  /* multiple soft shadows 👇 */
  0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
  0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
  0 3.5px 6px hsla(0, 0%, 100%, 0.09);
}


.chart__container img{
  width: 100%;
  height: auto;
}


/*=============== KEY PERFORMANCE & INFORMATION ===============*/
.key__table{
  width: 100%;
  background-color: rgb(25 37 91 / 40%);
  padding: 20px 28px;
  border-radius: 8px;
  padding-bottom: 1px;
}

.key__table h4{
  padding-top: .75rem;
  padding-bottom: 1rem;
}

.key__table table{
  opacity: .8;
}

.key__table th, .key__table td {
  text-align: right;
}

/* eoy */
#eoy, #ddinfo{
  margin-top: 2rem;
}

.key__table th{
  font-weight:700;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  font-size: var(--small-font-size);
}

.key__table tr td{
  font-size: var(--small-font-size);
}

/*=============== KEY INFORMATION ===============*/
.info__container{
  background-color: #0a1334;
  border-radius: 8px;
  padding: 32px;
  margin-top: 2rem;
}

.info__container h3{
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  border-radius: 8px;
  padding-bottom: 12px;
}

.key__links{
  padding-top: 1.25rem;
}

.key__links .fa-diamond{
  color: #fcbf00;
  padding-right: 12px;
  align-items: center;
  font-size: x-small;
  padding-bottom: 12px;
}

.info__container hr{
  margin: 0px;
  margin-top: 2rem;
}

/*=============== CONTACT ===============*/
.contact{
  justify-content: center;
  display: flex;
  margin-top: 1.5rem;
  opacity: .8;
}

.contact__link a{
  color: var(--title-color);
  transition: opacity 0.3s ease;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
  border: 2px solid var();
}

.contact__link a:hover{
  color: hsl(231deg 74% 97.71%);
  opacity: 1;
}

.disclaimer__container{
  display: inline-grid;
  margin-top: 1.25rem;
}

.disclaimer__container p{
  margin-bottom: 0px;
}
/*=============== FOOTER ===============*/
.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  color: rgb(255 255 255 / 65%);
  margin-bottom: 1.25rem;
  padding: 0px 2.5rem;
}

/* MODAL */
.modal-body .modal-title{
  text-shadow: none;
}

.modal-content{
  background-color: var(--body-color);
}


.modal-body ul{
  list-style-type: disc;
  margin-bottom: 15px;
  margin-top: 5px;
}

.modal-body li{
  margin-bottom: 5px;
}

.copyright__text{
  font-size: 12px;
  font-weight: 600;
  line-height: 27px;
  color: #ebeeffba;
  text-align: justify;
}

/*=============== BREAKPOINT ===============*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .charts__container{
    display: flex;
    justify-content: center;
    background-color: #050b20;
    margin: 0px;
    border-radius: 0px;
    padding: 0px;
    padding-bottom: 0px;
    box-shadow: none;
  }

  .chart__container {
    margin: 1.5rem 0rem;
    padding-bottom: 3.25rem;
    background-color: #091334;
    padding: 2rem;
  }

  .copyright__text{
    font-size: 10px;
    width: 228px;
    line-height: 16px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  h1 {
    font-size: var(--h1-font-size);
  }

  h4 {
    font-size: var(--h2-font-size);
  }

  .container-fluid {
    margin-bottom: -1.75rem;
  }

  .navbar {
    justify-content: space-between;
    padding: 1rem 1.25rem;
  }

  .navbar .navbar-brand img {
    width: 10.25rem;
  }

  .container{
    max-width: 1024px;
    margin-inline: .75rem;
  }

  .charts__container{
    display: flex;
    justify-content: center;
    background-color: #050b20;
    margin: 0px;
    border-radius: 0px;
    padding: 0px;
    padding-bottom: 0px;
    box-shadow: none;
  }

  .chart__container {
    margin: 1.5rem 0rem;
    padding-bottom: 3.25rem;
    background-color: #091334;
    padding: 2rem;
  }

  hr{
    margin-top: 1.5rem;
  }

  #eoy, #ddinfo {
    margin-top: 1.5rem;
  }

  .info__container {
    margin-top: 1.5rem;
  }

  .footer{
    padding: 0px 2.5rem;
  }

  .copyright__text{
    font-size: 10px;
    width: 228px;
    line-height: 16px;
  }

  .footer{
    margin-bottom: 0px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  h1{
    font-size: var(--h1-font-size);
  }

  .container-fluid {
    margin-bottom: -1.25rem;
  }

  .navbar{
    padding: 0px 1.5rem;
  }

  .navbar .navbar-brand img {
    width: 12rem;
  }

  .main {
    padding: 0px 3.25rem !important;
  }

  .container{
    max-width: 1024px;
    margin-inline: 1.25rem;
  }

  .charts__container{
    display: flex;
    justify-content: center;
    background-color: #0a1334;
    margin: 2rem 0px;
    border-radius: 8px;
    padding: 1rem 2rem;
    padding-bottom: 1rem;
    box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 100%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
    0 3.5px 6px hsla(0, 0%, 100%, 0.09);
  }

  .chart__container{
    height: auto;
    border-radius: 8px;
    background-color: #050b20;
    padding: 3.25rem;
    margin: 2rem 1rem;
    padding-bottom: 3.25rem;
    box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 100%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
    0 3.5px 6px hsla(0, 0%, 100%, 0.09);
  }

  #eoy, #ddinfo{
    margin-top: 2rem;
  }

  #monthly_heatmap img {
    width: 108%;
    height: auto;
  }

  .monthly_returns_container h4 {
    padding-bottom: 0px;
  }

  #monthly_dist {
    padding-right: 16px;
  }

  .info__container {
    margin-top: 2rem;
  }

  hr{
    margin-top: 3.25rem;
  }

  .footer{
    padding: 0px 1.5rem;
    margin-bottom: 1rem;
  }

  .copyright__text{
    font-size: 12px;
    width: 420px;
  }
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) {
  .main {
    padding: 0px 12.25rem !important;
  }

  .container-fluid {
    margin-bottom: 0px;
  }

  .container-fluid h1{
    font-size: 36px;
  }

  .navbar {
    padding: 0px 2.75rem;
  }

  .navbar .navbar-brand img {
    width: 13.25rem;
  }

  .container{
    max-width: 1024px;
    margin-inline: 1.25rem;
  }

  .charts__container{
    display: flex;
    justify-content: center;
    background-color: #0a1334;
    margin: 2rem 0px;
    border-radius: 8px;
    padding: 1.25rem 2.25rem;
    box-shadow:
    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 100%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 100%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 100%, 0.045),
    0 3.5px 6px hsla(0, 0%, 100%, 0.09);
  }

  .charts__container h4 {
    padding-bottom: 6px;
    padding-left: 20px;
  }

  .log_return_chart {
    margin-top: 1.75rem;
  }

  .modal-dialog {
    padding: 0px 2.25rem !important;
    margin: 1.75rem auto;
  }

  #eoy, #ddinfo{
    margin-top: 2rem;
  }

  #log_returns {
    padding-right: 36px;
  }

  .info__container {
    margin-top: 1.5rem;
  }

  .mothly_return_chart, h4 {
    padding-right: 48px;
  }

  hr{
    margin-top: 3.25rem;
  }

  .copyright__text{
    font-size: 12px;
    width: 420px;
  }

  .footer{
    margin-bottom: 1rem;
  }
}