Responsive Circle test

Home page hero responsive test for my folio

by Brent White

HTML

<!-- Projects -->
   <div class="circles">
       <div>
           <div>
               <div>
                   <div class="projects">
                       <a href="#">Projects</a>
                   </div>
                </div>
           </div>
       </div>   
 
       <!-- About -->
       <div>
           <div>
               <div>
                   <div class="about">
                       <a href="#">About</a>
                   </div>
               </div>
           </div>
       </div>
       <!-- Contact -->
       <div>
           <div>
               <div>
                   <div class="contact">
                       <a href="#">Contact</a>
                   </div>
               </div>
           </div>
       </div>

CSS

.circles{
    display: flex;
    margin:0px auto;
    align-items:center;
    justify-content:center;
}

.circles > div {
    overflow:hidden;
    border-radius:50%;
    width:auto;
    height:auto;
    position: relative;
}

.projects{
    background-color:magenta;
}

.about{
    background-color:cyan;
}

.contact{
    background-color:yellow;
}

.circles > div > div {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.circles > div > div > div {
    display: table;
    width: 100%;
    height: 100%;
}

.circles > div > div > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}


@media (max-width: 320px)
{
    .circles > div {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .circles > div {padding: 15%;}
}

@media (min-width: 801px)
{
    .circles{width:800px}
    .circles > div {padding: 12.5%;}
}