@font-face {
    src: url(/fonts/angel.woff2);
    font-family: 'angel';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/basiic.woff2);
    font-family: 'basiic';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/Cathalia.woff2);
    font-family: 'cathalia';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/DotGothic16.woff2);
    font-family: 'dotgothic';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/Gabriola.ttf);
    font-family: 'gabriola';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/hearts.otf);
    font-family: 'hearts';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/puf.otf);
    font-family: 'puf';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/satin.woff2);
    font-family: 'satin';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/snacker.woff2);
    font-family: 'snacker';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/ZenMaruGothic.woff2);
    font-family: 'zenmaru';
    font-display: swap;
    }
    
    @font-face {
    src: url(/fonts/pc-9800.woff2);
    font-family: 'pc-9800';
    font-display: swap;
    }
  
    #fonts .font-item {
    display: inline-flex;     
    align-items: center;
    justify-content: center;
    height: unset;            
    min-height: 25px;
    padding: 5px;
    border: 1px solid #ddd; 
    border-radius: 5px;
    white-space: nowrap;       
    margin: 0;           
    height: 15px;            
    width: fit-content;      
    min-width: 50px;
    }

    #fonts .font-item a {
    display: inline-block;
    text-decoration: none;
    }

    #fonts.section-content.active {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;          
    justify-content: center;   
    align-items: center;       
    gap: 8px;                 
    width: 100%;
    }
    
    .angel {
    font-family: 'angel';
    font-size: 12px;
    }
    
    .basiic {
    font-family: 'basiic';
    font-size: 12px;
    }
    
    .cathalia {
    font-family: 'cathalia';
    font-size: 12px;
    }
    
    .gothic {
    font-family: 'dotgothic';
    font-size: 10px;
    }
    
    .gabriola {
    font-family: 'gabriola';
    font-size: 15px;
    }
    
    .hearts {
    font-family: 'hearts';
    font-size: 12px;
    }
    
    .puf {
    font-family: 'puf';
    font-size: 15px;
    }
    
    .satin {
    font-family: 'satin';
    font-size: 12px;
    }
    
    .snacker {
    font-family: 'snacker';
    font-size: 12px;
    }
    
    .zenmaru {
    font-family: 'zenmaru';
    font-size: 12px;
    }
    
    .pc-9800 {
    font-family: 'pc-9800';
    font-size: 12px;
    }