@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

.leftbox { 
    float:left;  
    background: #e5e5ea; 
    width:33.3333%; 
    height:400px;
    font-family: 'Varela Round', sans-serif;
}
.middlebox{ 
    float:left;  
    background:#d1d1d6; 
    width:33.3333%; 
    height:400px; 
    font-family: 'Varela Round', sans-serif;} 
.rightbox{ 
    float:right; 
    background:#c7c7cc; 
    width:33.3333%; 
    height:400px;
    font-family: 'Varela Round', sans-serif;
} 
h1{ 
    color:#000080; 
    text-align:left; 
    font-size: 69px;
    font-family: 'Varela Round', sans-serif;
    transition: 0.3s;
} 
h1>span {
    display:inline-block;
 }
 
 h1 span span {
    display:inline-block;
    max-width:0;
    overflow:hidden;
    transition:max-width 3s;
    vertical-align:bottom;
 }
 
 h1 span span::after {
    content: ""
 }
 
 h1:hover span span {
    max-width:300px;
 }
 
h2{
    padding-left: 20px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
.pix{
    
    width: 70px;
    transition: 0.4s;
}

.pix:hover {
    filter: invert();
    transform: scale(1.25);
}
.pix2{
    padding-right: 10px;
    width:66px;
    transition: 0.4s;
}
.pix2:hover {
    filter: invert();
    transform: scale(1.25);
}
.sometxt {
    font-family: 'Varela Round', sans-serif;
    padding-bottom: 15px;
    padding-top: 75px;
    
}
.wholebody{
    padding-left: 200px;
    padding-right: 200px;
}

.column{
    float: left;
    width: 50%;
    padding: 10px;
}

.row{
    content:"";
    display: table;
    clear: both;
}