/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Custom Cursor */
body {
    cursor: url("Beetle_unclic.png"), auto;
}

body:active {
    cursor: url("Beetle_clic.png"), auto;
}

* {
    cursor: url("Beetle_unclic.png"), auto;
}

*:active {
    cursor: url("Beetle_clic.png"), auto;
}


/* Color Variables */
:root {
   --gradientTop: #7B5FE8;
    --gradientMiddle: #F5BD93; /* example middle */
    --gradientBottom: #F0F593;
    --border: #C49660;
    --boxBackground: #E3D188;
    --textColor: #f2ffe8;
}

/* Page Background */
body {
    margin: 0;
    padding: 40px 0;
    font-family: Georgia, serif;
    color: var(--textColor);

    position: relative; /* anchors absolute bugs to page */

    background-image:
        url("ginkgo.png"),
        linear-gradient(
            to bottom,
            var(--gradientTop) 0%,
            var(--gradientMiddle) 30%,
            var(--gradientBottom) 100%
        );

    background-repeat: repeat;
    background-size: 150px, auto;
    display: flex;
    justify-content: center;
}

/* Main Container Box */
.container {
    width: 100%;
    max-width: 1100px;
    background: var(--boxBackground);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
    text-align: center;
}
.container {
    max-width: 55rem;
    margin: 5vw auto 12px auto;
    border: 6px ridge var(--border); /*border colour*/
    outline: 3px solid #7A5131; /*outer border colour*/
    outline-offset: 4px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;
}

/* Header */
header {
    background: url("Background_1.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
}

header h1 { 
  font-size: 2.8rem; 
  text-align: center;
  margin: 0; 
  color: white; 
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5); 
  }

/* Bio Section */
.bio {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Plant Section */
.plant-container {
    position: relative;
}

.plant {
    width: 60%;
    max-width: 800px;
    height: auto;
}

/*Text above bugs*/
.bug-link {
    position: absolute;
    text-decoration: none;
}


.bug-label {
    position: absolute;
    top: -70px;   /* instead of bottom: 120% */
    left: 50%;
    transform: translateX(-50%);
    
    background: var(--boxBackground);
    color: #333;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    white-space: nowrap;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 2px solid var(--border);
}

.bug-link:hover .bug-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
    z-index: 2000;
}
   

/*All bugs*/
.bug {
    position: relative;
    transition: transform 0.3s ease;
    transform-origin: center;
    z-index: 1000;
    --rotation: 0deg;
    transform: rotate(var(--rotation));
}

/*Animations*/
.ground:hover {
    animation: wiggle 0.6s ease-in-out infinite;
}

.flying:hover {
    animation: floaty 1.5s ease-in-out infinite;
}

@keyframes wiggle {
    0%   { transform: rotate(var(--rotation)) rotate(-3deg); }
    50%  { transform: rotate(var(--rotation)) rotate(3deg); }
    100% { transform: rotate(var(--rotation)) rotate(-3deg); }
}

@keyframes floaty {
    0%   { transform: rotate(var(--rotation)) translateY(0px); }
    50%  { transform: rotate(var(--rotation)) translateY(-10px); }
    100% { transform: rotate(var(--rotation)) translateY(0px); }
}

/* Tussock caterpillar ONLY*/ 
/*Tussock caterpillar POSITION*/
.bug-link.tussock-cat {
    top: 510px;
    left: 245px;
}
/* Tussock caterpillar IMAGE */
.tussock-cat img {
    width: 100px;
    --rotation: -5deg;
}

/* Tussock moth ONLY */
/* Tussock moth POSITION */
.bug-link.tussock-moth {
    top: 0px;
    left: 450px;
}

/* Tussock moth IMAGE */
.bug-link.tussock-moth img {
    width: 125px;
    --rotation: 10deg;
}

/* Monarch caterpillar ONLY */
/* Monarch caterpillar POSITION */
.bug-link.monarch-cat {
    top: 163px;
    left: 450px;
}

/* Monarch caterpillar IMAGE */
.bug-link.monarch-cat img {
    width: 93px;
    --rotation: -38deg;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
    --gradientTop: #7B5FE8;
    --gradientMiddle: #F5BD93;
    --gradientBottom: #F0F593;
    --boxBackground: #E3D188;
    --textColor: #f2ffe8;
}

}