@import './header.css';
@import './lang-picker.css';
@import './timer.css';
@import './loss.css';
@import './aside.css';
@import './filters-table.css';
@import './table.css';
@import './bar.css';
@import './social.css';
@import './faq.css';
@import './crimes.css';

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-VariableFont_slnt,wght.ttf') format('woff2 supports variations'),
       url('../fonts/inter/Inter-VariableFont_slnt,wght.ttf') format('woff2-variations');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}


:root {
  --contrast-color: #EB1E1E;
  --contrast-alt-color: #FF2C2C;

  --primary-bg-color: #161515;
  --main-bg-color: #272727;
  --contrast-bg-color: var(--contrast-color);
  --contrast-alt-bg-color: var(--contrast-alt-color);

  --main-text-color: #D8D8D8;
  --text-color-grey: #848484;
  --text-color-green: #79D59E;
  --text-contrast-color: var(--contrast-color);

  --main-link-color: #D8D8D8;
  --main-link-hover-color: #FFFFFF;

  --border-color: #404040;
  --border-light-color: #FFFFFF;

  /* header */
  --header-height: 65px;
  --header-height-desktop: 78px;

  /* bar */
  --bar-color-border: #2D2D2D;
}


html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;

  margin: 0px;
  min-height: 100%;
  background: var(--main-bg-color);
  color: var(--main-text-color);
  font: 1em 'Inter', sans-serif;
}

a {
  color: var(--main-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--main-link-hover-color);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h2{
  font-size: 22px;
  text-transform: uppercase;
}
p:not([class]){
  font-size: 14px;
  line-height: 24px;
}


/* GENERAL */
.is-overflow{
  overflow: hidden;
}
.dot-icon {
  width: 13px;
  height: 13px;
  border: 1px solid var(--contrast-color);
  padding: 3px;
}

.dot-icon::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--contrast-color);
}

.hide { /* You can play with the seconds to change the "animation" */
   display: none;
}
.show { /* You can play with the seconds to change the "animation" */
    display: flex;
}

@keyframes hide {
  0%{
    transform: scale(1);        
  }
  100% {
    transform: scale(0);        
    width: 0;
    height: 0;
    margin: 0;
  }
}
@keyframes show {
  0%{
    transform: scale(0);     
    width: 0;
    height: 0;
    margin: 0;   
  }
  100% {
    transform: scale(1);    
  }
}

/* WRAPPER */

#wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  padding-right: 12px;
}
.container{
  width: 100%;
  max-width: 484px;
  margin-left: auto;
  margin-right: auto;
}
.bg{
  background: url(../images/background-01.jpg) top center no-repeat;
  background-size: cover;
}
#inner-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 484px;
  min-width: 0;
  margin: 0 auto;
}
.main-section__info{
  margin-bottom: 25px;
}
.main__title{
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.main__subtitle{
  color: var(--text-color-grey);
  line-height: 26px;
}
.main__subtitle span{
  color: var(--main-text-color);
}
.main__btn--desktop{
  display: none;
}
.main__btn--mobile{
  margin-top: 55px;
}
.o-color-red{
  color: var(--contrast-color);
  font-weight: 700;
}
@media (min-width: 768px) {
  #inner-wrapper {
    display: block;
    max-width: 1180px;
    width: 100%;
    padding-top: 42px;
  }
  #main-section {
    float: left;
    width: 55%;
  }
  .container{
    max-width: 1180px;
    width: 100%;
  }
  #main-section.no-aside {
    width: auto;
    min-height: 100%;
  }

  #aside {
    padding-top: 180px;
    width: 42%;
    margin-left: 58%;
  }
  .main-section__info{
    width: 55%;
    margin-bottom: 40px;
  }
  .main__btn--desktop{
    display: block;
  }
  .main{
    padding-bottom: 70px;
  }
  .main-section__top{
    padding-bottom: 40px;
  }
}

@media (min-width: 1000px) {
  #wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  #main-section {
    width: 65%;
  }

  #aside {
    width: 35%;
    margin-left: 65%;
  }
  .main{
    padding-bottom: 115px;
  }
  .main-section__top{
    padding-bottom: 80px;
  }
}

#main-section {
  display: flex;
  flex-direction: column;
}

#main-section.no-aside {
  flex: 1 1 auto;
}



.support-ukraine-footer-button {
  display: block;
  padding: 12px 0;

  text-align: center;
  background-color: var(--contrast-bg-color);
  color: #FFFFFF;
  font-weight: 600;
  text-transform: uppercase;
}

.support-ukraine-footer-button:hover {
  background-color: var(--contrast-alt-bg-color);
}

@media (min-width: 768px) {
  .support-ukraine-footer-button {
    display: none;
  }
}