@font-face {
	font-family: 'Liter';
    src: url('fonts/Liter/Liter-Regular.ttf') format('woff2-variations');
	font-weight: 100 1000;	
}

* {
    padding: 0;
    margin: 0;

}
body {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;    
    justify-items: center;
    align-items: center;
    grid-gap: 2rem;
    width: 97vw;
    height: 95vh;
    margin: 2rem;
    overflow: hidden;
    touch-action: none; 
    overscroll-behavior: contain;
}
p {
    position: fixed;
    font-family:'Liter';
    font-size: 2.2rem;
    line-height: 2.6rem;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: 88vw;
    cursor: none;
}
div {
    display: flex;
    justify-content: center;
    align-items: center;
}
canvas {
    width: 180px;
    height: 250px;
    grid: flex;
    border-radius: 50%;
    filter: blur(0.25rem);
    cursor: pointer;
}
#canvas1 {
    grid-column: 1;
    grid-row: 1;
}
#canvas2 {
    grid-column: 5;
    grid-row: 1;
}
#canvas3 {
    grid-column: 7;
    grid-row: 1;
} 
#canvas4 {
    grid-column: 3;
    grid-row: 2;
}
#canvas5 {
    grid-column: 6;
    grid-row: 2;
}
#canvas6 {
    grid-column: 4;
    grid-row: 3;
} 
#canvas7 {
    grid-column: 8;
    grid-row: 3;
}
#canvas8 {
    grid-column: 2;
    grid-row: 3;
}

/* Laptop */
@media (max-width: 1440px) {
    body {
        grid-template-columns: repeat(6, 1fr);
        width: 95vw;
		height: auto;
    }
    #canvas2 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 6;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 2;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}
@media (max-width: 1366px) {
    #canvas2 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 6;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 2;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}
@media (max-width: 1280px) {
    body {
        grid-gap: 1rem;
    }
    #canvas2 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 6;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 2;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}
@media (max-width: 1194px) {
    body {
        width: 94vw;
		height: auto;
    }
    canvas {
        max-width: 160px;
        max-height: 220px;
    }
    p {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    #canvas2 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 6;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 4;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 2;
        grid-row: 3;
    }
}

/* iPad */
@media (max-width: 1180px) {
    body {
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 1.5rem;
    }
    p {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 2;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 5;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 1024px) {
    body {
        grid-template-columns: repeat(5, 1fr);
        width: 93vw;
		height: auto;
    }
    p {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    canvas {
        max-width: 170px;
        max-height: 230px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 1;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 3;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 960px) {
    body {
        grid-template-columns: repeat(6, 1fr);
    }
    canvas {
        max-width: 125px;
        max-height: 170px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 2;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 5;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}

@media (max-width: 950px) {
    body {
        grid-template-columns: repeat(5, 1fr);
        width: 92vw;
		height: auto;
    }
    canvas {
        max-width: 155px;
        max-height: 215px;
    }
    #canvas2 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 5;
    }
    #canvas6 {
        grid-column: 1;
        grid-row: 4;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 5;
    }
    #canvas8 {
        grid-column: 3;
        grid-row: 3;
    }
}

@media (max-width: 926px) {
    body {
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 1rem;
        margin: 1rem;
    }
    canvas {
        max-width: 135px;
        max-height: 180px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}

@media (max-width: 915px) {
    canvas {
        max-width: 133px;
        max-height: 183px;
    }
}

@media (max-width: 900px) {
    body {
        grid-template-columns: repeat(5, 1fr);
    }
    canvas {
        max-width: 160px;
        max-height: 215px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 5;
    }
    #canvas6 {
        grid-column: 4;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 3;
        grid-row: 5;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 4;
    }
}
@media (max-width: 896px) {
    body {
        grid-template-columns: repeat(6, 1fr);
    }
    p {
        font-size: 1.5rem;
        line-height: 1.7rem;
    }
    canvas {
        max-width: 130px;
        max-height: 180px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}
@media (max-width: 883px) {
    canvas {
        max-width: 125px;
        max-height: 180px;
    }
}

@media (max-width: 854px) {
    canvas {
        max-width: 120px;
        max-height: 170px;
    }
}

@media (max-width: 834px) {
    body {
        grid-template-columns: repeat(5, 1fr);
    }
    canvas {
        max-width: 148px;        
		max-height: 200px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 4;
    }
    #canvas6 {
        grid-column: 4;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 3;
        grid-row: 4;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 820px) {
    canvas {
        max-width: 145px;
        max-height: 195px;
    }
}

@media (max-width: 812px) {
    body {
        grid-template-columns: repeat(6, 1fr);
    }
    canvas {
        max-width: 115px;
        max-height: 155px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}

@media (max-width: 810px) {
    body {
        grid-template-columns: repeat(5, 1fr);
    }
    canvas {
        max-width: 140px;
        max-height: 195px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 4;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 4;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 800px) {
    body {
        grid-template-columns: repeat(6, 1fr);
        width: 90vw;
		height: auto;
    }
    p {
        font-size: 1.4rem;
        line-height: 1.6rem;
    }
    canvas {
        max-width: 115px;
        max-height: 155px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    body {
        grid-template-columns: repeat(5, 1fr);
    }
    canvas {
        max-width: 134px;
        max-height: 180px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 4;
    }
    #canvas6 {
        grid-column: 4;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 3;
        grid-row: 4;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Mobile */
@media (max-width: 760px) {
    body {
        grid-template-columns: repeat(6, 1fr);
		width: 86vw;
		height: auto;
    }
    canvas {
        max-width: 108px;
        max-height: 142px;
        filter: blur(0.2rem);
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 6;
        grid-row: 2;
    }
}

@media (max-width: 740px) {
    canvas {
        max-width: 103px;
        max-height: 140px;
    }
}
@media (max-width: 736px) {
    body {
        grid-template-columns: repeat(5, 1fr);
        width: 89vw;
		height: auto;
    }
    canvas {
       max-width: 128px;
        max-height: 168px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 2;
    }
}
@media (max-width: 720px) {
    body {
        grid-template-columns: repeat(5, 1fr);
		width: 84vw;
		height: auto;
    }
    canvas {
        max-width: 125px;
        max-height: 170px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 5;
    }
    #canvas6 {
        grid-column: 4;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 3;
        grid-row: 4;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 667px) {
    body {
        grid-template-columns: repeat(5, 1fr);
        width: 88vw;
		height: auto;
    }
    canvas {
        max-width: 114px;
        max-height: 152px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 5;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas7 {
        grid-column: 4;
        grid-row: 1;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (max-width: 640px) {
    canvas {
        max-width: 105px;
        max-height: 140px;
    }
}

@media (max-width: 600px) {
    body {
        grid-template-columns: repeat(4, 1fr);
		width: 82vw;
		height: auto;
    }
    canvas {
        max-width: 130px;
        max-height: 172px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 4;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 4;
    }
    #canvas8 {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 568px) {
    body {
        grid-template-columns: repeat(7, 1fr);
        width: 86vw;
		height: auto;
    }
    canvas {
        max-width: 60px;
        max-height: 85px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 5;
        grid-row: 1;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 4;
        grid-row: 2;
    }
    #canvas6 {
        grid-column: 2;
        grid-row: 3;
    } 
    #canvas7 {
        grid-column: 6;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 7;
        grid-row: 2;
    }
}

@media (max-width: 428px) {
    body {
        grid-template-columns: repeat(3, 1fr);
		width: 80vw;
		height: auto;
    }
    canvas {
        max-width: 120px;
        max-height: 160px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 1;
        grid-row: 3;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 4;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 2;
        grid-row: 4;
    }
}

@media (max-width: 414px) {
    p {
        font-size: 1.3rem;
        line-height: 1.5rem;
    }
    canvas {
        max-width: 116px;
        max-height: 155px;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 1;
        grid-row: 3;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 4;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 2;
        grid-row: 4;
    }
}
@media (max-width: 412px) {
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 1;
        grid-row: 3;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 4;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 2;
        grid-row: 4;
    }
}

@media (max-width: 390px) {
    canvas {
        max-width: 110px;
        max-height: 150px;
    }
}

@media (max-width: 384px) {
    canvas {
        max-width: 106px;
        max-height: 140px;
    }
}

@media (max-width: 375px) {
    body{
        grid-gap: 0.75rem;
    }
    #canvas2 {
        grid-column: 3;
        grid-row: 1;
    }
    #canvas3 {
        grid-column: 2;
        grid-row: 2;
    } 
    #canvas4 {
        grid-column: 3;
        grid-row: 2;
    }
    #canvas5 {
        grid-column: 1;
        grid-row: 3;
    }
    #canvas6 {
        grid-column: 3;
        grid-row: 4;
    } 
    #canvas7 {
        grid-column: 2;
        grid-row: 3;
    }
    #canvas8 {
        grid-column: 2;
        grid-row: 4;
    }
}

@media (max-width: 360px) {
    p {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }
    canvas {
        max-width: 100px;
        max-height: 132px;
    }
}

@media (max-width: 320px) {
    canvas {
        max-width: 88px;
        max-height: 118px;
    }
}