@font-face {
    font-family: 'Im Weird';
    src: url('fonts/i_mWeird.TTF');
}

body {
    margin: auto;
    align-items: center;
    width: 1120px;
}

.container {
position: relative; 
width: 100%;
height: 500px; 
}

section {
    display: grid;
    grid-template-columns: repeat(48, 1fr);
    grid-column-gap: 24px;
    width: 100%;
    height: 120%;
    position: absolute; 
    top: 0;
    left: 0;
    grid-template-rows: repeat(24, 1fr);
    grid-row-gap: 24 px;
}

a {
    display: contents;
}

.grid1 {
    z-index: 1; /* Lower layer */
}
.grid2 {
    z-index: 2; /* Higher layer */
    
}

header {
    margin: auto;
}

p {
    font-family: 'Im Weird';
    font-size: 120 px;
    margin-top: -30%;
}

link { 
    text-decoration: none;
    color: black;
}

#kidpixgrid {
    grid-column: 7/span 34;
    width: 100%;
    margin-top: -2%;
}

#clickd {
    grid-column: 19/ span 6;
}

#kidpixmain{
    margin-top: 1%;
}

#kidpixtop {
    margin-top: 25%;

}

#click {
    padding-left: 44%;
    padding-top: 25%;
    color: black;
    text-decoration: none;
}

#tostart {
    padding-left: 45%;
    padding-top: 28%;
    color: black;
    text-decoration: none;
}

#pencil {
    grid-column: 10/ span 3;
    grid-row: 3/span 2;
}
#pencil:hover {
    transform: scale(.9);
}

#pen {
    grid-column: 13/ span 3;
    grid-row: 3/span 2;
}
#pen:hover {
    transform: scale(.9);
}

#marker {
    grid-column: 10/ span 3;
    grid-row: 6/span 2;
}
#marker:hover {
    transform: scale(.9);
}

#paint {
    grid-column: 14/ span 3;
    grid-row: 6/span 2;
}
#paint:hover {
    transform: scale(.9);
}

#circle {
    grid-column: 10/ span 3;
    grid-row: 10/span 2;
}
#circle:hover {
    transform: scale(.9);
}

#rectangle {
    grid-column: 14/ span 3;
    grid-row: 10/span 2;
}
#rectangle:hover {
    transform: scale(.9);
}

#triangle {
    grid-column: 10/ span 3;
    grid-row: 14/span 2;
}
#triangle:hover {
    transform: scale(.9);
}

#diamond {
    grid-column: 14/ span 3;
    grid-row: 14/span 2;
}
#diamond:hover {
    transform: scale(.9);
}

#star {
    grid-column: 10/ span 3;
    grid-row: 17/span 2;
}
#star:hover {
    transform: scale(.9);
}

#heart {
    grid-column: 14/ span 3;
    grid-row: 17/span 1;
}
#heart:hover {
    transform: scale(.9);
}

#color {
    grid-column: 11/ span 5;
    grid-row: 20/span 2;
}

#balloon {
    grid-column: 18/ span 3;
    grid-row: 21/span 1;
    
}
#balloon:hover {
    transform: scale(.9);
}

#butterfly {
    grid-column: 20/ span 3;
    grid-row: 21/span 1;
   
}
#butterfly:hover {
    transform: scale(.9);
}

#music {
    grid-column: 23/ span 3;
    grid-row: 21/span 1;
  
}
#music:hover {
    transform: scale(.9);
}

#eraser {
    grid-column: 26/ span 6;
    grid-row: 21/span 2;
}
#eraser:hover {
    transform: scale(.9);
}

#clear {
    grid-column: 32/ span 6;
    grid-row: 20/span 2;
}
#clear:hover {
    transform: scale(.9);
}

#gif {
    grid-column: 18/ span 20;
    grid-row: 3/ span 10;
    z-index: 3;
}