/* Basic Settings */ 
@font-face {
     font-family: 'Aptos';
     src: url('fonts/Aptos.woff2') format('woff2'),
         url('fonts/Aptos.woff') format('woff'),
         url('fonts/Aptos.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Aptos', sans-serif;
     font-size: 16px;
 }


 main {
     display: flex;
     flex-wrap: wrap;
     padding: 1em;
     min-height: 80vh;
 }

 .box {
     flex: 1 1 300px;
     /* flexible width, min 300px */
     margin: 10px;
     padding: 10px;
     background: #f4f4f4;
     border-radius: 5px;
 }

 @media (max-width: 600px) {
     main {
         flex-direction: column;
         padding: .5em;
     }

     box{
         margin: 10px 5px;
         padding: 2px;
     }
 }