@import url(https//db.onlinewebfonts.com/c/ccf84ac8669d7181bc43e0a3e758fe0f?family=Geogrotesque);

@font-face {font-family: "Geogrotesque"; src: url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.eot"); 
    src: url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.eot?#iefix") format("embedded-opentype"), 
    url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.woff2") format("woff2"), 
    url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.woff") format("woff"), 
    url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.ttf") format("truetype"), 
    url("https://db.onlinewebfonts.com/t/ccf84ac8669d7181bc43e0a3e758fe0f.svg#Geogrotesque") format("svg"); }

body{
    height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.9);
    font-family: Geogrotesque;
    background-image: url("/assets/bg-image.png");
    background-repeat: no-repat;
    background-size: cover;
}

a{
    text-decoration: none;
}

h3{
    margin: 0;
}

.title, .description {
    color: #00ff00;
}

.flags{
    display: flex;
    flex-direction: row;
}
.middle{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.flags .flag{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flag span{
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.58px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.copyright{
    color: #a4a4a5;
    margin-bottom: 1%;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #a4a4a5;
}    

.description{
  font-family: Geogrotesque;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.55px;
  text-align: center;
  margin-top: 0;
}

@media screen and (max-width: 576px){
    .monster-logo{
        padding-top: 15%;
        width: 60%;
        height: 180px;
    }
    .title{
        margin: 8% 0 4% 0;
        font-size: 22px;
    }
    .description{
      width: 80%;
      font-size: 12px;
    }
    .flag img{
        width: 60px;
        heigth: 60px;
    }
    .flag-tr{
        margin: 0 40px;
    }
    .flag span{
        font-size: 14px;
    }
    .copyright{
        font-size: 12px;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px){
    .monster-logo{
        padding-top: 15%;
        width: 32%;
        height: 180px;
    }
    .title{
        margin: 6% 0 3% 0;
        font-size: 22px;
    }
    .description{
      width: 80%;
      font-size: 14px;
    }
    .flag img{
        width: 66px;
        heigth: 66px;
    }
    .flag-tr{
        margin: 0 50px;
    }
    .flag span{
        font-size: 14px;
    }
    .copyright{
        font-size: 12px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    .monster-logo{
        padding-top: 15%;
        width: 30%;
        height: 180px;
    }
    .title{
        margin: 6% 0 3% 0;
        font-size: 24px;
    }
    .description{
      max-width: 80%;
      font-size: 16px;
    }
    .flag img{
        width: 66px;
        heigth: 66px;
    }
    .flag-tr{
        margin: 0 50px;
    }
    .flag span{
        font-size: 14px;
    }
    .copyright{
        font-size: 12px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px){
    .monster-logo{
        padding-top: 10%;
        width: 200px;
        height: 130px;
    }
    .title{
        margin: 3% 0 1.5% 0;
        font-size: 24px;
    }
    .description{
      max-width: 80%;
      font-size: 14px;
    }
    .flag img{
        width: 60px;
        heigth: 60px;
    }
    .flag-tr{
        margin: 0 60px;
    }
    .flag span{
        font-size: 14px;
    }
    .copyright{
        font-size: 12px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1600px){
    .monster-logo{
        padding-top: 80px;
        width: 320px;
        height: 200px;
    }
    .title{
        margin: 3% 0 1.5% 0;
        font-size: 30px;
    }
    .description{
      font-size: 16px;
    }
    .flag img{
        width: 100px;
        heigth: 100px;
    }
    .flag-tr{
        margin: 0 80px;
    }
    .flag span{
        font-size: 16px;
    }
    .copyright{
        font-size: 14px;
    }
}

@media screen and (min-width: 1600px){
    .monster-logo{
        padding-top: 100px;
        width: 434px;
        height: 245px;
    }
    .title{
        margin: 3% 0 1.5% 0;
        font-size: 42px;
    }
    .description{
      width: 1000px;
      font-size: 20px;
    }
    .flag img{
        width: 120px;
        heigth: 120px;
    }
    .flag-tr{
        margin: 0 80px;
    }
    .flag span{
        font-size: 20px;
    }
    .copyright{
        font-size: 14px;
    }
}