@charset "UTF-8";

:root{
  --col-black:#2f2f2f;
  --col-white:#dadada;
  --col-green:#cde9bb;
  --font-sys:Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}


/* CONTAINERS */


html {
  width:100vw;
  height:100vh;
}

body {
  margin:0;
  padding:0;
  min-width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-shadow:0 .05vw .1vw rgba(0, 0, 0, 0.5);
  box-shadow:inset 0 0 5vw rgba(0, 0, 0, 1);
  background-color:var(--col-black);
  font-family:var(--font-sys);
  font-weight: 100;
}

.container-main {
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
}

.container-home {
  width:50vw;
  height:75vh;
  padding:2.5vw;
  box-sizing: border-box;
}

.container-home.right {
  display:flex;
  justify-content:center;
  align-items: center;
  width:50vw;
  padding:0;
}

.container-home.right-outer {
  display:flex;
  flex-direction:column;
  padding:0;
  align-items: center;
}

.container-home.left {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

a.home-buttons {
  width:20vw;
  height:20vw;
  margin:2.5vw;
  background-color:var(--col-white);
  border-width:2px;
  border-color:var(--col-white);
  border-style:solid;
  border-radius:1vw;
  align-content:center;
  text-align:center;
  text-wrap:wrap;
  font-size:3vw;
  color:var(--col-black);
  transition-timing-function:ease-in-out;
  transition:.2s;
}

a.home-buttons:link {
  text-decoration: none;
}

a.home-buttons:hover {
  background-color:var(--col-black);
  color:var(--col-white);
}

a.home-buttons:active {
  width:15vw;
  height:15vw;
  font-size: 2.5vw;
}

a.home-buttons:focus {
   background-color:var(--col-black);
   color:var(--col-white);
   outline: 0;
}

.txt {
  font-family:var(--font-sys);
}

.txt.library {
  color:var(--col-white);
  font-size:3vw;
  margin-bottom: 1vw;
}

.txt.ecological {
  color:var(--col-green);
  font-size:8.45vw;
}

.txt.interactivist {
  color:var(--col-green);
  font-size:8.45vw;
}

.txt.studies {
  color:var(--col-white);
  font-size:3vw;
  text-align:end;
  margin-top: 1vw;
}

.smaller {
  font-size: 75%;
}

@media screen and (orientation:portrait) {
  .container-main {
    width: 100vw;
    height: 80vh;
  }
  .container-home {
    width: 90vw;
    height: 40vh;
  }

  .container-home.right {
    width: 95vw;
  }

  .container-home.left {
    padding: 0;
    margin: 0;
  }

  .divider-home {
    visibility: hidden;
  }
  .txt.library {
    color:var(--col-white);
    font-size:6vw;
    margin-bottom: 1vw;
    margin-left:1vw;
  }
  
  .txt.ecological {
    color:var(--col-green);
    font-size:17.8vw;
    text-justify:auto;
  }
  
  .txt.interactivist {
    color:var(--col-green);
    font-size:17.8vw;
  }
  
  .txt.studies {
    color:var(--col-white);
    font-size:6vw;
    text-align:end;
    margin-top: 1vw;
  }

  a.home-buttons {
    width:40vw;
    height:40vw;
    font-size: 6.5vw;
  }
  
}