/*@import url('//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;0,900;1,400&display=swap');*/
@font-face {
  font-family: "Graphik Web Regular";
  src: url("//apps.brunolobo.xyz/chart-window/fonts/105007d99d9df64c50cc24d696d79555.eot");
  src: url("//apps.brunolobo.xyz/chart-window/fonts/105007d99d9df64c50cc24d696d79555.eot?#iefix")
      format("embedded-opentype"),
    url("//apps.brunolobo.xyz/chart-window/fonts/105007d99d9df64c50cc24d696d79555.woff2")
      format("woff2"),
    url("//apps.brunolobo.xyz/chart-window/fonts/105007d99d9df64c50cc24d696d79555.woff")
      format("woff"),
    url("//apps.brunolobo.xyz/chart-window/fonts/105007d99d9df64c50cc24d696d79555.ttf")
      format("truetype");
}

* {
  /*font-family: "Graphik Web Regular",'Roboto', sans-serif;*/
  font-family: "Graphik Web Regular", "Arial",sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.topo, .footer{
  background-color: #263c56;
}
.logo {
  background-image: url(https://apps.brunolobo.xyz/chart-window/img/brunolobo-white.svg);
  background-repeat: no-repeat;
  background-size: 234px 43px;
  min-width: 234px;
  height: 43px;
  background-position: 50% center;
  /*left: calc(50% - 234px/2);*/
  padding: 35px 0px 35px;
}
.chart {
  background-image: url(https://apps.brunolobo.xyz/chart-window/img/chart.png?v=2);
  background-repeat: no-repeat;
  background-position: 50% center;
  padding: 35px 0px 35px;
  --height: 500px;
  background-size: var(--height) calc(var(--height) / 1.7);
  min-width: var(--height);
  height: calc(var(--height) / 1.7);
}
.detail {
  max-width: 500px;
  border: solid 1px black;
}
.notebook {
  background-image: url(https://apps.brunolobo.xyz/chart-window/img/pc.png?v=2);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  --height: 300px;
  background-size: var(--height) calc(var(--height) / 1.715);
  min-width: var(--height);
  height: calc(var(--height) / 1.715);
}
@media only screen and (max-width: 800px) {
  .notebook {
    background-position: 50% 50%;
  }
  .chart {
    --height: 400px;
  }
}
@media only screen and (max-width: 400px) {
  .chart {
    --height: 300px;
  }
}

.bigText {
  color: #ffffff !important;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.smallText {
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 400;
  padding-bottom: 15px;
  font-style: italic;
  letter-spacing: 1px;
}

.cardHeader {
  --fsize: 25px;
  font-size: var(--fsize);
  line-height: calc(var(--fsize) / 0.8727);
  letter-spacing: 0.2px;
  font-style: normal;
  font-weight: normal;
}
.cardSubText{
  padding-top:15px;
  --fsize: 17px;
  font-size: var(--fsize);
  line-height: calc(var(--fsize) / 0.8727);
  letter-spacing: 0.5px;
}
.button {
  background-color: #2091F9;
  border-radius: 35px;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin: 4px 2px;
}