:root {
	--sidebar-size: 15rem;

	--req-width-1: 24rem;
	--req-width-2: 32rem;
	--req-width-3: 40rem;
	--full-size-1: 22.5rem;
	--full-size-2: 30rem;
	--full-size-3: 37.5rem;

	--req-size-1: 40rem;
	--req-size-2: 50rem;
	--req-size-3: 65rem;
	--req-size-4: 80rem;
	--req-size-5: 95rem;
	--req-size-6: 125rem;
	--req-size-7: 160rem;
	--req-size-8: 190rem;
	--req-size-9: 255rem;
	--req-size-10: 315rem;
	--req-size-11: 380rem;

    --primary-size-0: 30rem;
	--primary-size-1: 37.5rem;
	--primary-size-2: 45rem;
	--primary-size-3: 60rem;
	--primary-size-4: 75rem;
	--primary-size-5: 90rem;
	--primary-size-6: 120rem;
	--primary-size-7: 150rem;
	--primary-size-8: 180rem;
	--primary-size-9: 240rem;
	--primary-size-10: 300rem;
	--primary-size-11: 360rem;
	
	--margin-size: 0.5rem;
	--padding-size: 0.5rem;
	--border-width: calc(1rem/16);

	
}

#page-header {
    padding: 10px 0;
}

#page-header, #primary, #footer {
    min-width: var(--full-size-1);
    max-width: var(--full-size-1);
	width: var(--full-size-1);
    margin: 0 auto;
}

#primary {
    display: flex;
    flex-direction: column;
}

#main {
    max-width: var(--full-size-1);
    display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/*
#sidebar {
    width: 100%;
} */

article, aside {
    margin: var(--margin-size);
    padding: var(--padding-size);
    border-style: solid;
    border-radius: var(--padding-size);
    border-width: 1px;
    box-shadow: calc(var(--padding-size)/2) calc(var(--padding-size)/2) rgb(225, 210, 195);
}

article {
	min-width: calc( var(--full-size-1) - 2*var(--margin-size) );
}

.single  article, .page article {
	min-width: calc( 100% - 2*var(--margin-size) );
}

aside {
	min-width: calc( var(--sidebar-size) - 2*var(--margin-size) );
}

@media only screen and (min-width: 32rem) {
    #page-header, #primary, #footer {
        width: var(--full-size-2);
        min-width: var(--full-size-2);
        max-width: var(--full-size-2);
    }
    
    article {
	    min-width: calc( var(--full-size-2) - 2*var(--margin-size) );
    }
}


@media only screen and (min-width: 40em ) {
    #page-header, #primary, #footer {
        width: var(--full-size-3);
        min-width: var(--full-size-3);
        max-width: var(--full-size-3);
    }

    article {
	    min-width: calc( var(--full-size-3) - 2*var(--margin-size) );
    }

}

@media only screen and (min-width: 48rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-0) + var(--sidebar-size));
        min-width: calc(var(--primary-size-0) + var(--sidebar-size));
        max-width: calc(var(--primary-size-0) + var(--sidebar-size));
    }
    
    #primary {
        flex-direction: row;
    }
    
    #main {
        width: var(--primary-size-0);
        min-width: var(--primary-size-0);
        max-width: var(--primary-size-0); 
        display: flex;
		flex-direction: row;
        flex-wrap: wrap;
    }

    #sidebar {
        width: calc( var(--sidebar-size) - 2*var(--margin-size) );;
    }
    
    article {
	    min-width: calc( var(--primary-size-0) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 55rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-1) + var(--sidebar-size));
        min-width: calc(var(--primary-size-1) + var(--sidebar-size));
        max-width: calc(var(--primary-size-1) + var(--sidebar-size));
    }

    #main {
        width: var(--primary-size-1);
        min-width: var(--primary-size-1);
        max-width: var(--primary-size-1); 
    }
    
    article {
	    width: calc( var(--primary-size-1) - 2*var(--margin-size) );
	    min-width: calc( var(--primary-size-1) - 2*var(--margin-size) );
	    max-width: calc( var(--primary-size-1) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 65rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-2) + var(--sidebar-size));
        min-width: calc(var(--primary-size-2) + var(--sidebar-size));
        max-width: calc(var(--primary-size-2) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-2);
        min-width: var(--primary-size-2);
        max-width: var(--primary-size-2); 
    }

    article {
	    width: calc( (var(--primary-size-2)/2) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-2)/2) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-2)/2) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 80rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-3) + var(--sidebar-size));
        min-width: calc(var(--primary-size-3) + var(--sidebar-size));
        max-width: calc(var(--primary-size-3) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-3);
        min-width: var(--primary-size-3);
        max-width: var(--primary-size-3);
    }

    article {
	    width: calc( (var(--primary-size-3)/2) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-3)/2) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-3)/2) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 95rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-4) + var(--sidebar-size));
        min-width: calc(var(--primary-size-4) + var(--sidebar-size));
        max-width: calc(var(--primary-size-4) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-4);
        min-width: var(--primary-size-4);
        max-width: var(--primary-size-4);
    }

    article {
	    width: calc( (var(--primary-size-4)/3) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-4)/3) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-4)/3) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 110rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-5) + var(--sidebar-size));
        min-width: calc(var(--primary-size-5) + var(--sidebar-size));
        max-width: calc(var(--primary-size-5) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-5);
        min-width: var(--primary-size-5);
        max-width: var(--primary-size-5);
    }

    article {
	    width: calc( (var(--primary-size-5)/3) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-5)/3) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-5)/3) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 140rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-6) + var(--sidebar-size));
        min-width: calc(var(--primary-size-6) + var(--sidebar-size));
        max-width: calc(var(--primary-size-6) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-6);
        min-width: var(--primary-size-6);
        max-width: var(--primary-size-6);
    }

    article {
	    width: calc( (var(--primary-size-6)/4) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-6)/4) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-6)/4) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 175rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-7) + var(--sidebar-size));
        min-width: calc(var(--primary-size-7) + var(--sidebar-size));
        max-width: calc(var(--primary-size-7) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-7);
        min-width: var(--primary-size-7);
        max-width: var(--primary-size-7);
    }

    article {
	    width: calc( (var(--primary-size-7)/4) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-7)/4) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-7)/4) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 205rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-8) + var(--sidebar-size));
        min-width: calc(var(--primary-size-8) + var(--sidebar-size));
        max-width: calc(var(--primary-size-8) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-8);
        min-width: var(--primary-size-8);
        max-width: var(--primary-size-8);
    }

    article {
	    width: calc( (var(--primary-size-8)/6) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-8)/6) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-8)/6) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 270rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-9) + var(--sidebar-size));
        min-width: calc(var(--primary-size-9) + var(--sidebar-size));
        max-width: calc(var(--primary-size-9) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-9);
        min-width: var(--primary-size-9);
        max-width: var(--primary-size-9);
    }

    article {
	    width: calc( (var(--primary-size-9)/6) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-9)/6) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-9)/6) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 330rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-10) + var(--sidebar-size));
        min-width: calc(var(--primary-size-10) + var(--sidebar-size));
        max-width: calc(var(--primary-size-10) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-10);
        min-width: var(--primary-size-10);
        max-width: var(--primary-size-10);
    }

    article {
	    width: calc( (var(--primary-size-10)/6) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-10)/6) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-10)/6) - 2*var(--margin-size) );
	}
}

@media only screen and (min-width: 395rem) {
    #page-header, #primary, #footer {
        width: calc(var(--primary-size-11) + var(--sidebar-size));
        min-width: calc(var(--primary-size-11) + var(--sidebar-size));
        max-width: calc(var(--primary-size-11) + var(--sidebar-size));
    }
        
    #main {
        width: var(--primary-size-11);
        min-width: var(--primary-size-11);
        max-width: var(--primary-size-11);
    }

    article {
	    width: calc( (var(--primary-size-11)/6) - 2*var(--margin-size) );
	    min-width: calc( (var(--primary-size-11)/6) - 2*var(--margin-size) );
	    max-width: calc( (var(--primary-size-11)/6) - 2*var(--margin-size) );
	}
}

.alignleft {
    float: left;
    margin: 0 1.25rem 0.625rem 0;
}

.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
    float: right;
    margin: 0 0 0.625rem 1.25rem;
}