.df {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        
        .typ {
	  opacity: 0;
	  }
	.typ span {
	  opacity: 0;
	  }
        
        ul,li{
            list-style: none;
        }
        .container {
            max-width: 660px;
            margin: auto;
            text-align: center;
        }
        section{
            margin-bottom: 20rem
        }
        

        
        .block .display{
    display:block;
}
        h1{
            margin: 3rem 0;
        }
        pre{
            background: #fff;
            border: 3px solid #eee;
            padding: 2rem;
            text-align: left;
            white-space: pre-wrap;
        }
        .box{
            width: 200px;
            margin: 10px;
            height: 50vh
        }
       .box4{
            max-width: 640px;
            padding: 10rem 2rem;
        }
        .box5{
            background: url(scrollreveal_1.jpg)no-repeat center;
            background: cover;
            max-width: 660px;
            width: 100%;
            height: 445px;
        }
        .circle{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 10px;
            line-height: 200px;
        }