*  *::before *::after {/* reset all css styles here */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box; /* A common addition for consistent box model */
}

body {
    margin-left: 20px;
    margin-right: 20px;

}
/* --- 1. Base Anchor Tag Styling (Making it look like a button) --- */
.btn-link {
    /* Box Model & Layout */
    display: inline-flex; /* Use flexbox for easy vertical alignment */
    align-items: center;  /* Centers content vertically */
    gap: 10px;            /* Space between text and icon */
    padding: 12px 24px;   /* Size of the button */
    margin:6px;
    
    /* Appearance */
    background-color: #256fdd; /* A vibrant pink/red color */
    color: #ffffff;            /* White text */
    text-decoration: none;     /* Remove the underline */
    border-radius: 8px;        /* Rounded corners */
    border: none;              /* Ensure no default border issues */
    cursor: pointer;           /* Hand cursor on hover */
    font-size: 1rem;           /* Standard font size */
    font-weight: 600;          /* Bolder text */
    
    /* Positioning Context for pseudo-elements */
    position: relative;        /* Required for ::after absolute positioning */
    overflow: hidden;          /* Keeps any overflowing effects inside the button shape */
    
    /* Smooth Transitions for base properties */
    transition: background-color 0.3s ease, transform 0.1s ease;
}

/* --- 2. Interactivity (Hover/Focus/Active States) --- */
.btn-link:hover {
    background-color: #256fdd; /* Darker background on hover */
}

.btn-link:focus {
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 0 4px rgba(233, 78, 119, 0.4); /* Custom accessible focus ring */
}

.btn-link:active {
    background-color: #256fdd; /* Even darker when clicked */
    transform: translateY(1px); /* Slight press down effect */
}

/* --- 3. Using ::after (Dynamic Icon) --- */
.btn-link::after {
    content: "\2192"; /* Unicode for a right arrow (→) content: "\2190"; /* Outputs: ← */
    display: inline-block;
    margin-left: 5px;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth movement transition */
}

.btn-link:hover::after {
    transform: translateX(5px); /* Move the arrow 5px to the right on hover */
    opacity: 1;
}

/* --- 4. Using ::before (Subtle Overlay Effect) --- */
.btn-link::before {
    content: ""; /* Must have content, even if empty */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 100%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows clicks to pass through the overlay to the anchor tag */
}

.btn-link:hover::before {
    opacity: 1; /* Fade in the glossy overlay on hover */
}



#info-card-container {
    
    max-width: 1240px;
    display: grid;
    justify-content: space-around;
    gap: 5px;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    grid-template-areas:
        "card-header card-header card-header"
        /*grid template define the area*/
        "card-image card-image card-info"
        "card-image card-image card-mission"
        "card-image card-image card-link"
        "store-link store-link card-link"
        "footer footer footer"

}

#cardheaderId {
    grid-area: card-header;
    border: 0px solid cadetblue;
    border-radius: 10px;
    display: flex;
    justify-content: left;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
}

#cardheaderId>h5 {
    font-size: 1em;
    padding: 0%;
}

#hammy-img {
    grid-area: card-image;
    margin-right: 20px;

}

#ecoWardensId{
    border:2px solid rgb(62, 189, 206);
    border-radius: 10px;
}

#hammyId {
    border: 2px solid cornflowerblue;
    border-radius: 10px;
}

#biographyId {
    grid-area: card-info;
    /* # hash symbol = id, . dot symbol = class */
    background-color: #dac8c8;
    border: 5px solid cornflowerblue;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
}

#biographyId > div#bioNameId{
    border:1px solid #3a3737;
    margin:10px;
    padding:10px;
    background-color: #d4c9c9;
}

#bioNameTitle{
    font-family: Arial, Helvetica, sans-serif;
   
}
#bioNameTitleLabel{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}
#bioNameTitleContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
}


#biographyId > div#bioTitleId{
    border:1px solid #008000;
    margin:10px;
    padding:10px;
    background-color: #b4eec5;
}
#bioTitle{
    font-family: Arial, Helvetica, sans-serif;
}
#bioTitleLabel{ 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}
#bioTitleContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
}


#biographyId > div#bioDomainId{
    border:1px solid  #13138b;
    margin:10px;
    padding:10px;
    background-color: #93e2e2;
}

#bioDomainTitle{
    font-family: Arial, Helvetica, sans-serif;
}
#bioDomainTitleLabel{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}
#bioDomainTitleContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
}

#biographyId > div#bioSpeciesId{
    border:1px solid #daa520;
    margin:10px;
    padding:10px;
    background-color: rgb(102, 214, 214);
}
#bioSpeciesTitle{
    font-family: Arial, Helvetica, sans-serif;
}
#bioSpeciesTitleLabel{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}
#bioSpeciesTitleContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
}


#biographyId > div#bioDutiesId{
    border:1px solid rgb(218, 165, 32);
    margin:10px;
    padding:10px;
}
#biographyId > label#bioDutiesLabel{
    font-family: Arial, Helvetica, sans-serif;
}


p #boiDuties{
    font-family: Arial, Helvetica, sans-serif;
    
}

#missionId {
    grid-area: card-mission;
    border: 5px solid rgba(56, 148, 56, 0.555);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
}
#missionTitle{
    font-family: Arial, Helvetica, sans-serif;
}

#missionTitleContent{
    font-family: Arial, Helvetica, sans-serif
}

#linkContainerId {
    grid-area: card-link;
    border-radius: 10px;
    padding: 10px;
}

#storeLinkId{
    grid-area:store-link;
  
    border-radius: 10px;
    padding:10px;
}

#footerId{
    grid-area:footer;
    justify-content: center;
    border:2px solid rgb(20, 19, 20);
    margin:3px;
    margin-top: 20px;
    padding:10px;
    font: 1em sans-serif;
}
.hidden{
    display: none;
}