@font-face {
  font-family: 'Varela Round';
  src: url("{{ url_for('static',filename='assets/VarelaRound-Regular.ttf') }}") format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  src: url("{{ url_for('static',filename='assets/OpenSans-Medium.ttf') }}") format('truetype');
}

body{
    background: #232526;  /* fallback for old browsers */
    background: rgb(24,26,33);
    background: radial-gradient(circle, rgba(24,26,33,1) 0%, rgba(0,0,7,1) 53%, rgba(7,4,40,1) 83%, rgba(35,7,54,1) 100%);
    font-family: 'Open Sans', sans-serif;
    color:white;
    margin:0px;
}


h1 {
    font-family:'Varela Round';
}

li {
  display: inline;
  float: left;
  color:white

}

a {
  display: block;
  padding: 8px;
  background-color: 'transparent';
  text-decoration:none;
  color:white;
}

.aReference {
  display: block;
  padding: 0px;
  background-color: 'transparent';
  text-decoration:none;
  color: rgb(148, 170, 242) !important;
  overflow-wrap:anywhere
  width:100%
}


@media only screen and (min-width: 1000px){
    .entity{
        display: grid;
        grid-template-columns: 33% 33% 33% !important;
    }
}

@media only screen and (max-width: 1000px){
    .entity{
        display: grid;
        grid-template-columns: 50% 50%;
    }
}


@media only screen and (min-width: 700px){
    .entity{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .mainArea {
    background-color:'white';
    padding-top:15%;
    height:100vh;
    }

    .mainAreaResult {
        background-color:'white';
        padding-top:2.5%;
        height:100vh;
    }
}

@media only screen and (max-width: 700px){
    .entity{
        display: grid;
    }

    .mainArea {
    background-color:'white';
    padding-top:17.5%;
    height:100vh;
}
}

.orgName{
    display: inline-block;
    margin:0px 0px 0px 10px;
    font-weight:bold;
}

.titleArea {

    width:100%;
    display: block;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width: 700px){

    .navbar {
    display:none
    }

    .navbarTableResults{
        width:95%;
        padding-inline-start: 2.5% !important;
        padding-left: 5%;
        padding-right: 5%;
        display:flex;
        justify-content:space-around;
    }

    .searchResultPageArea {
        margin-top:0px;
        width:70%;
        align-items: center;
        text-align: center;
       }

    .navbarTable{
        width:95%;
        padding-inline-start: 2.5% !important;
        padding-left: 5%;
        padding-right: 5%;
    }
    .title{
    margin:10px;
    font-size:50px;
    }

    .titleResult {
        margin:10px;
        font-size:50px;
    }
    .titleBelowText{
    margin:10px;
    font-size:18px;
    font-weight:bold;
}
}

@media only screen and (max-width: 700px){
    .navbarTable{
        width:95%;
        padding-inline-start: 2.5% !important;
        display:none;
    }


    .navbarTableResults{
        width:95%;
        padding-inline-start: 2.5% !important;
        padding-left: 5%;
        padding-right: 5%;
        display:flex;
        justify-content:space-around;
        display:none;
    }
    .searchResultPageArea{
        width:100%;
        text-align:center;
        margin-top:15px;
    }

    .title{
        margin-top:15%;
        font-size:32px;
    }

    .titleResult{
        padding:10px;
        font-size:32px;
        text-align:center;
        font-family: 'Varela Round';
        position:absolute;
        width:100%;
        margin-top:5px;
    }
    .titleBelowText{
    margin:10px;
    font-size:14px;
    font-weight:bold;
    }
}

@media only screen and (max-width: 400px){
    .title{
    margin-top:15%;
    font-size:26px;
    }
    .titleBelowText{
    margin:10px;
    font-size:12px;
    font-weight:bold;
    }
}




.searchArea{
    margin-top:5%;
    width:100%;
    align-items: center;
    text-align: center;
    margin-bottom:60px;
}

.searchResultArea {
    margin-top:0px;
    width:70%;
    align-items: center;
    text-align: center;
}

@media only screen and (max-width: 700px){
    .searchInput{
        padding:10px 10px 10px 20px;
        border-radius:15px;
        border:0.5px;
        border-color:grey;
        border-width:thin;
        width:80%;
        max-width:700px;
        height:30px;
        box-shadow: #719ECE 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }
}
@media only screen and (min-width: 700px){
    .searchInput{
        padding:10px 10px 10px 20px;
        border-radius:25px;
        border:0.5px;
        border-color:grey;
        border-width:thin;
        width:90%;
        max-width:700px;
        height:30px;
        box-shadow: #719ECE 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }
}

.pp {
    width:50px;
    border-radius: 25px;
    margin-bottom:-20px;
}

.logoImg {
width:30px;
}

img:before {
    background-image: url("../assets/BWhite.png");
}

input:focus {
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
 }

.searchButton{
    margin-left:-50px;
    margin-bottom: -6px;
    width:25px;
    height:25px;
    border:none;
    background-color:transparent;
    background-image: url("../assets/search.png");
    background-size: contain;
    background-repeat: no-repeat;
    outline: none;
    box-shadow:none;
}

.searchButton:focus {
    outline: none;
    box-shadow:none;
}

.paragraph1 {

    margin:0px;


}

.resultQuery{
    border-radius:10px;
    background-color:#272727;
    padding:10px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;

}

.gradient {
		height: 400vh;
    width: 100%;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: rgb(1,20,85);
    background: radial-gradient(circle, rgba(1,20,85,1) 0%, rgba(25,25,55,1) 53%, rgba(4,0,48,1) 100%);
    background-size: 1000px 640px;

    position: absolute;
    top:0;
    z-index:-99;

}


.mainSearchItem{
    border-top : 0.5px solid grey;
    padding: 10px;
    margin-top:5px;
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

@media only screen and (max-width: 700px){

    .container {
  max-width: 1050px;
  width: 100%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  right: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  right: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: white;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  background: #989FCE;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  left:20px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}
}