body {
    font-family: Roboto_Light;
    margin: 0;
}

a {
    text-decoration: none;
}

@font-face {
  font-family: Roboto_Light;
  src: url(./Roboto_Light.ttf);
}


@font-face {
  font-family: Comfortaa;
  src: url(./Comfortaa-Medium.ttf);
}

p {    
    font-size: 18px;
    float: left;    
}

h1 {
    font-size: 38px;
    margin-left: 15px;
    font-family: Comfortaa;
    color: rgb(54, 54, 54);
}

h2 {
    font-size: 26px;
    float: left; 
    margin: 20px 0px;
    font-family: Comfortaa;
    color: rgb(54, 54, 54);
}

h3 {
    font-family: Comfortaa;
    color: rgb(54, 54, 54);
}

code {
    float:left;
}


.main-header {    
    background: linear-gradient(44deg, #ffffffd9 20%, transparent 70%), url('flag.webp');
    display: flex;
    filter: drop-shadow(0px 10px 8px #c7c7c7);
}

.main-text-block {
    width:28%;    
    padding: 1%;
    min-width: 330px;
}

.icons {
    width: 32px;
    height: 32px;
    float: left;
    margin: 20px 8px;
}

.h2-div {
    width: 100%;
}

.filler {
    width: 60%;
}

.downloads {
    display: flex;
    background: url('hex_background.svg'), lightgray;    
    width: 100%;
    border-radius: 0px 0px 0px 50px;
}

.download-blocks {
    display: flex;
    float: left;    
    width:68%;
    padding: 2% 1%;    
}

.links {
    max-width: 30%;
    background-color: white;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 40px;
}

.links-img {
    width:30%;
    margin: 5% 35% 5% 35%;
    float: left;
}


.link-button {
    float: left;
    width: 94%;
    text-align: center;
    margin: 2%;
    font-family: Comfortaa;
    font-weight: bold;
    color:rgb(54, 54, 54);    
    padding: 1%;    
}

.docs {
    display: flex;
    background-color: white;
    width: 100%;
}

.docs-img-div {
    width: 70%;
}

.docs-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 738px;
    margin-top: 2%;
    margin-bottom: 2%;
}

.demo {
    display: flex;
    width: 100%;
    flex-direction: row;
	flex-wrap: nowrap;        
	justify-content: flex-start;
	align-items: flex-start;   
    background: url('hex_background.svg'), lightgray; 
    border-radius: 50px 0px 0px 0px;
}

.demo-container {
    display: flex;
    flex-wrap: wrap;
    width: 68%;
    padding-right: 1%;
}

.demo-item {
    display: flex;
    flex-direction:column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
    width: 23%;
    margin: 0 1%;
    text-align: center;
    background-color: white;
    border-top:  lightgray solid 1px;
}

.demo-item-top {
    border-radius: 20px 20px 0 0;
    margin-top: 2%;
    min-height: 32px;
}


.demo-item-bottom {
    border-radius: 0 0 20px 20px;
    margin-bottom: 2%;
    min-height: 32px;
    border-top: 0;
}

.demo-text {
    text-align: center;
    width: 100%;
}

.demo-link {
    text-align: center;
    width: 100%;
    margin: 2%;    
    font-size: 20px;    
    color: rgb(54, 54, 54);
}

.demo-img {
    max-width: 90%;
    margin: 0 5% 5% 5%;
}

.support {
    display:flex;
    width: 100%;   
}

.support-img-container {
    width: 66%;
    padding: 3% 2%;
    padding-bottom: 1%;
    margin-top: auto;
    margin-bottom: 0px;    
}

.support-img {
    display: block;
    margin-left: auto;
    margin-right: 1%;
    margin-bottom: 0px;
    margin-top: auto;
    height: 50%;
    max-height: 280px;
}

.faq {
    display:flex;
    width: 100%;
    background: url('hex_background.svg'), lightgray;
    border-radius: 0px 50px 50px 0px;  
}

.faq-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 68%;
    padding: 2% 1%;
}

.faq-head {
    text-align: center;    
    max-height: 32px;
    background-color: white;
    border-radius: 20px 20px 0 0;
}

.faq-text {
    text-align: center;    
    background-color: white;
    border-top:  lightgray solid 1px;
}

.faq-question {
    width: 34%;
    margin: 0% 1%;
    padding: 2%;
    font-weight: bold;
}

.faq-answer {
    width: 54%;
    margin: 0% 1%;
    padding: 2%;
}

.faq-bottom {    
    height: 32px;
    background-color: white;
    border-radius: 0 0 20px 20px;
    padding: 0 2%;
}

.footer {
    width: 100%;
    text-align: center;
    color: gray
    
}

@media screen and (max-width: 1000px)
{
.downloads, .faq, .demo, .links, .faq-head, .faq-bottom, .demo-item-bottom, .demo-item-top {   
    border-radius: 0;
}

.demo-text {
    margin: 6px 0;
}

.demo-item-bottom {
    min-height: 0;
}

.faq-bottom {
    height: 0px;
}

h2 {
    font-size: 20px;
}

.icons {
    margin: 16px 8px;
}

}