@font-face {
    font-family: DepartureMono; 
    src: url('assets/DepartureMono-1.500/DepartureMono-Regular.woff'); 
}
/* Cat VERY BAD animations before I realised I did not have to chop the whole png up... Will get fixed later */
@keyframes CatLick {
    0% {
        content: url('assets/cat-assets/lick/cat_02d-16.png');
    }
    15% {
        content: url('assets/cat-assets/lick/cat_02d-17.png');
    }
    30% {
        content: url('assets/cat-assets/lick/cat_02d-18.png');
    }
    45% {
        content: url('assets/cat-assets/lick/cat_02d-19.png');
    }
    60% {
        content: url('assets/cat-assets/wash/cat_02d-24.png');
    }
    75% {
        content: url('assets/cat-assets/wash/cat_02d-25.png');
    }
    90% {
        content: url('assets/cat-assets/wash/cat_02d-26.png');
    }
    100% {
        content: url('assets/cat-assets/wash/cat_02d-27.png');
    }
}

@keyframes CatIdle {
    0% {
        content: url('assets/cat-assets/idle2/cat_02d-8.png');
    }
    33% {
        content: url('assets/cat-assets/idle2/cat_02d-9.png');
    }
    66% {
        content: url('assets/cat-assets/idle2/cat_02d-10.png');
    }
    100% {
        content: url('assets/cat-assets/idle2/cat_02d-11.png');
    }
}

@keyframes CatPounce {
    0% {
        content: url('assets/cat-assets/pounce/cat_02d-64.png');
    }
    14.28% {
        content: url('assets/cat-assets/pounce/cat_02d-65.png');
    }
    28.56% {
        content: url('assets/cat-assets/pounce/cat_02d-66.png');
    }
    42.84% {
        content: url('assets/cat-assets/pounce/cat_02d-67.png');
    }
    57.12% {
        content: url('assets/cat-assets/pounce/cat_02d-68.png');
    }
    71.4% {
        content: url('assets/cat-assets/pounce/cat_02d-69.png');
    }
    85.68% {
        content: url('assets/cat-assets/pounce/cat_02d-70.png');
    }
    100% {
        content: url('assets/cat-assets/pounce/cat_02d-70.png');
    }
}

body {
    font-family:DepartureMono;
    background-color: rgb(255, 255, 233);
    display: grid;
    overflow-x: hidden;
}

body::selection {
    background-color: rgb(143, 157, 200);
}

footer {
    text-align: center;
    font-size: x-small;
    color: rgba(123, 78, 89, 1);
}


/* navbar section */
.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
}
.navbar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */ /* annoyingly this was the reason why my navbar idea was not working...*/
    background-color: rgba(143, 157, 200, 0.885);
    display: flex;
    white-space: nowrap;
    justify-content: center;
    margin-left: -10px;
    margin-top: -10px;
    margin-right: -10px;
}

.navbar img:not(#catButton img) {
    width: 16px; 
    height: 16px; 
    vertical-align: middle; 
}

.navbar li a {
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, font-size 0.2s; 
}

.navbar li:hover  a:not(#catButton) {
    background: rgb(58, 66, 91);
    color: rgb(255, 255, 255);
    font-size: 16px;
    position: relative;
    animation: Enlarge 0.2s ease-in-out forwards;
}

.navbar li a:not(#catButton):hover img {
    filter: invert(1);
}

@keyframes Enlarge {
    from {
        transform: scale(1);
    } 
    to {
        transform: scale(1.1) ;
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.35);
        border-radius: 1px;
    }
}


/* Cat-related styling and animations */
#catButton {
    padding: 6px 40px;
    z-index: 9999;
}

#catButton:hover {
    background-color: rgb(255, 255, 233);
}

#catButton:hover img {
    animation: CatLick 1.5s infinite;
}

#catButton img {
    animation: CatIdle 0.7s infinite;
}

#runningCat {
    position: absolute;
    pointer-events: none;
    transition: all 1s;
    animation: CatPounce 1s ease-in-out infinite;
    z-index: 9999;
}


/* bio/about me section */
.bio {
    border-width: 2px;
    border-style: solid;
    border-color: black;
    padding: 5px;
    margin: 5px;
}


.pictureOfMe {
    text-align: center;
    padding-top: 10px;
}

.pictureOfMe img {
    width: 300px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid black;
    animation: FadeInPic 1s ease-in-out;
    user-select: none;
}

@keyframes FadeInPic {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

h1 {
    text-align: center;
    border-right: 3px solid;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    animation: 
        typing 2s steps(40),
        cursor .4s step-end infinite alternate;
}
@keyframes cursor {
    50% {border-color: transparent}
}

@keyframes typing {
    from {
        width: 0%;
    }
}

.aboutMe p{
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    animation: MoveInRight 1s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes MoveInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.aboutMe a{
    color: black;
}

.aboutMe a:hover {
    background: linear-gradient(to right, rgba(123, 78, 89, 0.516) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: HighlightLeftToRight 0.5s ease-in-out forwards;
}
@keyframes HighlightLeftToRight {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0 0;
    }
}

.jak713 {
    font-size: 12px;
    float: right;
}

/* div/box for skills/interests/etc...  */
.secondSection {
    display: flex;
}

table {
    border: 2px black solid;
    margin: 5px;
    padding: 10px;
    text-align: left;
    display: inline-block;
}

table th {
    column-span: 5;
    border-bottom: 2px double black;
}

.currentInterests img {
    width: 64px; 
    height: 64px;
    filter: grayscale(1) brightness(0.5) sepia(1) hue-rotate(180deg) saturate(1.52);
    transition: 0.25s ease-in-out;
}

.currentInterests img:hover {
    filter: none;
    transition: 0.25s ease-in-out;
    transform: scale(1.1);
/* find way to make "tooltip" visible */
}


.currentlyReading img {
    padding: 2px;
    margin: 5px;
    transition: 0.25s ease-in-out;
    width: 200px;
    height: auto;
    filter: grayscale(1) brightness(0.5) sepia(1) hue-rotate(180deg) saturate(1.52);
}

.currentlyReading img:hover {
    filter: none;
    transition: 0.25s ease-in-out;
    transform: scale(1.1);
}

.CSSDrawing {
    background: linear-gradient(#c39ad8,skyblue);
    height: 350px;
    width: 600px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    border: 4px solid #ffd700;
    box-shadow: 0 0 0 6px #ffd90064, 0 0 0 10px rgba(255, 217, 0, 0.427);
    display: flex;
    flex-direction: column;
    opacity: 1;
    position: relative;
    animation: Day 1s ease-in-out;
    transition: 1s ease-in-out;
}

.CSSDrawing:hover {
    animation: Night 0.5s ease-in-out forwards;
}
@keyframes Night {
    0% {
        background: linear-gradient(#c39ad8,skyblue);
    }
    20% {
        background: linear-gradient(#b18ccf,#9bbbe2);
    }
    40% {
        background: linear-gradient(#a07bb8,#7ec9e6);
    }
    60% {
        background: linear-gradient(#6a3c9c,#3b7fa6);
    }
    80% {
        background: linear-gradient(#4d2787,#4689b0);
    }
    100% {
        background: linear-gradient(#401c77,rgb(53, 124, 152));
    }
}

@keyframes Day {
    0% {
        background: linear-gradient(#401c77,rgb(53, 124, 152));
    }
    20% {
        background: linear-gradient(#4d2787,#4689b0);
    }
    40% {
        background: linear-gradient(#6a3c9c,#3b7fa6);
    }
    60% {
        background: linear-gradient(#a07bb8,#7ec9e6);
    }
    80% {
        background: linear-gradient(#b18ccf,#9bbbe2);
    }
    100% {
        background: linear-gradient(#c39ad8,skyblue);
    }
}

.Sun {
    transition: 2s ease-in-out;
    animation: Sunrise 1s ease-in-out;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    margin: 40px;
    padding: 30px;
    background: 
    radial-gradient(#f9cf00, #eda600);
}
@keyframes Sunrise {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

.CSSDrawing:hover .Sun {
    box-shadow: inset 16px 0px #777, inset 16px 0px 1px 2px #777;
    -moz-box-shadow: inset 16px 0px #777, inset 16px 0px 1px 2px #777;
    background: transparent;
    animation: 2s ease-in-out;
    transform: rotate(-25deg);
}

.Stars {
    transition: 1s ease-in-out;
    border-radius: 50%;
    height: 3px;
    width: 3px;
    background-color: white;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.335);
    opacity: 0;
    position: relative;
}

.CSSDrawing:hover .Stars {
    opacity: 1;
    transition: 1s ease-in-out;
}

.Mountain1 {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #424242;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    transition: 1s ease-in-out;
}

.CSSDrawing:hover .Mountain1 {
    border-bottom-color: #000000;
    transition: 1s ease-in-out;
}

.Mountain2 {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 120px solid #440524;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    transition: 1s ease-in-out;
}

.CSSDrawing:hover .Mountain2 {
    border-bottom-color: #363636;
    transition: 1s ease-in-out;
}

.cloud1 {
    height: 50px; 
    width: 80px;
    bottom: 190px;
    left: 20px;
    position: relative;
    aspect-ratio: 2;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #ffffff8a;
    transition: 3s ease-in-out;
    animation: moveBack 3s ease-in-out;
}

.CSSDrawing:hover .cloud1 {
    animation: moveLeft 1s ease-in-out forwards;
}

@keyframes moveLeft {
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes moveBack {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}