*{
  margin:0px;
  padding:0px;
}

html{
  height: 100%;
}
body{
    background: #f6f8fa;
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: hidden;
    position: relative;

}

.mainSection{

  background: white;
  border-left : 5px solid #0f9afb;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  /* border:1px solid black; */
  padding: 20px;
  /* justify-content: space-between; */
  display: flex;

}

.mainSection img{
  border-radius: 10%;
  width:25%;
  /* float:left; */
  /* filter: drop-shadow(.5rem .5rem 1rem #e23); */
}

.mainSection_2nd {

}
.mainSection_2nd .writable h2{
  font-family:sans-serif;

  padding: 2px;
}

.mainSection_2nd .writable h4 a{
  color:gray;

}

.mainSection_2nd .writable h5{
  padding-top:10px;
  font-family: monospace;
  padding: 5px;
  font-size: 1.2rem;

}

.mainSection div{
  padding:10px;
}
.mainSection .fonts{
  display: flex;

}
.mainSection .fonts a{
  color:inherit;
}
.mainSection .fonts i:hover{
  color:red;
}
.mainSection .fonts i{
  width: 100px;
  position: relative;
  animation: mymove 1.8s infinite;
}



#canvas{
		background-color: #2c343f;
		width: 100%;
		height: 100%;
}
h1{
  background-color: white;
  font-size: 500px;
}





/* floating section */
.mainSection .floating h4{
  position: absolute;
  right:0px;
}


@keyframes  mymove {
  0% {top: 0px;}
  50% {top: 3px;}
  100%{top:0px}
}


@@keyframes python {

}