/*****************************************************************************************/
/* 											CSS REMEDY 							   	 */
/*****************************************************************************************/
*, *::after, *::before {
  box-sizing:border-box;  
}

/*****************************************************************************************/
/* 											Jouw Styling 							   	 */
/*****************************************************************************************/

/*****************************************************************************************/
/* 											Main elementen 							   	 */
/*****************************************************************************************/
main{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2em 1.5em 1.5em 10% 3.5em 10% 5% 5% 23% 30% 2em 2em 2em;
}

main a{
    text-decoration-line: none;
}

main h1{
    font-size: 1.3em;
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;

    display: flex;
    align-items: center;
}

main ul{
    list-style-type: none;
    display: flex; 
    margin: 0;   
    padding: 0;
}

main ul li h2{
    font-size: .8em;
    font-family: var(--text-LatoBold),"Helvetica Neue", Helvetica, Arial, sans-serif;
}

main ul li a{
    font-size: .8em;
}

/* search button */
main form:nth-of-type(1) {
    position: relative;
    width: 100%;
    max-width: 25em;

    grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
    
}
main form:nth-of-type(1) label{
    display: none;
}
main form:nth-of-type(1) input{
    width: 100%;
    box-sizing: border-box;
    padding: .8em .75em;

    font-size: .6em;
    border: .12em solid var(--color-greytext);
    border-radius: .25em;
    outline: none;
}
main form:nth-of-type(1) button {
    position: absolute;
    right: .95em;
    top: 50%;
    transform: translateY(-50%);
            
    /*reset button styles */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex; 
}       
main form:nth-of-type(1) button img {
    width: 1.5em;
    height: 1.5em;
}

/* nummer 1 naast zoek */
main ul:nth-of-type(1){
    gap: 1em;
    grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 2;
	grid-row-end: 3;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    font-size: .75em;
}
main ul:nth-of-type(1) li{
    display: flex;
    flex-wrap: nowrap;
}
main ul:nth-of-type(1) img{
    width: 1.5em;
}

/* nummer 2 previous/next */
main ul:nth-of-type(2){
    grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 3;
	grid-row-end: 4;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: .2em;
    font-size: .9em;
}

main ul:nth-of-type(2) li:nth-of-type(1) a{
    color: var(--color-previous-text);
}
main ul:nth-of-type(2) li:nth-of-type(1) a:hover{
    text-decoration: none;
}

main ul:nth-of-type(2) li:nth-of-type(2) a{
    color: var(--color-previous-text);
}
main ul:nth-of-type(2) li:nth-of-type(2) a:hover{
    text-decoration: none;
}

/* nummer 3 bookshelves */
main ul:nth-of-type(3){
    display: flex;
    flex-direction: column;
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 5;
}

/* add to shelf button */
main > button {
    width: 6em;
    height: 2em;

    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 6;

    border: 1px solid var(--color-button-border);
    border-radius: .4em;
    background-color: var(--color-button);
    padding: .25em .8em;
    font-size: .7em;
}

/* when clicked on shelf button */
main.is-open form:nth-of-type(2){
    display: block;
    
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 6;

    display: grid;
    grid-template-columns: 7em 1fr;
    grid-template-rows: repeat(2, 1.5em);
    column-gap: .3em;
}
main.is-open form:nth-of-type(2) label{
    font-size: .8em;
    font-family: var(--text-LatoBold);
    grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: 2;
}
main.is-open form:nth-of-type(2) input{
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}
main.is-open form:nth-of-type(2) button{
    grid-column-start: 2;
	grid-column-end: -1;
	grid-row-start: 2;
	grid-row-end: 3;

    font-size: .7em;
    border-radius: .2em;
    border: 1px solid var(--color-button-border);
    background-color: var(--color-button);
}

main.is-open > button{
    display: none;
}



/* nummer 4 reading activity */
main ul:nth-of-type(4){
    display: flex;
    flex-direction: column;

    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
}

/* nummer 5 add books */
main ul:nth-of-type(5){
    display: flex;
    flex-direction: column;

    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 7;
	grid-row-end: 8;
}

/* nummer 6 tools */
main ul:nth-of-type(6){
    display: flex;
    flex-direction: column;

    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 8;
	grid-row-end: 9;
}

/* nummer 7 boeken */
main ul:nth-of-type(7){
    grid-column-start: 2;
	grid-column-end: -1;
	grid-row-start: 4;
	grid-row-end: 9;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(10, 1fr);

    gap: .5em;
}

main ul:nth-of-type(7) li{
    display: flex;
    justify-content: center;
    align-items: center;
}

main ul:nth-of-type(7) img{
    width: 8em;
    box-shadow: .3em .3em .3em rgba(0, 0, 0, 0.25);
}

/* forms over boeken grid */
main form:nth-of-type(3){
    grid-column-start: 2;
	grid-column-end: -1;
	grid-row-start: 11;
	grid-row-end: 12;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: .2em;
}
main form:nth-of-type(3) label{
    font-size: .8em;
    color: var(--color-greytext);
}

main form:nth-of-type(3) select{
    font-size: .9em;
    color: var(--color-selecttext);
    height: 1.5em;
}

main form:nth-of-type(4){
    grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 12;
	grid-row-end: 13;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    gap: .2em;
}
main form:nth-of-type(4) label{
    font-size: .8em;
    color: var(--color-greytext);
}

main form:nth-of-type(4) select{
    font-size: .9em;
    color: var(--color-selecttext);
    height: 1.5em;
    width: 6em;
}

/* nummer 8 previous/next */
main ul:nth-of-type(8){
    grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 13;
	grid-row-end: -1;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: .2em;
    font-size: .9em;
}

main ul:nth-of-type(8) li:nth-of-type(1) a{
    color: var(--color-previous-text);
}
main ul:nth-of-type(8) li:nth-of-type(1) a:hover{
    text-decoration: none;
}

main ul:nth-of-type(8) li:nth-of-type(2) a{
    color: var(--color-previous-text);
}
main ul:nth-of-type(8) li:nth-of-type(2) a:hover{
    text-decoration: none;
}

/****************************************************************/
/* 		 			Dark mode header							*/
/****************************************************************/
@media (prefers-color-scheme: dark) {
	main ul:nth-of-type(1) img{
        filter: invert();
    }

    main form:nth-of-type(4) a img{
        filter: invert();
    }
}

/*****************************************************************************************/
/* 											Toegankelijkheid		 					 */
/*****************************************************************************************/
body a:hover{
    text-decoration: underline;
}

main h1 a:hover{
    text-decoration: none;
}

body a:focus{
    border: 2px solid var(--color-links);
    border-radius: .5em;
    padding: .2em;
}

body a:focus-visible{
    border: 2px solid var(--color-links);
}

/****************************************************************/
/* 		 			main minimaal 24em 			    			*/
/****************************************************************/
@media (min-width:24em) {
    main{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 2em 1.5em 1.5em 15% 3em 12% 8% 5% 23% 10% 2em 2em 2em;
    }

   /* nummer 7 boeken */
    main ul:nth-of-type(7){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 4;
        grid-row-end: 8;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }
}

/****************************************************************/
/* 		 			main minimaal 28em 			    			*/
/****************************************************************/
@media (min-width:28em) {
   
    main{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 2em 1.5em 20% 3.5em 16% 10% 30% 2em 2em;

        transition: 1s;
    }

    main h1{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    /* search button */
    main form:nth-of-type(1) {
        position: relative;
        width: 100%;
        max-width: 25em;

        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        
    }

    main form:nth-of-type(1) button {
        position: absolute;
        right: .95em;
        top: 50%;
        transform: translateY(-50%);
                
        /*reset button styles */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex; 
    }       

    /* nummer 1 naast zoek */
    main ul:nth-of-type(1){
        gap: 1em;
        grid-column-start: 3;
        grid-column-end: -1;
        grid-row-start: 1;
        grid-row-end: 2;

        font-size: .9em;
    }

    /* nummer 2 previous/next */
    main ul:nth-of-type(2){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 2;
        grid-row-end: 3;

        font-size: 1em;
    }

    /* nummer 3 bookshelves */
    main ul:nth-of-type(3){
        display: flex;
        flex-direction: column;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    /* add to shelf button */
    main > button {
        width: 6em;
        height: 2em;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;

        border: 1px solid var(--color-button-border);
        border-radius: .4em;
        background-color: var(--color-button);
        padding: .25em .8em;
        font-size: .7em;
    }
    main.is-open form:nth-of-type(2){
        display: block;
        
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;

        display: grid;
        grid-template-columns: 7em 1fr;
        grid-template-rows: repeat(2, 1em);
    }

    /* nummer 4 reading activity */
    main ul:nth-of-type(4){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    /* nummer 5 add books */
    main ul:nth-of-type(5){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 6;
        grid-row-end: 7;
    }

    /* nummer 6 tools */
    main ul:nth-of-type(6){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 7;
        grid-row-end: 8;
    }

    /* nummer 7 boeken */
    main ul:nth-of-type(7){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 3;
        grid-row-end: 8;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    main ul:nth-of-type(7) li{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* forms over boeken grid */
    main form:nth-of-type(3){
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 8;
        grid-row-end: 9;

        display: flex;
        justify-content: flex-end;
        align-items: center;

        gap: .2em;
    }

    main form:nth-of-type(4){
        grid-column-start: 3;
        grid-column-end: -1;
        grid-row-start: 8;
        grid-row-end: 9;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        gap: .2em;
    }

    /* nummer 8 previous/next */
    main ul:nth-of-type(8){
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start: 9;
        grid-row-end: 10;

        font-size: 1em;
    }

}


/****************************************************************/
/* 		 			main minimaal 38em 			    			*/
/****************************************************************/
@media (min-width:38em) {
    main{
        transition: 1s;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 2em 1.5em 20% 3.5em 16% 10% 35% 2em 2em;
    }

    main h1{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    /* search button */
   main form:nth-of-type(1) {
        position: relative;
        width: 100%;
        max-width: 25em;

        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    main form:nth-of-type(1) button {
        position: absolute;
        right: .95em;
        top: 50%;
        transform: translateY(-50%);
                
        /*reset button styles */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex; 
    }       

    /* nummer 1 naast zoek */
    main ul:nth-of-type(1){
        gap: 1em;
        grid-column-start: 3;
        grid-column-end: -1;
        grid-row-start: 1;
        grid-row-end: 2;

        font-size: .9em;
    }

    /* nummer 2 previous/next */
    main ul:nth-of-type(2){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 2;
        grid-row-end: 3;

        font-size: 1em;
    }

    /* nummer 3 bookshelves */
    main ul:nth-of-type(3){
        display: flex;
        flex-direction: column;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    /* add to shelf button */
    main > button {
        width: 6em;
        height: 2em;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;

        border: 1px solid var(--color-button-border);
        border-radius: .4em;
        background-color: var(--color-button);
        padding: .25em .8em;
        font-size: .7em;
    }
    main.is-open form:nth-of-type(2){
        display: block;
        
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;

        display: grid;
        grid-template-columns: 7em 1fr;
        grid-template-rows: repeat(2, 1em);
    }

    /* nummer 4 reading activity */
    main ul:nth-of-type(4){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    /* nummer 5 add books */
    main ul:nth-of-type(5){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 6;
        grid-row-end: 7;
    }

    /* nummer 6 tools */
    main ul:nth-of-type(6){
        display: flex;
        flex-direction: column;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 7;
        grid-row-end: 8;
    }

    /* nummer 7 boeken */
    main ul:nth-of-type(7){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 3;
        grid-row-end: 8;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    main ul:nth-of-type(7) li{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main ul:nth-of-type(7) img{
    width: 10em;
    box-shadow: .3em .3em .3em rgba(0, 0, 0, 0.25);
    }

    /* forms over boeken grid */
    main form:nth-of-type(3){
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 8;
        grid-row-end: 9;

        display: flex;
        justify-content: flex-end;
        align-items: center;

        gap: .2em;
    }

    main form:nth-of-type(4){
        grid-column-start: 3;
        grid-column-end: -1;
        grid-row-start: 8;
        grid-row-end: 9;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        gap: .2em;
    }

    /* nummer 8 previous/next */
    main ul:nth-of-type(8){
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start: 9;
        grid-row-end: 10;

        font-size: 1em;
    }


   
}

/****************************************************************/
/* 		 			main minimaal 50em 			    			*/
/****************************************************************/
@media (min-width:50em) {
    main{
        display: grid;
        grid-template-columns: 9.5em 9.5em repeat(4, 1fr);
        grid-template-rows: 2em 1.5em 18% 2em 18% 8% 10% 2em 2em;

        transition: 1s;
    }

    main form:nth-of-type(1) {
        position: relative;
        width: 100%;
        max-width: 25em;

        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
    }

/* nummer 7 boeken */
    main ul:nth-of-type(7){
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 3;
        grid-row-end: 8;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    main form:nth-of-type(4){
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 8;
        grid-row-end: 9;

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        gap: .5em;
    }
    /* nummer 8 previous/next */
    main ul:nth-of-type(8){
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 9;
        grid-row-end: 10;

        font-size: 1em;
    }
}