.blurFilter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

a {
text-decoration: none;
}

#face {
    
border-radius: 50%;
    width: 150px;
    height: 150px;

}

.column {
float: left;

}

.left {
  width: 250px;
}

.right {
  width: auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
    
}

.padding-large {
    
    padding: 24px;
}

#main {
    
    margin-top: 84px;
    margin-left: 212px;
    margin-right: 212px;
    margin-bottom: 32px;
    color: lightgrey;
}

#about {
    
    margin-top: 64px;
    margin-left: 212px;
    margin-right: 212px;
    margin-bottom: 32px;
    color: lightgrey;
}

#contact {
    margin-top: 32px;    
    margin-left: 212px;
    margin-right: 212px;

    margin-bottom: 64px;
}

#footer {
    background-color: ;
    margin-top: 32px;
    margin-left: 212px;
    margin-right: 212px;
    margin-bottom: 32px;
    font-size: 8px;
    color: darkgrey;
    
}

.padding-16 {
    
    padding: 16px;
}

.padding-32 {
    
    padding: 32px;
}

.padding-64 {
    
    padding: 64px;
}

.center {
    
    margin: auto;
    text-align: center;

}

.content {
    
    padding-bottom: 10px;
    
}

.justify {
    
    text-align: justify;
    text-justify: inter-word;
    
}

.opacity {
    opacity: 10%;
    
}


.light-grey {
    background-color: lightgray;
}

.xlarge {
    font-size: 64px;

}

.large {
    font-size: 32px;

}


.button {
    border-radius: 4px;
    border-color: black;
    background-color: white;
    font-size: 14px;
}
.button:hover {
    border-radius: 4px;
    border-color: black;
    background-color: #61cd99;
    font-size: 14px;
    color: white;
}

.fa:hover {
    color: #61cd99;
}

h1 {
    
    color: white;
    font-weight: 100;
}


h2 {
    
    color: lightgrey;
    font-weight: 100;
    padding-top: 18px;
}

h3 {
    
    color: lightgrey;
    font-weight: 100;
    padding-top: 12px;
}

.content {
    
    font-weight: 200;
}

.subText {
    
    font-weight: 200;

}

.foreword {
    
    font-style:italic;
    font-size: 12px;
    font-weight: 200;
    
}

#container {
	text-align: center;
	}
#container > div {
	width: 190px; /* Declare your value. Can be in relative units. */
    height: 190px;
    border-radius: 50%;
    margin: 10px;
	display: inline-block;
	vertical-align: top;
    background-color: #313131;

	}

#container > div:hover {
        background-color: #61cd99;
        color: black;

}

#container:after {
	content: "";
	width: 100%;
	display: inline-block;

    }

.boxContent {

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 65px;
  color: lightgrey;
  font-weight: 700;

}

.boxContent:hover {
        color: #313131;

}

.box {
    border-style: inset;
    border-width:  10px;
    border-color: aquamarine;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}



//*animation START *// 


.blob {
	background: black;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: 10px;
	height: 20px;
	width: 20px;
	transform: scale(1);
	animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


.blob.green.smallScreen {
    background: rgba(51, 217, 178, 1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    animation: pulse-green 5s infinite;
    

}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}


//* Animation END *//