body {
    background-color: rgb(255, 255, 255);
}

/* NAVBAR */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgb(51, 51, 51);
}

header div {
    display: inline-block;
}

.JS-container img {
    display: inline-block;
    width: 80px;
    padding: 10px;
}

.sections .word-container {
    display: inline-block;
    width: 200px;
    text-align: center;
    font: small-caps bold 22px/1.5 "Helvetice Neue", sans-serif;
    transition: text-shadow .3s ease-out;
}

.letter {
    display: inline-block;
    /* width: 1ch; */
    margin: -4.5px;
    font: bold 35px/1.5 "Helvetica Neue", sans-serif;
    text-transform: lowercase;
    transition: text-shadow .3s ease-out;
}

.letter:hover {
    text-transform: uppercase;
}

#projects .letter:hover { text-shadow: 0 0 15px rgb(9, 112, 209); }
#projects.word-container:hover {text-shadow: 0 0 30px rgb(9, 112, 209); }

#aboutMe .letter:hover { text-shadow: 0 0 15px red; }
#aboutMe.word-container:hover { text-shadow: 0 0 30px red }

#resume .letter:hover { text-shadow: 0 0 15px yellow; }
#resume.word-container:hover { text-shadow: 0 0 30px yellow; }

#contact .letter:hover { text-shadow: 0 0 15px green; }
#contact.word-container:hover { text-shadow: 0 0 30px green; }

a {
    all: unset;
    cursor: pointer;
}

body {
    text-align: center;
}

img {
    padding: 30px;
}