@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

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

body {
    margin: 0;
    overflow: hidden;
}

.fill-parent {
    width: 100%;
    height: 100%;
}

#gallery {
    background-color: #374151;
    position: relative;
    width: 130vmax;
    height: 130vmax;
}

.tile {
    position: absolute;
    border-radius: 8px;
    transition: all 300ms ease;
    opacity: 85%;
    text-decoration: none;
    display: grid;
    place-items: center;
}

.tile:hover {
    transform: scale(1.1);
    opacity: 100%;
}

.tile:nth-child(1) {
    background-color: #80bfff;
    height: 14%;
    aspect-ratio: 3/2;
    left: 53%;
    top: 20%;
}

.tile:nth-child(2) {
    background-color: #eaef81;
    height: 12%;
    aspect-ratio: 5/4;
    left: 36%;
    top: 52%;
}

.tile:nth-child(3) {
    background-color: #5e56e7;
    height: 17%;
    aspect-ratio: 3/2;
    left: 3%;
    top: 6%;
}

.tile:nth-child(4) {
    background-color: #ff8080;
    height: 16%;
    aspect-ratio: 3/2;
    left: 72%;
    top: 70%;
}

.tile:nth-child(5) {
    background-color: #69ce56;
    height: 25%;
    aspect-ratio: 2/3;
    left: 8%;
    top: 68%;
}

.tile:nth-child(6) {
    background-color: #de8035;
    height: 20%;
    aspect-ratio: 5/4;
    left: 60%;
    top: 45%;
}

.tile:nth-child(7) {
    background-color: #ce3de1;
    height: 20%;
    aspect-ratio: 1/1;
    left: 44%;
    top: 76%;
}

.tile:nth-child(8) {
    background-color: #ff9acc;
    height: 24%;
    aspect-ratio: 2/3;
    left: 33%;
    top: 17%;
}

.tile:nth-child(9) {
    background-color: #eec477;
    height: 20%;
    aspect-ratio: 4/5;
    left: 12%;
    top: 35%;
}

.tile:nth-child(10) {
    background-color: #ff80ff;
    height: 22%;
    aspect-ratio: 2/3;
    left: 80%;
    top: 4%;
}

.tile-content {
    color: white;
    font-family: Rubik, sans-serif;
    font-size: 3rem;
    opacity: 0;
    transition: opacity 300ms ease;
    position: relative;
}

.tile:hover > .tile-content {
    opacity: 1;
}

.box-trail-icon-block {
    background-color: white;
    height: 30%;
    aspect-ratio: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 4px 4px 8px #ababab;
    border-radius: 4px;
}

.box-trail-icon-block:nth-child(1) {
    left: 35%;
    top: 30%;
    z-index: 3;
}

.box-trail-icon-block:nth-child(2) {
    left: 50%;
    top: 50%;
    z-index: 2;
}

.box-trail-icon-block:nth-child(3) {
    left: 65%;
    top: 70%;
    z-index: 1;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtRkFBbUY7O0FBRW5GOzs7SUFHSSxzQkFBc0I7QUFDMUI7O0FBRUE7SUFDSSxTQUFTO0lBQ1QsZ0JBQWdCO0FBQ3BCOztBQUVBO0lBQ0ksV0FBVztJQUNYLFlBQVk7QUFDaEI7O0FBRUE7SUFDSSx5QkFBeUI7SUFDekIsa0JBQWtCO0lBQ2xCLGNBQWM7SUFDZCxlQUFlO0FBQ25COztBQUVBO0lBQ0ksa0JBQWtCO0lBQ2xCLGtCQUFrQjtJQUNsQiwwQkFBMEI7SUFDMUIsWUFBWTtJQUNaLHFCQUFxQjtJQUNyQixhQUFhO0lBQ2IsbUJBQW1CO0FBQ3ZCOztBQUVBO0lBQ0kscUJBQXFCO0lBQ3JCLGFBQWE7QUFDakI7O0FBRUE7SUFDSSx5QkFBeUI7SUFDekIsV0FBVztJQUNYLGlCQUFpQjtJQUNqQixTQUFTO0lBQ1QsUUFBUTtBQUNaOztBQUVBO0lBQ0kseUJBQXlCO0lBQ3pCLFdBQVc7SUFDWCxpQkFBaUI7SUFDakIsU0FBUztJQUNULFFBQVE7QUFDWjs7QUFFQTtJQUNJLHlCQUF5QjtJQUN6QixXQUFXO0lBQ1gsaUJBQWlCO0lBQ2pCLFFBQVE7SUFDUixPQUFPO0FBQ1g7O0FBRUE7SUFDSSx5QkFBeUI7SUFDekIsV0FBVztJQUNYLGlCQUFpQjtJQUNqQixTQUFTO0lBQ1QsUUFBUTtBQUNaOztBQUVBO0lBQ0kseUJBQXlCO0lBQ3pCLFdBQVc7SUFDWCxpQkFBaUI7SUFDakIsUUFBUTtJQUNSLFFBQVE7QUFDWjs7QUFFQTtJQUNJLHlCQUF5QjtJQUN6QixXQUFXO0lBQ1gsaUJBQWlCO0lBQ2pCLFNBQVM7SUFDVCxRQUFRO0FBQ1o7O0FBRUE7SUFDSSx5QkFBeUI7SUFDekIsV0FBVztJQUNYLGlCQUFpQjtJQUNqQixTQUFTO0lBQ1QsUUFBUTtBQUNaOztBQUVBO0lBQ0kseUJBQXlCO0lBQ3pCLFdBQVc7SUFDWCxpQkFBaUI7SUFDakIsU0FBUztJQUNULFFBQVE7QUFDWjs7QUFFQTtJQUNJLHlCQUF5QjtJQUN6QixXQUFXO0lBQ1gsaUJBQWlCO0lBQ2pCLFNBQVM7SUFDVCxRQUFRO0FBQ1o7O0FBRUE7SUFDSSx5QkFBeUI7SUFDekIsV0FBVztJQUNYLGlCQUFpQjtJQUNqQixTQUFTO0lBQ1QsT0FBTztBQUNYOztBQUVBO0lBQ0ksWUFBWTtJQUNaLDhCQUE4QjtJQUM5QixlQUFlO0lBQ2YsVUFBVTtJQUNWLDhCQUE4QjtJQUM5QixrQkFBa0I7QUFDdEI7O0FBRUE7SUFDSSxVQUFVO0FBQ2Q7O0FBRUE7SUFDSSx1QkFBdUI7SUFDdkIsV0FBVztJQUNYLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsZ0NBQWdDO0lBQ2hDLCtCQUErQjtJQUMvQixrQkFBa0I7QUFDdEI7O0FBRUE7SUFDSSxTQUFTO0lBQ1QsUUFBUTtJQUNSLFVBQVU7QUFDZDs7QUFFQTtJQUNJLFNBQVM7SUFDVCxRQUFRO0lBQ1IsVUFBVTtBQUNkOztBQUVBO0lBQ0ksU0FBUztJQUNULFFBQVE7SUFDUixVQUFVO0FBQ2QiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCB1cmwoJ2h0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9UnViaWs6d2dodEA1MDAmZGlzcGxheT1zd2FwJyk7XG5cbiosXG4qOjpiZWZvcmUsXG4qOjphZnRlciB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cblxuYm9keSB7XG4gICAgbWFyZ2luOiAwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5maWxsLXBhcmVudCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xufVxuXG4jZ2FsbGVyeSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzM3NDE1MTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgd2lkdGg6IDEzMHZtYXg7XG4gICAgaGVpZ2h0OiAxMzB2bWF4O1xufVxuXG4udGlsZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMzAwbXMgZWFzZTtcbiAgICBvcGFjaXR5OiA4NSU7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgcGxhY2UtaXRlbXM6IGNlbnRlcjtcbn1cblxuLnRpbGU6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMS4xKTtcbiAgICBvcGFjaXR5OiAxMDAlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoMSkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICM4MGJmZmY7XG4gICAgaGVpZ2h0OiAxNCU7XG4gICAgYXNwZWN0LXJhdGlvOiAzLzI7XG4gICAgbGVmdDogNTMlO1xuICAgIHRvcDogMjAlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoMikge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNlYWVmODE7XG4gICAgaGVpZ2h0OiAxMiU7XG4gICAgYXNwZWN0LXJhdGlvOiA1LzQ7XG4gICAgbGVmdDogMzYlO1xuICAgIHRvcDogNTIlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoMykge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICM1ZTU2ZTc7XG4gICAgaGVpZ2h0OiAxNyU7XG4gICAgYXNwZWN0LXJhdGlvOiAzLzI7XG4gICAgbGVmdDogMyU7XG4gICAgdG9wOiA2JTtcbn1cblxuLnRpbGU6bnRoLWNoaWxkKDQpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmY4MDgwO1xuICAgIGhlaWdodDogMTYlO1xuICAgIGFzcGVjdC1yYXRpbzogMy8yO1xuICAgIGxlZnQ6IDcyJTtcbiAgICB0b3A6IDcwJTtcbn1cblxuLnRpbGU6bnRoLWNoaWxkKDUpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNjljZTU2O1xuICAgIGhlaWdodDogMjUlO1xuICAgIGFzcGVjdC1yYXRpbzogMi8zO1xuICAgIGxlZnQ6IDglO1xuICAgIHRvcDogNjglO1xufVxuXG4udGlsZTpudGgtY2hpbGQoNikge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNkZTgwMzU7XG4gICAgaGVpZ2h0OiAyMCU7XG4gICAgYXNwZWN0LXJhdGlvOiA1LzQ7XG4gICAgbGVmdDogNjAlO1xuICAgIHRvcDogNDUlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoNykge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNjZTNkZTE7XG4gICAgaGVpZ2h0OiAyMCU7XG4gICAgYXNwZWN0LXJhdGlvOiAxLzE7XG4gICAgbGVmdDogNDQlO1xuICAgIHRvcDogNzYlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoOCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZjlhY2M7XG4gICAgaGVpZ2h0OiAyNCU7XG4gICAgYXNwZWN0LXJhdGlvOiAyLzM7XG4gICAgbGVmdDogMzMlO1xuICAgIHRvcDogMTclO1xufVxuXG4udGlsZTpudGgtY2hpbGQoOSkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNlZWM0Nzc7XG4gICAgaGVpZ2h0OiAyMCU7XG4gICAgYXNwZWN0LXJhdGlvOiA0LzU7XG4gICAgbGVmdDogMTIlO1xuICAgIHRvcDogMzUlO1xufVxuXG4udGlsZTpudGgtY2hpbGQoMTApIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmY4MGZmO1xuICAgIGhlaWdodDogMjIlO1xuICAgIGFzcGVjdC1yYXRpbzogMi8zO1xuICAgIGxlZnQ6IDgwJTtcbiAgICB0b3A6IDQlO1xufVxuXG4udGlsZS1jb250ZW50IHtcbiAgICBjb2xvcjogd2hpdGU7XG4gICAgZm9udC1mYW1pbHk6IFJ1YmlrLCBzYW5zLXNlcmlmO1xuICAgIGZvbnQtc2l6ZTogM3JlbTtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMzAwbXMgZWFzZTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi50aWxlOmhvdmVyID4gLnRpbGUtY29udGVudCB7XG4gICAgb3BhY2l0eTogMTtcbn1cblxuLmJveC10cmFpbC1pY29uLWJsb2NrIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgICBoZWlnaHQ6IDMwJTtcbiAgICBhc3BlY3QtcmF0aW86IDE7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICAgIGJveC1zaGFkb3c6IDRweCA0cHggOHB4ICNhYmFiYWI7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uYm94LXRyYWlsLWljb24tYmxvY2s6bnRoLWNoaWxkKDEpIHtcbiAgICBsZWZ0OiAzNSU7XG4gICAgdG9wOiAzMCU7XG4gICAgei1pbmRleDogMztcbn1cblxuLmJveC10cmFpbC1pY29uLWJsb2NrOm50aC1jaGlsZCgyKSB7XG4gICAgbGVmdDogNTAlO1xuICAgIHRvcDogNTAlO1xuICAgIHotaW5kZXg6IDI7XG59XG5cbi5ib3gtdHJhaWwtaWNvbi1ibG9jazpudGgtY2hpbGQoMykge1xuICAgIGxlZnQ6IDY1JTtcbiAgICB0b3A6IDcwJTtcbiAgICB6LWluZGV4OiAxO1xufVxuIl19 */