:root {
    --clr-primary: #ff6600;
    --clr-primary-hover: #e65500;
    --clr-bg: #ffffff;
    --clr-text: #333333;
    --clr-muted: #6c757d;
    --clr-border: #ddd;
    --radius: 6px;
    --transition: 0.3s;

}

body {
    font-family: 'Poppins', sans-serif;
}

.main-content {
    margin-top: 60px;
    padding: 20px;
    font-weight: 500;
    height: auto;
}

@media (min-width: 768px) {
    .main-content{
        margin-top: 0px;
        height: auto;
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .main-content h1{
        text-align: center;
        margin-top: 150px;
    }
}