@charset "UTF-8";


body {
    /* This page will be more text heavy, so I went for Bush script
        It's easier on the eye than Comic Sans whilst retaining that charm */
    font-family: 'Brush Script MT', cursive; 
    background-image: radial-gradient(lightblue, white);
}

h1, h2, h3, h4, h5, h6 {
    color: royalblue; /* Bright blue for a fun, playful vibe */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
    background-image:linear-gradient(transparent, yellow, transparent);
    background-repeat: no-repeat;
    border-radius: 2em;
}

@keyframes SlideDown {
    from {opacity: 0; transform: translateY(-300px);}
    to  {opacity: 100; transform: translateY(0px);}
    
}

@keyframes SlideLeft {
    from {opacity: 0; transform: translateX(-300px);}
    to  {opacity: 100; transform: translateY(0px);}
    
}

@keyframes SlideRight {
    from {opacity: 0; transform: translateX(300px);}
    to  {opacity: 100; transform: translateY(0px);}
    
}

@keyframes SlideUp {
    from {opacity: 0; transform: translateY(300px);}
    to  {opacity: 100; transform: translateY(0px);}
    
}

h1 {
    text-align: center;
    font-size: 72px;
    animation: SlideDown 2s ;
}

nav{
    display: flex;
    flex-direction: row;
    margin-bottom: 120px;
}

nav a {
    background-color: royalblue; /* Bright yellow for a fun, playful vibe */
    border: 6px solid yellow; /* Orange border for contrast */
    border-radius: 35px; /* Rounded corners for a softer look */
    padding: 10px;
    margin: 6px;
    text-align: center;
    font-size:14;  

}

nav a:hover {
    border-color: orange; /* Change border color on hover for added effect */
    cursor: pointer; /* Change mouse to finger one, only good on PC though */
    box-shadow: -30px 6px 3px rgba(0, 0, 0, 0.75); 
    transform:rotate3d(1, 1, 0.5,45deg);
    transition: all;
    transition-duration: 500ms;
}

nav a:active {
    background-color: white;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Inset shadow for a pressed effect */
}


/*Link specific styling */
a {
    color: black;
    text-decoration: none; /* Remove underline for a cleaner look */
    font-weight: bold; 
}
a:hover {
    color: yellow; 
}

#home {
    animation: SlideLeft 2s;
}

#next {
    animation: SlideRight 2s
}

#previous{
    animation: SlideDown 2s;
}

section {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    background-color: whitesmoke; /* White background for the intro section */
    border: 4px solid royalblue; /* Blue border to match the theme */
    border-radius: 20px; /* Rounded corners for a softer look */
    padding: 20px; /* moves the content more toward the centre, just nicer spacing */
    width: 80%; 
    font-size: 24px; /* Larger font size for better readability */
    text-align: center; /* Center the text */
    animation: SlideUp 3s;
}

article {
   display: grid;
   place-items: center;
}

article img:hover{
    cursor: pointer;
    transform: scale(3,3);
    transition-duration: 1s;
}