@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html{
    background-color: #d1a4ff;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Press Start 2P', monospace;
}
#under {
    position: absolute;
    left: 20px;
    top: 10px;
}
#under2 {
    position: absolute;
    right: 20px;
    top: 10px;
}

.navbar{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}


#home a{
    color: #6b0505;
    background-color: #ff7272;
    border: 2.5px solid #6b0505;
    padding: 15px;
}

#home a:hover{
    color: #000000;
    background-color: #ffffff;
    border: 2.5px solid #000000;

    font-size: 15px;
}

#blog a{
    color: #606307;
    background-color: #faff63;
    border: 2.5px solid #606307;
    padding: 15px;
}

#blog a:hover{
    color: #000000;
    background-color: #ffffff;
    border: 2.5px solid #000000;
    font-size: 15px;
}

#shrines a{
    color: #275d05;
    background-color: #79ff25;
    border: 2.5px solid #275d05;
    padding: 15px;
}

#shrines a:hover{
    color: #000000;
    background-color: #ffffff;
    border: 2.5px solid #000000;
    font-size: 15px;
}

#about a{
    color: #035a5a;
    background-color: #25ffff;
    border: 2.5px solid #035a5a;
    padding: 15px;

}

#about a:hover{
    color: #000000;
    background-color: #ffffff;
    border: 2.5px solid #000000;

    font-size: 15px;
}

#projects a{
    color: #43087d;
    background-color: #cb63ff;
    border: 2.5px solid #43087d;
    padding: 15px;

}

#projects a:hover{
    color: #000000;
    background-color: #ffffff;
    border: 2.5px solid #000000;
    font-size: 15px;
}

.navbar a{
    text-decoration: none;
    font-size: 13px;
    transition: 
        background-color 0.5s,
        color 0.6s,
        border-color 0.5s;
    display: inline-block;
    white-space: nowrap;

}

li {
list-style: none;
    
}
.navbar ul{
     display: flex;
     gap: 40px;
}