style_department.css

.Body{
  min-height:98% ;
  height:98%;
  width:100vw;
  display:block;
  margin:0;
  padding-top:50px;
  /*background-color:#DFE2DB;*/
  height:100vh;
  background-repeat: no-repeat;
  background-size:100% 100%;  
}

.tabs{
	margin-right:1vw;
	margin-top:8px;
	border-radius:8px;
	display:inline-block;
	width:23vw;
	height:40vh;
	cursor:pointer;
	box-shadow: 5px 6px 20px 0px #1E1D1D;
	background-size: cover;
    background-position: center;
}

::-webkit-scrollbar { 
z-index: 5px; 
}

#img{
	position:absolute;
	left:-20%;
}

.container-fluid img{
	max-height:100vh;
	max-width:100vw;
}

.circle{
position:absolute;
width:15vw;
height:15vw;
padding:0px 0px;
margin:0px auto;
background: yellow; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(yellow, orange, red); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(yellow, orange, red); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(yellow, orange, red); /* For Firefox 3.6 to 15 */
background: radial-gradient(yellow, orange, red); /* Standard syntax */
color:black;
border-radius: 50%;
cursor:pointer;
text-align:center;
vertical-align: middle;
transition:0.75s;
transition-timing-function:cubic-bezier(.4,.44,.9,.45);
font-size:2.1vw;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
font-weight:bold;
}

#LinuxCircle{
top:9%;
left:81%;
}

#WebdevCircle{
top:9%;
left:4%;
}

#CompCircle{
top:69%;
left:4%;
}

#AndroidCircle{
top:69%;
left:81%;
}

.circle:hover{
background: black; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(black,orange); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(black,orange); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(black,orange); /* For Firefox 3.6 to 15 */
background: radial-gradient(#00ff00,#00b300,#003300); /* Standard syntax */
color:white;
transform:rotateZ(360deg);
}

.heading{
font-size:2.5vw;		
} 

#initial{
position:absolute;
top:43%;
left:16%;
color:white;
font-size:6.75vw;
text-align:center;
font-family:algerian;	
}

#content-linux{
position:absolute;
top:30%;
left:44%;
color:white;
text-align:center;
font-size:1.575vw;
display:none;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

#content-android{
position:absolute;
top:30%;
left:36%;
color:white;
text-align:center;
font-size:1.575vw;
display:none;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

#content-webdev{
position:absolute;
top:30%;
left:37%;
color:white;
text-align:center;
font-size:1.575vw;
display:none;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

#content-comp{
position:absolute;
top:30%;
left:36%;
color:white;
text-align:center;
font-size:1.575vw;
display:none;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

@media only screen and (max-width: 500px) {
    .heading{
        font-size: 5vw;
    }
	
	#content-linux{
		left:38%;
		font-size:3.5vw;
	}
	
	#content-android{
		left:20%;
		font-size:3.5vw;
	}
	
	#content-webdev{
		left:24%;
		font-size:3.5vw;
	}
	
	#content-comp{
		left:22%;
		font-size:3.5vw;
	}
	
	.circle{
		width:18.8vw;
		height:18.8vw;
		font-size:3vw;
	}
}

#tabs{
	position:relative;
	top:100%;
}


.description{
	background-color:black;
	color:black;
	width:98.59vw;
	padding:0px;
	position:absolute;
	margin-left:-14px;
	margin-right:25px;
	box-shadow: 7px -4px 15px 4px rgba(56,44,44,0.88);	
}

#A_text,#WD_text,#C_text,#L_text{
	display:none;
}

#A_text{
	/*background-color:rgba(0, 171, 43, 1);*/
	background-image:url("blue_haxagons_pattern-wallpaper-1920x1080.jpg");
	background-size: 100% 100%;
    background-position: center;
}

#WD_text{
	/*background-color:rgb(218, 148, 0);*/
	background-image:url("webdev_text.jpg");
	background-size: cover;
    background-position: center;
	color:white;
}

#C_text{
	/*background-color:rgb(255, 105, 105);*/
	background-image:url("coding_text.jpg");
	background-size: cover;
    background-position: center;
	color:white;
}

#L_text{
	/*background-color:#7c0294;*/
	background-image:url("linux_text3.jpg");
	background-repeat: no-repeat;
	background-size:100% 100%;
	color:white;
}

#Android{
	background-image:url("Android2.jpg");	
}

#Web_Development{
	background-image:url("webdevelopment.jpg");
}

#Coding{
	background-image:url("coding.jpg");
}

#Linux{
	background-image:url("linux.jpg");
	margin-right:0px;
}

.H3{
	text-align:center;
	font-family: 'Sansita', sans-serif;
	font-size:400%;
}

.projectID{
	margin : 2vw 1.5vw 2vw 1.5vw;
	font-size : 150%;
	line-height:1.5em;
	font-family : Raleway,sans-serif;
	color:#000000;
	font-weight:800;
}

.H4{
	margin : 2vw 1.5vw 2vw 1.5vw;
	font-family : 'Sansita',sans-serif;
	color:#000000;
	font-size:300%;
}

.H5{
	text-align:center;
	font-family: 'Slabo 27px', serif;
	margin : 1.5vw 1.5vw 0.5vw 1.5vw;
	font-size:200%;
	cursor:pointer;
}

.projectDetails{
	font-family : Raleway,sans-serif;
	color:#000000;
	font-weight:800;
	font-size:125%;
	margin-left:0.5em;
	text-align:center;
}

.individualProjects{
	display:inline-block;
	width:27vw;
	margin-left:2vw;
	margin-right:2vw;
	padding-right:1vw;
	margin-bottom:1em;
}

.individualProjects > div{
	height : 40vh;
	
	background-image : url("Android.jpg");
	background-size: cover;
    background-position: center;
	border-radius:8px;	
	box-shadow: 11px -3px 20px 1px #1E1D1D;	
}

.projectLink{
	font-size:125%;
	color:red;
	margin-left:0.5em;
}