@import url('nunito.css');
@import url('lexend.css');

html {
  color: rgba(53,53,53,1)!important;
  font-size: 1rem;
  line-height: 1.15;
  font-kerning: normal;
  overflow-x: hidden;
}
:root{
  --background: rgb(240,240,240);
  --background-wrapper: rgb(250,250,250);
  --primary: rgb(103,103,103);
  --secondary: rgb(220,220,220);
  --bs-btn-hover-bg: rgb(242, 135, 5);
  --bs-link-color: rgb(242, 135, 5);
  --bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif;
  --bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif;
  --top-bar: 6.125rem;
  --bottom-bar: 5em;
  --div-padding: 3em;
  --div-padding-sm: calc(var(--div-padding) / 3);
  --div-padding-md: calc(var(--div-padding) / 2);
  --bs-navbar-color: rgba(242, 135, 5, .15);

  --gradient-public: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20));
  --gradient-edu: linear-gradient(43deg, rgb(0, 159, 227) 22%, rgb(36, 201, 219) 49%, rgb(0, 159, 227) 75%); 
  --gradient-edu2: linear-gradient(43deg, rgb(108, 71, 150) 22%, rgb(177, 130, 231) 49%, rgb(108, 71, 150) 75%);

}
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--background);
  overflow-x: hidden;
  letter-spacing: .125px;
  font-variant-ligatures: no-common-ligatures;
  margin: 0;
}
h1, h2, h3, h4, h5{
  font-family: var(--bs-ttl-font-family);
}
.top-bar{
  height: var(--top-bar);
  border-bottom: 1px solid var(--accent-normal);
  background-color:white;
}
.top-bar > div{ 
  height: 100%;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  /* min-height: 100vh; */
}
header{
  background-color: white;
}
#langs{
  display: flex;
  justify-content: center;
  background-color: var(--secondary);
}
#langs ul{
  display: flex;
  flex-direction: row;
  align-items:center;
  margin-bottom: 0;
}
#langs ul li{
  align-items: center;
  display: flex;
}
#langs ul li:not(:first-of-type){
  margin-left: 1rem;
}
#langs ul li:not(:first-of-type)::before{
  content: '';
  border-left: 1px solid black;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.lead{
  display: flex;
  justify-content: center;
}
.lead p:last-of-type{
  margin-bottom: 0;
}
.pad{
  padding: var(--div-padding);
}
.pad-sm{
  padding: var(--div-padding-sm);
}
.pad-bot{
  padding: var(--div-padding-sm) var(--div-padding) 0;
}
.panel{
  background: white;
  border-radius: 0.5rem;
}
.public{
  background-image: var(--gradient-public);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.edu{
  background-image: var(--gradient-edu);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.edu2{
  background-image: var(--gradient-edu2);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.choice{
  display: flex;
  box-shadow: none;
  transition: all 200ms ease-in-out;
}
/* btn */

/* overrides */

/* modals */

/* footer */
footer{
  background-color: rgb(220,220,220);
  padding: var(--div-padding-md);
}
footer .container-fluid{
  justify-content: space-between;
}
footer a img{
  max-height: 3.5em;
}

/* media queries */
@media only screen and (width <= 576px) {
  :root{
    --div-padding: 2em;
    --bottom-bar: 40px;
  }
  .navbar-brand{
    margin-left: 1rem;
  }
  .lang-select{
    max-width: none;
  }
  footer a img{
    height: 100%;
    max-height: 2.5em;
  }
}
@media only screen and (width <= 992px) {
  :root{
    --top-bar: 5rem;
  }
  h1, h2, h3, h4{
    text-align: center;
  }
}
@media only screen and (576px <= width <= 992px) {
}
@media only screen and (hover: hover) {
  article {
    transition: opacity 200ms ease-in-out;
  }
  section:has(article .choice:hover) article:not(:hover) {
    opacity: 0.5;
    filter: blur(2px) saturate(0%);
  }
  .choice:hover{
    display: flex;
    border-radius: 0.5rem;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  }
}