body{
	font-family: "Sathu";
	background: url(../img/background.jpg);
	background-repeat: repeat-y;
	background-size: contain;
}

.sticky{
  position:fixed;
  top:0;
  width:100%;
  z-index:1;
}

nav{
	width:100%;
	height:25px;
	background-color: #f4f4ef;
	/* background-color: #e1d6fb; */
}

a{
	color: black;
}

a:hover {
  color:rgb(52, 52, 52);
	text-decoration: none;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
	margin-top: -25px;
}

.element{
	display:inline-block;
	margin-right: 10px;
	height:100%;
	margin-top: -5px;
}

.dropbtn {
  border: none;
	background-color: transparent;
}

.dropdown-content {
  display: none;
  position: absolute;
	padding-top:8px;
	/* background-color: red; */
  background-color: #f4f4ef;
	margin-top:-5px;
  min-width: 104px;
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 5px;
  text-decoration: none;
	text-align: center;
  display: block;
}

.dropdown:hover .dropdown-content {display: block;}
.dropbtn:focus{outline:none}

#brain{
	width:31px;
	margin-top: -5px;
	margin-left: 5px;
}

#battery{
	width:85px;
	/* margin-left: -5px; */
	margin-top:-1px;
}

#search{
	width:35px;
	margin-left: -7px;
	/* margin-right:px; */
}

.clock{
	width:100%;
	font-size: 16px;
	/* margin-right: -2px; */
}

.banner{
	position: fixed;
	display: block;
	/* float:left; */
	width: 400px;
}

.submitButton{
	position: fixed;
	display: inline-block;
	width: 140px;
	/* height:30px; */
	margin-top:118px;
	margin-left: 100px;
}

.aboutButton{
	position: fixed;
	display: inline-block;
	width: 50px;
	margin-top:118px;
	margin-left: 253px;
}


.grid-container {
	display: grid;
	width: 100%;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-container > div {
  /* background-color: rgba(255, 255, 255, 0.8); */
	height:140px;
	width: 110px;
  text-align: center;
}

.image{
	float: center;
	width: 100px;
	margin: 4%;
	height: 75%;
}

figcaption{
	width:120px;
}

img{
	object-fit: contain;
}

.modal {
	pointer-events: none;
	position: fixed;
	z-index: 2;

}

.modal-backdrop {
	display: none;
}


.modal-content{
	background: #e2e2e2 !important;
	border-radius: 18px;
	z-index: 1000;
}

.modal-dialog{
	z-index: 1000;
}

.modal-header{
	background: #b7b7b7 !important;
	height: 10px !important;
	width: 100%;
	border-radius: 15px;
}

#searchContainer{
	margin-top: -13px;
	width: 200px;
	height: 25px;
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 10px;
}

#searchIcon{
	padding-top:5px;
}

#archiveSearch {
	float: right;
	width: 170px;
	height: 23px;
  font-size: 16px;
	padding-top: 4px;
	border: 1px solid white;
	border-radius: 0px 10px 10px 0px;
}

input:focus, textarea:focus {
    outline: none;
}

.modalname{
	margin-top: -12px;
	color: white;
	size: 10px;
}

.placeholder{

}

.loader{
	margin: auto;
	margin-bottom: 20px;
	border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #6b808e;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.title s{

}

.modal-text{
	color: black;
	text-align: center;
}

.tag{
	color: black;
	text-align: right;
}

.textContent{

	text-align: left;
	display: inline-block;
	margin: auto;
}

.modal-body{
	text-align: left;
}

.modal-body img{
	display: block;
    margin: 0 auto;
}

.modal-footer{

}


#archiveStructure {
	display: grid;
	width: 90%;
	margin: 0 auto;
	grid-gap: 10%;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

#archiveStructure > div {
  /* background-color: rgba(255, 255, 255, 0.8); */
	height:80px;
	width: 120px;
  text-align: center;
	/* padding:10[] */

}