/* Default */

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html{
	scroll-behavior: smooth;
    overflow-y: scroll;
}

p{
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 20px;
}

hr{
    margin: .5rem 0;
}

ol, ul{
    padding-left: 1.5rem;
}

li{
    padding: .25rem 0;
    font-size: 20px;
}

/* Text Align */

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

/* Buttons */

.btn{
    padding: .5rem;
    background-color: white;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* Containers */

.xl-container,.lg-container,.md-container,.sm-container,.xs-container{
    margin-left: auto;
    margin-right: auto;
    padding: .5rem;
}
.xl-container{
    max-width: 1800px;
}
.lg-container{
    max-width: 1200px;
}
.md-container{
    max-width: 992px;
}
.sm-container{
    max-width: 768px;
}
.xs-container{
    max-width: 360px;
}

/* Width */

.w-100{
    width: 100%;
}
.w-75{
    width: 75%;
}
.w-50{
    width: 50%;
}
.w-25{
    width: 25%;
}
.h-auto{
    height: auto;
}

/* Display */

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.grid-x-3{
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3,1fr);
}