www/src/static/css/homepage.css

/* General/Utilities */
@media only screen and (min-width: 1792px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
  }

  .container{
    max-width: none;
    padding: 4.5vw 8.371vw 4.185vw 8.371vw;
  }


}

@media only screen and (min-width: 1200px) and (max-width: 1792px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 2.2vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.5vw 8.371vw 4.185vw 8.371vw;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 2.2vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.2vw 10vw 4.185vw 10vw !important;
  }

  .hero-float{
    float: none !important;
  }

}

@media only screen and (min-width: 768px) and (max-width: 992px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 5vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 5.040vw 4.185vw 5.040vw !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 6.65vw !important;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 6.510vw 4.185vw 6.510vw;
  }
}

@media only screen and (max-width: 576px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 5.5vw !important;
  }

  section{
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  .container{
    max-width: 1920px;
    padding: 5.5vw 3vw !important;
  }
}

/* Brand Colors */

.teal{color:#00ffd0;}
.black{color:#1a1a1a;}
.dark-gray{color:#4d4d4d;}
.grid-gray{color:#949494;}
.light-gray{color: #e1e1e1;}
.white{color:#ffffff;}
.purple{color: #8000ff;}
.orange{color: #ff4100;}

/* Background Colors */

.teal-bg{background-color:#00ffd0;}
.black-bg{background-color: #1a1a1a;}
.dark-gray-bg{background-color: #4d4d4d;}
.grid-gray-bg{background-color: #949494;}
.light-gray-bg{background-color: #e1e1e1;}
.white-bg{background-color: #ffffff;}
.purple-bg{background-color: #8000ff;}
.orange-bg{background-color: #ff4100;}

/* Spacers & Dividers */

hr{
  border-bottom: 2px solid #949494 !important;
  opacity: 1;
  margin: 0px !important;
}

mark{
  background-color: #00ffd0 !important;
  color: #1a1a1a;
}

@media only screen and (min-width: 1200px) {

  .lead-text-container{
    border: 1px solid #949494 !important;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12.556vw;
    margin-top: 1vw;
  }

  .hero-bottom{
    background-image: url("/Images/x-large-grid.svg");
    background-attachment: scroll;
    background-position: top;
    background-repeat: repeat;
    background-size: cover;
    height: 4.185vw;
  }

  .impact-section{

  }

  .package_before{
    background-image: url("/Images/home-x-large-grid-generative-art_half.gif") !important;
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-position: right;
    background-size: contain;
  }

  .package-cta{
    background-image: url("/Images/x-large-grid.svg");
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-size: cover;
  }

  .statistics{
    background-image: url("/Images/x-large-stats-grid.svg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: repeat;
    background-size: cover;
  }

  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    max-width: 33.3vw;
    background-color: #1a1a1a;
    position: relative;
    z-index:2;
  }

  .stat-head{
    font-size: 1.339vw;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 6.696vw;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .partners{
    background-image: url("/Images/x-large-grid.svg");
    background-attachment: scroll;
    background-repeat: repeat;
    background-size: cover;
  }

  .mobile-grid-element{
    display: none;
  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  .hero-section{
    background-image: url("/Images/large-grid.svg") !important;
    background-attachment: scroll;
    background-position: top;
    background-repeat: repeat !important;
    background-size: cover !important;
  }

  .lead-text-container{
    border: 1px solid #949494;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vw;
    margin-top: 0.4vw;
    margin-bottom: 0px;
  }

  .package_before{
    background-image: url("/Images/home-large-grid-generative-art_half.gif") !important;
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-position: right;
    background-size: contain;
  }

  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    max-width: 30vw;
    background-color: #1a1a1a;
    position: relative;
    z-index:2;
  }

  .stat-head{
    font-size: 1.339vw;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 6.696vw;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .mobile-grid-element{
    display: none;
  }

}


@media only screen and (min-width: 768px) and (max-width: 992px) {

  .hero-section{
    background-image: url("/Images/large-grid.svg") !important;
    background-attachment: scroll;
    background-position: top;
    background-repeat: repeat-y !important;
    background-size: cover !important;
  }

  .lead-text-container{
    border: 1px solid #949494;
    width: 70vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vw;
    margin-top: 1.1vw;
    margin-bottom: 0px;
  }

  .package_before{
    background-image: url("/Images/home-large-grid-generative-art_half.gif") !important;
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-position: right;
    background-size: contain;
  }


  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    max-width: 41.741vw;
    background-color: #1a1a1a;
    position: relative;
    z-index:2;
  }

  .stat-head{
    font-size: 1.339vw;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 6.696vw;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .mobile-grid-element{
    display: none;
  }

}

@media only screen and (min-width: 576px) and (max-width: 768px) {

  .hero-section{
    background-image: url("/Images/medium-grid.svg");
    background-attachment: scroll;
    background-position: top;
    background-repeat: repeat-y;
    background-size: contain;
  }

  .lead-text-container{
    border: 1px solid #949494;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20.2vw;
    margin-top: .5vw;
    margin-bottom: 0;
  }

  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    max-width: 41.741vw;
    background-color: #1a1a1a;
    position: relative;
    z-index:2;
  }

  .stat-head{
    font-size: 1.339vw;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 6.696vw;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .mobile-grid-element{
    display: none;
  }

}

@media only screen and (max-width: 576px) {

  .hero-section{
    background-image: url("/Images/mobile-grid.svg");
    background-attachment: scroll;
    background-position: top;
    background-repeat: repeat;
    background-size: cover;
    padding-top: 7vw;
  }

  .hero-float{
    float: none !important;
  }

  .impact-section{
    padding-top: 20vw;
    padding-bottom: 20vw;
  }

  .package-before-section{
    padding: 4vw !important;
  }

  .package_before{
    padding-top: 20vw;
    padding-bottom: 20vw;
  }

  .package-grid-header{
    padding-left:7vw !important;
    padding-right:7vw !important;
  }

  .package-cta-section{
    padding: 4vw !important;
  }

  .stat-small-text{
    text-align: center;
  }

  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    width: 100%;
    background-color: #1a1a1a;
    position: relative;
    float:none !important;
    margin-top: 0px !important;
    margin-bottom: 0vw !important;
    z-index:2;
  }

  .stat-head{
    font-size: 3vw;
    text-align: center;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 14vw;
    text-align: center;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .partners{
    padding: 4vw !important;
  }

  .partner-logo{
    padding: 0px !important;
  }

  #binance-logo{
    width: 60% !important;
    margin-bottom: 5vw !important;
  }

  .footer{
    padding: 4vw !important;
  }

  .footer-top{
    margin-bottom: 10vw;
  }

  .mobile-grid-element{
    width: 100%;
  }

}

@media only screen and (min-width: 576px) {

  #impact-break{
    display:none;
  }
}


.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex.column {
  flex-direction: column;
}