@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');


body {
  min-width: 264px;
  margin: 0px;
  border: 0px;
  font-family: 'Commissioner', sans-serif;
  color: var(--text);
  background-color: var(--color-box);
}


:root {
  --main-image: url('images/light-img.jpg');
  --banner-logo: url('images/osias.white.logo.high.png');
  --color-box: rgb(255, 255, 255);
  --text: black;
  --image-height: 60vh;
  --LOGO-SIZE: 20vw;
  --company-name-size: 18;
  --text-size: 18;
  --banner-height: 43px;
  --color-footer:rgb(231, 239, 255);
}



@media (prefers-color-scheme: dark) {
  :root {
    --main-image: url('img/dark-img.jpg');
    --banner-logo: url('img/osias.black.logo.high.png');
    --text:white;
    --color-box: rgb(29, 29, 29);
    --color-footer:rgb(0, 0, 0);
  }
}

@media (max-width: 500px) {
  :root {
    --LOGO-SIZE: 50vw;
    --company-name-size: 18;
    --text-size: 17; 
  }

  .image{
    width: 100%;
    height: var(--image-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-image: url('img/banner_img2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #logo{
    width: var(--LOGO-SIZE);
    flex: 0 0 auto;
    height: auto;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    object-fit: contain;
  }
   .info-containers{
    flex-direction: column;
    gap: 12px;
    padding: 10px;
   
  }
  .info-box{
    width: 100%;                  
    box-sizing: border-box;       
    border: 1px solid var(--text);
    border-radius: 6px;           
    padding: 12px;                
    margin: 0;
    min-width: 0; 
    text-align:left;
  }
}
@media (min-width:501px) and (max-width:900px) {
  :root {
    --LOGO-SIZE: 30vw;
    --text-size: 16;
  }
  #logo{
    width: var(--LOGO-SIZE);
    min-width: 250px;
    flex: 0 0 auto;
    height: auto;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    object-fit: contain;
  }
}


.top-banner{
  z-index: 120;
  position: sticky;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 auto;
  z-index: 110;
  width: 100%;
  margin: 0px;
  padding: 0px;
  left: 0px;
  top: 0px;
  color: var(--text);
}

#banner-logo{
  width: 5vw;
  min-width: 60px;
  height: auto;
  display: block;
  margin: 5px 10px;
  box-sizing: border-box;
  object-fit: contain;
}

.image > picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.image{
  width: 100%;
  height: var(--image-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  border: 0px;
  background-image: url('img/banner_img3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#logo{
  width: var(--LOGO-SIZE);
  max-width:400px;
  flex: 0 0 auto;
  height: auto;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  object-fit: contain;
}
#company-name{
  font-family: 'Commissioner', sans-serif;
  margin: 10px;
  color: white;
  text-align: center;
  text-shadow: black 0px 2px 1px ;
  font-size: var(--company-name-size);
}



.info-containers{
  border: 0;
  min-height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 2%;
  width: 100%;
  min-height: auto;
  background-color: var(--color-box);
  box-sizing: border-box;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 60px;
  overflow: visible;
  justify-content: space-between;
  align-items: flex-start;
  text-align:center;
}
.HEADER{
  width: 100%;
  height: auto;
  color: var(--text);
  box-sizing: border-box;
  padding: 1px 0px;
}

.HEADER h1{
  margin: 0;
  padding-right: 2%;  
  padding-bottom: 2%;
  padding-top: 2%;
  margin-left: 10px;
  font-size: var(--text-size+3);
}

.info-box{
  display: flex;
  flex-direction: column;
  flex: 1 0 250px;
  min-width: 250px;;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid var(--text);
  border-radius: 6px; 
  overflow-wrap: anywhere;    /* break long words/URLs */
  word-break: break-word;
  hyphens: auto;
}

.info-box h2,
.info-box p,
.info-box li{
  white-space: normal;
  overflow-wrap: break-word;
}
.info-box h2{
  display: block;
  margin: 0 0 0.5rem 0;   /* small gap between heading and text */
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
}
.info-box p{
  margin: 0;               /* remove inline/extra margins (better: remove inline style in HTML) */
  padding: 0;
  font-size: var(--text-size);
}

#footer{
  background-color: var(--color-footer);;
}
.fade-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-footer));
  pointer-events: none;
  z-index: 2; 
}
.fade-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, transparent, var(--color-footer));
  pointer-events: none;
  z-index: 2; 
}