/*
Theme Name: 100 Subs
Theme URI: https://github.com/MarcArmengou/100-bytes
Author: Gutoz
Author URI: https:/gutoz.com/
Description: 100 Bytes is a theme that aims to look as optimal as possible to deliver your message to your audience using WordPress as a content manager. The idea is simple, make a theme that looks good everywhere, with as little CSS code as possible. In this case the limit is 100 Bytes of CSS information. Actually the compressed CSS code contains 82 bytes of information, but 100 bytes sounds better.
Idea: One day this tweet appeared on my Twitter timeline (https://twitter.com/swyx/status/1449472712720601088) and I thought it was interesting to combine it with WordPress.
Tags: blog, one-column, full-width-template
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 100-bytes
Copyright: Gutoz
Tested up to: 6.3.1
Requires PHP: 5.6
*/

html {
/*	max-width:70ch;  */
	padding:3em 1em;
	margin:auto;
	line-height:1.75;
	font-size:1.25em
}

:root {
    --primary-color: #b43232;
    --secondary-color: #B22222;
    --accent-color: #f14444;
    --danger-color: #f72585;
    --success-color: #4cc9f0;
    --warning-color: #f8961e;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --gray-color: #6c757d;
    --border-radius: 4px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}


.site-name {
    text-align: center;
    font-weight: 800;
    
}

.logo-img {
    width: 100%;
    max-width: 350px;
}


.archivetitle a {
    text-decoration: none;
    color: #505050;
}

/* singles */

.hentry {
    max-width: 70ch;
    margin: auto;
}

/*** Footer ***/

.site-footer {
    background-color: rgb(245, 245, 247);
    color: #000;
    padding-top: 5px;
    font-size: 0.9rem;
    margin-top: 20px; 
}

.footer-top {
    padding-bottom: 30px;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px
}

.footer-column h3 {    
    color: #000;
    font-size: 1.1rem;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-column p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-links,
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #000;
}

.footer-links li,
.social-links li {
    margin-bottom: 8px;
}

.footer-links a,
.social-links a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover,
.social-links a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.footer-copyright {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px 0;
    text-align: center;
    font-size: 0.85rem;
}

.footer-legal {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 0;
}

.footer-legal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-legal a {
    color: #000;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .footer-legal ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}