a.skip_link {
	color: var(--text-color-default);	
	position: absolute;
	left: 2rem;
	transform: translateX(-200%);
	transition: transform 0.3s;
}

a.skip_link:focus {
  transform: translateX(0%);
}

nav.navigation {
	overflow: visible; 
	background-color: var(--nav-color-background); 
	opacity: 0%;	
}

.title { grid-area: head; opacity: 0%; }
.topnav { grid-area: tnav; } 
.navigation { grid-area: navi; }
.content { grid-area: main; }            
.footer { grid-area: foot; opacity: 0%; }
.maingridcontainer {
	display: grid;
	margin: 0.25rem; 
	padding: 0.25rem;
	min-width: var(--content-min-width);
	grid-template-columns: 32rem 1fr;
	grid-template-rows: var(--header-height) var(--content-height) var(--footer-height);
	grid-template-areas:
		"head tnav"
		"navi main"
		"navi foot";
}

.content_sc  { grid-area: content_scr; background-color: var(--sc-color-background); border-radius: var(--container-radius); }
.content_test { grid-area: content_tst; background-color: var(--test-color-background); border-radius: var(--container-radius); }
.content_sol { grid-area: content_sol; background-color: var(--solution-color-background); border-radius: var(--container-radius); }
.implementation { grid-area: implement; background-color: var(--implementation-color-background); border-radius: var(--container-radius); }
.pagination { grid-area: pagination; justify-self: end;}
.contentgridcontainer {
	display: grid;
	margin: 0.25rem; 
	padding: 0.75rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: max-content max-content max-content max-content;  
	grid-template-areas: 
		"content_scr content_scr"                
		"content_tst content_sol"
		"implement implement"
		"pagination pagination";
}

.sc_version { grid-area: vers; }
.sc_level { grid-area: levl; }
.sc_numbername { grid-area: nuna; font-size: var(--text-size-larger); font-weight: var(--text-weight-heavy); padding-bottom: 0.25rem;}
.sc_numbername::before { content: "  " / ""; background-image: url("../images/desc.png"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem;	padding: 0 0.75rem 0; }
.sc_descr { grid-area: desc;}
.scgridcontainer {
	display: grid;
	opacity: 0%;
	margin: 0.25rem; 
	padding: 0.75rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 3rem max-content 1fr;
	grid-template-areas: 
		"vers levl"
		"nuna nuna"
		"desc desc";
}

.test_title { grid-area: tst-titl; font-size: var(--text-size-larger); font-weight: 600; letter-spacing: calc(0.24 * var(--text-size-default));}
.test_title::before { content: "  " / ""; background-image: url("../images/test.png"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem;	padding: 0 0.75rem 0; }
.test_manual { grid-area: tst-manu; margin: 0.5rem 0 0.5rem 0; }
.test_manual::before { content: 'Manual testing: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.test_auto { grid-area: tst-auto; margin: 0.5rem 0 0.5rem 0; }
.test_auto::before { content: 'Automated testing: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.test_fail { grid-area: tst-fail; margin: 0.5rem 0.5rem 0.5rem 0;  }
.test_fail::before { content: 'Common failures: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.test_exempt { grid-area: tst-exem; margin: 0.5rem 0 0.5rem 0; }
.test_exempt::before { content: 'Exemptions: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.test_respons { grid-area: tst-resp; margin: 0.5rem 0 0.5rem 0; }
.test_respons::before { content: 'Responsibility: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.testgridcontainer {
	display: grid;
	opacity: 0%;
	margin: 0.25rem; 
	padding: 0.75rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--test_title_height) 1fr 1fr max-content max-content;
	grid-template-areas: 
		"tst-titl tst-titl"
		"tst-manu tst-manu"
		"tst-auto tst-auto"
		"tst-fail tst-exem"
		"tst-fail tst-resp";
}

.sol_title { grid-area: sol-titl; font-size: var(--text-size-larger); font-weight: 600; letter-spacing: calc(0.24 * var(--text-size-default));}
.sol_title::before { content: "  " / ""; background-image: url("../images/idea.png"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem; 	padding: 0 0.75rem 0; }
.sol_method { grid-area: sol-meth; margin: 0.5rem 0 0.5rem 0;}
.sol_method::before { content: 'Solution method: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.sol_targetfile { grid-area: sol-file; margin: 0.5rem 0 0.5rem 0; }
.sol_targetfile::before { content: 'Target: \A'; white-space: pre;font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.sol_justification { grid-area: sol-just; margin: 0.5rem 0.5rem 0.5rem 0; }
.sol_justification::before { content: 'Justification: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.sol_respons { grid-area: sol-resp; margin: 0.5rem 0 0.5rem 0; }
.sol_respons::before { content: 'Responsibility: \A'; white-space: pre; font-weight: var(--text-weight-heavy); font-size: var(--subtitle-size); color: var(--subtitle-color); }
.solutiongridcontainer {
	display: grid;
	opacity: 0%;
	margin: 0.25rem; 
	padding: 0.75rem;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--solutions_title_height) 1fr max-content max-content;
	grid-template-areas: 
		"sol-titl sol-titl"
		"sol-meth sol-meth"
		"sol-file sol-file"
		"sol-just sol-resp"
}

.implementation_title { font-size: var(--text-size-larger); font-weight: 600; letter-spacing: calc(0.24 * var(--text-size-default)); margin: 0.5rem 0 0.5rem 0;}
.implementation_title::before { content: "  " / ""; background-image: url("../images/implementation.png"); background-repeat: no-repeat; background-size: 1.5rem 1.5rem; 	padding: 0 0.75rem 0; }
.implementation {
	margin: 0.25rem;
	padding: 0.75rem;
	
}

.navigation { animation-delay: 100ms; }
.scgridcontainer { animation-delay: 200ms; }
.testgridcontainer { animation-delay: 300ms; }
.solutiongridcontainer { animation-delay: 400ms; }
.footer { animation-delay: 500ms; }


@keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

/******************/
/***  filters   ***/

div.instructions {
	font-size: var(--text-size-smaller);	
	color: var(--text-color-default);
}

div.filters {
	padding: 2rem 1rem 1rem 1rem;
}

button.filterbutton {
	font-size: var(--text-size-default); 
    border: var(--button-filter-border-size) solid var(--button-filter-border-color);
    text-align: center;
    border-radius: var(--button-filter-radius);
	display: inline-block;
	margin: 0.25rem 0.25rem 0 0;
	background-color: var(--button-filter-background-inactive);
	width: 6rem;
	min-height: var(--min-button-target-size);
	color: var(--button-filter-text-color);
}

button.filterbutton:hover {
	background-color: var(--color-highlight);
	color: var(--button-filter-text-color-active);
}

button.filterbutton.active {
	background-color: var(--button-filter-background-active);
	color: var(--button-filter-text-color-active);
}

/*******************************************/
/*** navigation of WCAG success criteria ***/

div.menu {
    padding: 1rem;
    overflow: auto; 
    background-color: var(--background-nav);
}

div.navitem {    
    margin: 1px;
    padding: 1px;       
    border-radius: 4px;
    color: var(--text-color-darken);
}

button.navbutton {
	font-size: var(--button-nav-text-size);
	font-family: inherit;
	margin: 0.25rem 0;
	border: none;
	background-color: var(--button-nav-background);
	color: var(--button-nav-text-color);
	display: block;
	height: auto;
	text-align: left;
	min-height: 24px;
}

button.navbutton.special {
	font-weight: 600;
	margin-bottom: 1rem;
	min-height: 1.5rem;
}

button.navbutton:hover {
	background-color: var(--color-highlight);
	color: var(--button-nav-text-color-hover);
}

button.navbutton.active {
	background-color: var(--button-nav-background-active);
	color: var(--button-nav-text-color-active);
	
	& div.tags > * {
		color: var(--button-nav-text-color-active);
		border-color: var(--button-nav-tags-border-color-active);
	}
}

div.navname {
    display: inline-block;
}

div.tags {
	margin-left: 0.5rem;
	display: inline-block; 
}


div.pagination {
	margin: 0;
	padding: 0.25rem;
}

button.paginationbutton {
	display: inline-block;
	font-size: var(--text-size-default);
	border: var(--button-pagination-border-size) solid var(--button-pagination-border-color);
	background-color: var(--button-pagination-background-color);
	color: var(--button-pagignation-text-color);
	margin: 1rem 0;
	text-align: center;
	border-radius: var(--button-pagination-radius);
	min-height: var(--min-button-target-size);
}

button.paginationbutton:hover {
	background-color: var(--color-highlight);
	color: var(--text-color-active);
}

/********************/
/*** version tags ***/

div.v20, div.v21, div.v22, div.v30 {       
    line-height: var(--tags-lineheight); 
    color: var(--tags-color-inactive);
    background-color: var(--tags-background-inactive);
    padding: 2px 4px;
	margin: 2px;
    border: var(--border-size) solid var(--border-color);
    border-radius: 4px;
    display: inline-block;
	width: var(--tags-width);
	text-align: center;
}

div.v20::after { content: 'V2.0'; }
div.v21::after { content: 'V2.1'; }
div.v22::after { content: 'V2.2'; }
div.v30::after { content: 'V3.0'; }

div.v20.active, div.v21.active, div.v22.active, div.v30.active {
    color: var(--tags-color-active);
    background-color: var(--tags-version-background-active);
    border-color: var(--tags-border-color);
	font-weight: 500;
}

button.navbutton:hover > div.tags > div.v20, 
button.navbutton:hover > div.tags > div.v21, 
button.navbutton:hover > div.tags > div.v22, 
button.navbutton:hover > div.tags > div.v30, 
button.navbutton:hover > div.tags > div.A,
button.navbutton:hover > div.tags > div.AA,
button.navbutton:hover > div.tags > div.AAA {
	color: var(--tags-color-active);
	border-color: var(--tags-color-active);
}

/******************/
/*** level tags ***/

div.A, div.AA, div.AAA {
    line-height: var(--tags-lineheight); 
    color: var(--tags-color-inactive);
    background-color: var(--tags-background-inactive); 
    padding: 2px 4px;
	margin: 2px;
    border: var(--border-size) solid var(--border-color); 
    border-radius: 4px;
    display: inline-block;
	width: var(--tags-width);
	text-align: center;
}

div.A:after { content: "A"; }
div.AA:after { content: "AA"; }
div.AAA:after { content: "AAA"; }

div.A.active, div.AA.active, div.AAA.active {
    color: var(--tags-color-active);
    background-color: var(--tags-level-background-active);
    border-color: var(--tags-border-color);
	font-weight: 500;
}

/************************/
/*** check phase tags ***/

div.designphase, div.developphase, div.testphase {
    line-height: var(--tags-lineheight); 
    color: var(--tags-color-inactive);
    background-color: var(--tags-background-inactive);
    padding: 2px 4px;
    border: var(--border-size) solid var(--border-color);
    border-radius: 4px;
    display: inline-block;    
    margin: 2px 0;
}

div.designphase:after { content: "Designing"; }
div.developphase:after { content: "Development"; }
div.testphase:after { content: "Testing"; }

div.designphase.active, div.developphase.active, div.testphase.active {
    color: var(--tags-color-active);
    background-color: var(--tags-phase-background-active);
    border-color: var(--tags-border-color);
}

/***************************/
/*** implementation tags ***/

div.framework, div.design, div.development, div.contentcreation, div.other {
    line-height: var(--tags-lineheight); 
    color: var(--tags-color-inactive);
    background-color: var(--tags-background-inactive);
    padding: 2px 4px;
    border: var(--border-size) solid var(--border-color);
    border-radius: 4px;
    display: inline-block;    
    margin: 2px 0;
}

div.framework:after { content: "In the design framework"; }
div.design:after { content: "At the design stage"; }
div.development:after { content: "During development"; }
div.contentcreation:after { content: "When creating the content"; }
div.other:after { content: "Other"; }

div.framework.active, div.design.active, div.development.active, div.contentcreation.active, div.other.active {
	color: var(--tags-color-active);
    background-color: var(--tags-phase-background-active);
    border-color: var(--tags-border-color);
}

/**************************/
/*** media size changes ***/

@media (max-width: 1440px) {
	.solutiongridcontainer {
		display: grid;
		margin: .25rem; 
		grid-template-columns: 1fr;
		grid-template-rows: var(--solutions_title_height) 1fr max-content max-content max-content;
		grid-template-areas: 
			"sol-titl"
			"sol-meth"
			"sol-file"			
			"sol-just"
			"sol-resp"
	}

	.testgridcontainer {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: var(--test_title_height) 1fr 1fr max-content max-content max-content;
		grid-template-areas: 
			"tst-titl"
			"tst-manu"
			"tst-auto"
			"tst-fail"
			"tst-exem"
			"tst-resp";
	}
}

@media (max-width: 1280px) {
	.scgridcontainer {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 3rem 3rem max-content 1fr;
		grid-template-areas: 
			"vers"
			"levl"
			"nuna"
			"desc";
	}

	.maingridcontainer {
		display: grid;
		grid-template-columns: 20rem 1fr;
		grid-template-rows: var(--header-height) var(--content-height) var(--footer-height) ;
		grid-template-areas:
			"head tnav"
			"navi main"
			"navi foot";
	}
	
	div.tags { display: none; }
}

@media (max-width: 1024px) {
	.contentgridcontainer {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content min-content min-content min-content;
		grid-template-areas: 
			"content_scr"                
			"content_tst"
			"content_sol"
			"implement"
			"pagination";
	}    
}

@media (max-width: 800px) {
	.maingridcontainer {
		display: grid;
		grid-template-columns: 10rem 1fr;
		grid-template-rows: var(--header-height) var(--content-height) var(--footer-height) ;
		grid-template-areas:
			"head tnav"
			"navi main"
			"navi foot";
	} 
	
	div.tags { display: none; }
}