/*Designed by Indrajit Jana*/

body {
	background-attachment: fixed;
	border: 1px solid lightgrey; 
	margin: auto;
	}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  
}

.container-fluid{
padding-left: 0px;
padding-right: 0px;
}

.navbar li{
	min-width: 225px;
}

 .navbar .navbar-collapse {
        text-align: center;
    }
   .navbar-brand{
   display: none;
   }


div#header{
	background: rgba(240,240,240,0.9);
   color: lightgray;
   text-align: center;
   padding-bottom: 10px;
   padding-top: 5px;
   position: fixed; 
   width: 100%;
}

div#title{
	margin-top: 550px;
	background: rgba(240,240,240,0.9);
   color: black;
   text-align: center;
   padding: 5px;
   width: 100%;
}

div#titlepic{
	float: center;
	position: fixed;
	width: 900px;
	top: 70px;
	left: 50%;
	transform: translate(-50%,0px);
	z-index: -1;
}

div#quotation{
	background-color: green;
	color: white;
	padding: 40px 20px 60px 20px; 
	position: fixed;
	min-width: 900px;
	top: 70px;
	left: 50%;
	transform: translate(-50%,0px);
	z-index: -1;
}

div#fun-stuff-content-gap{
	margin-top: 265px; 
	background: rgba(240,240,240,0.9);
   color: black;
   text-align: center;
   padding: 10px;
   width: 100%;
}

noscript>div{
	max-width:500px;
	margin:auto;
	border: 1px solid red;
	border-radius: 10px;
	text-align: center;
}

div.contentcontainer{
	margin-top: 100px;
}

div.content{
	background-color: #fff;
	max-width: 900px;
	padding-top: 10px;
	text-align: justify;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 10px;
}

div.puzzle-problems{
	border: 1px solid green;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
}

span.abs{
	color: blueviolet;
}

span.puzzle-name{
	font-weight: bold;
}

div.solution{
	padding: 10px;
}

ol#publications li{
	padding: 3px;
}

ol#publications li details summary a:link, ol#publications li details summary a:visited, ol#publications li details summary a:active {
	text-decoration: none;
	color: green;
}

ol#publications li details summary a.journal:link, ol#publications li details summary a.journal:visited{
	text-decoration: none;
	color: black;
}

ol#publications li details summary a:hover{
	color: lightseagreen;
	transition: 0.3s;
}

ol#publications li details summary a.journal:hover{
	color: lightseagreen;
	transition: 0.3s;
}

ol#publications li details summary a.name:link, ol#publications li details summary a.name:visited{
	color: black;
}

ol#publications li details summary a.name:hover{
	color: lightseagreen;
	transition: 0.3s;
}

ul.general{
	list-style-type: disc;
}

div#footer{
	background: green;
	color: white;
	padding: 10px;
}

blockquote{
	border-left: 6px solid grey;
	padding: 6px;
}

h1.coursetitle{
	background-color: rgba(240,240,240,0.9);
	text-align: center;
	width: text;
	border: 1px solid blue;
	border-radius: 6px;
}

h2 {
	color: rgb(100,120,255);
	}
p {
	text-align: justify;
	}
	
	p#intro a:link, p#intro a:visited, p#intros a:active{
	color:black;
	text-decoration:none;
	}
	
p#intro a:hover{
	color: green;
	transition: 0.3s;
}
	
a:link {
	color: green;
	}
a:visited{
	color: green;
	}
a:hover{
	color: #004F00;
	}
	
table {
	border: 1px solid black; 
	border-collapse: collapse; 
	width: 100%;
	margin-bottom: 5px;
	}
th, td {
	padding: 5px; 
	border: 1px solid black; 
	border-collapse: collapse;
	}
tr:nth-child(even){
	color: black;
	background-color: rgba(220,220,220,0.9);
	}
tr:hover{
	color: black;
	background-color: #C8FEC4;
	transition: 0.3s;
	}
tr#header:hover{
	color: black;
	background-color: inherit;
	}

button{
	color: green;
}

svg polygon{
fill: lightgrey;
stroke: white;
}
svg polygon:hover{
  fill: #C8FEC4;
  transition: 0.3s;
}

details div svg polygon:hover{
  fill: lightseagreen;
  transition: 0.4s;
}

svg{
	 viewbox: -225 -225 450 450;
}

ol#publications li details summary{
	color: black;
}

details summary{
	color: green;
	cursor: pointer;
}

details>div{
	padding: 10px;
	border-radius: 10px;
	background: rgba(240,240,240,0.9);
}

/* details>div:hover{
	background-color: #C8FEC4;
	transition: 0.3s;
}*/

a.mybutton{
	background-color: green;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;	
}

.content>a.mybutton:hover{
	background-color: white;
	color: green;
	box-shadow: 0px 0px 40px green;
	transition: 0.3s;
}

@media (min-width: 1680px) {
	div#quotation{
	width: 900px;
	}
}

@media (max-width: 907px) {
	   div#titlepic{
   float: none;
	position: fixed;
	width: auto;
	top: 70px;
	left: auto;
	transform: translate(0px,0px);
	z-index: -10;}
}
@media (max-width: 919px) {	

.navbar-brand{
		display: inline;
		padding-left: 10px;}

.navbar-header{
	padding-right: 10px;
}

.navbar .navbar-nav {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: 100%;
        text-align: left;
    }

div.content {
	padding: 5px;
}

}

@media (max-width:900px){
	  div#quotation{
  	min-width: 100%;
  }
  
  div#fun-stuff-content-gap{
	margin-top: 380px;
}
}

@media (max-width:767px){
	div#title{
	margin-top: 420px;
	}
}
@media (max-width:480px){
	div#title{
	margin-top: 300px;
	}
}