p, h1, h2, h3, h4, h5, h6, a, li, button, span {
    margin: 0; 
    text-align: center;
    color: var(--color); 
    font-family: var(--font);
    line-height: var(--line-height);
}

ul {
    padding: 0; 
    margin: 0; 
}

ol {
    padding: 0; 
    margin: 0; 
}

li {
    list-style: none;
    font-size: var(--medium);
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


h1 {
    font-size: var(--large); 
}

h2 {
    font-size: var(--medium); 
}

h3 {
    font-size: var(--small);
}

h4 {
    font-size: var(--small);
}

p {
    font-size: var(--xsmall);  
}

label {
    font-size: var(--small);
}

.font-xsmall { 
    font-size: var(--xsmall); 
} 

.font-small {
     font-size: var(--small);
    }

.font-medium {
     font-size: var(--medium);
    }

.font-large {
     font-size: var(--large);
    }

.font-xlarge {
     font-size: var(--xlarge);
    }

.font-xxlarge {
     font-size: var(--xxlarge);  
}

.light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

.xbold {
    font-weight: 900;
}

.fancy {
    font-family: var(--fancy)
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: var(--action-color);
}

.a-underline {
    text-decoration: underline;
}

i {
    display: inline-block;
}

.text-shadow {
    text-shadow: var(--text-shadow);
}

.icon-large {
    font-size: var(--medium);
}

.icon-small {
    font-size: var(--xsmall); 
}

@media (min-width: 768px) {
    .icon-large {
        font-size: var(--large);
    }
    .icon-small {
        font-size: var(--small); 
    }

    h1 {
        font-size: var(--xlarge); 
    }
    
    h2 {
        font-size: var(--large); 
    }
    
    h3 {
        font-size: var(--medium);
    }
    
    h4 {
        font-size: var(--small);
    }
    
    p {
        font-size: var(--xsmall);  
    }
    label {
        font-size: var(--small);
    }

}

@media (min-width: 1440px) {
    h1 {
        font-size: var(--xxlarge);
    }
    h2 {
        font-size: var(--xlarge);
    }
    h3 {
        font-size: var(--large);
    }
    h4 {
        font-size: var(--medium);
    }
    p {
        font-size: var(--small);  
    }
    label {
        font-size: var(--medium);
    }
    
    .icon-large {
        font-size: var(--xlarge);
    }
    .icon-small {
        font-size: var(--medium); 
    }
}