/* || PROJECT ICONS */
.project:hover {
    transform: scale(1.05);
}

.projectBackground {
    background-color: rgb(173, 170, 235);
    padding: 5px;
}

.projectSection {
    display: grid;
    grid-template-areas:
    "languageIcon decentIcon snakeIcon"
    "dotIcon treeikaIcon waddleIcon"
    "dimensionIcon dimensionIcon dimensionIcon";
    gap: 3px;
    background-color: rgb(173, 170, 235);
    padding: 10px;
}

.container div.languageIcon {
    grid-area: languageIcon;
}

.container div.decentIcon {
    grid-area: decentIcon;
}

.container div.snakeIcon {
    grid-area: snakeIcon;
}

.container div.dotIcon {
    grid-area: dotIcon;
}

.container div.treeikaIcon {
    grid-area: treeikaIcon;
}

.container div.waddleIcon {
    grid-area: waddleIcon;
}

.container div.dimensionIcon {
    grid-area: dimensionIcon;
}

/* || Grid */
.container {
    display: grid;
    grid-template-areas:
    "header header"
    "project project"
    "about skills";
    gap: 3px;
    background-color: rgb(173, 170, 235);
    padding: 10px;
}

.container div {
    padding: 10px;
}

.container div.header {
    grid-area: header;
}

.container div.projectSection {
    grid-area: project;
}

.container div.about {
    grid-area: about;
}

.container div.skills {
    grid-area: skills;
}