/*set heart and star to 0px if viewport too small*/

@media (max-width: 625px) {
    .heart {
    width: auto;
    }
}
.heart { 
    grid-area: 1 / 1 / 2 / 2;
    background-color: transparent;
    background-image: url(../img/nav/heart.png); 
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}
.nav-grid {
    grid-area: 1 / 2 / 2 / 3;
    background-color: transparent;
    background-image: url(../img/nav/field.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: repeat(4, auto);
    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    align-items: center;
}
.star { 
    grid-area: 1 / 3 / 2 / 4;
    background-color: transparent;
    background-image: url(../img/nav/star.png); 
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
} 

.nav-diary { 
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    flex-direction: column;
    min-width: 48px;
}
.nav-play { 
    grid-area:  1 / 2 / 2 / 3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    flex-direction: column;
    min-width: 48px;
}
.nav-about {
    grid-area: 1 / 3 / 2 / 4;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    flex-direction: column;
    min-width: 48px;
}
.nav-dev {
    grid-area: 1 / 4 / 2 / 5;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    flex-direction: column;
    min-width: 48px;
}
.navlink {
    font-size: 110%;
    font-weight: bold;
    color: #C0AAC0;
    text-align: center;
}
.navlink a:link {
    color: #C0AAC0;
}
.navlink a:visited {
    color: #C0AAC0;
}
.navlink a:hover {
    color: #f463ad;
}
.navlink a:active {
    color: #C0AAC0;
}
.nav-grid img {
    height: auto;
    width: 100%;
}
.links { 
    grid-area: 2 / 1 / 3 / 2;
    background-color: black; 
    width: 100vw;
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 1em;
}
.links a {
    color: #C0AAC0;
}