@font-face {
	font-family: Mogul;
	src:url(mogul.ttf);
}


@media only screen and (max-device-width: 320px){
    
    .info {
        font-size:1.2em!important;
    }

    .profile > img {
  width: 30%;
  height: 30%;
   
}
   
}

@media screen and (min-width: 780px) and (max-width: 1920px){
	.avatar{
		width: 20%;
		height: 20%;
	}
}


body {
  font-family: Mogul;
  overflow: hidden;
  background-image: url("../img/bg.jpg");
  background-repeat: repeat;
}

a {
  text-decoration: none;
  color: #1F98E9;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;

  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;

}

.spacer {
  flex-grow: 1;
}

.profile > img {
  width: 25%;
  /*height: 50%;*/
  border-radius: 50%;
}

.main {
	  
    display: flex;
  	flex-direction: column;
  	
  	text-align: center;
  	vertical-align: middle;
  	background: transparent; 
}

.name {
  font-size: 2em;
  margin: 16px;
}

.info {
    
 margin: 0px 10% 0px 10%;
    text-align:center;
  font-size: 1.5em;
  
  display:inline-block;
}

.info > div {
    display: inline-block; 
    /*float: left;*/
    padding-top:12px;
}


.info-child {
    
  margin: 18px;
  
}

.social{
    position: fixed;
    font-size:1.2em;
    font-weight:bold;
    bottom: 12px;
    left: 0px;
    color: #fff;
    width:100%;
    text-align:center;
  }