@charset "UTF-8";

body {
    font-family: 'comic sans ms', cursive, sans-serif; /* For a more cartoony/playful feel */
    background-image: url("../img/PaintStroke.gif");
    background-size: cover;
}

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-color: white;
}

h1 {
    font-size: 72px; 
}

h2 {
    font-size: 56px;
    text-align: center;
    background:none;
}

h3 {
    background-color: yellow;
    margin-bottom: 1em;
}

/*This will need tweaking for mobile */
#Skyler {
    clip-path: circle(42% at 43%); /* Clip is obsolete, so clip-path. Circle crop 42% radius, off centre by 43% to get Skyler */
    float: right;
}
/* Yellow bar after header */
h1::after{
    content: '';
    display:block;
    width: 100%;
    height: 10px;
    background-color: yellow; 
    margin-top: 10px; 
    clear: both; 
}


/*
Menu stuff
 */


.MainMenu {
    /*makes for a nice centred menu regardless of screen size*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10em; /* I've used em instead of px here since the text is quite big, so it will scale better */
    margin-bottom: 15em;
}

.MainMenu::after {
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    background-color: yellow; 
    margin-top: 15em; /* em in this case hides the lower menu on small screens, which is what I want */ 
    margin-bottom: -15em; /* Hacky fix to push the intro section back up */
}

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#SmlMenu {
    flex-direction: row;
}

#SmlMenu a{
    font-size: 24;
}

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:48;  
}


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)
}

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; 
}


.Spacer {
    background-color: white;
    padding: 10em;
}


section {
    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;
    margin: 100px 0 0 0;
    width: 60%; /* Set a max width for better readability */
    font-size: 24px; /* Larger font size for better readability */
    text-align: center; /* Center the text */
}

.Gallery{
    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 */
}


.Gallery img{
    width: 240px;
    height: 240px;
    margin: 1em;
    border: 4px solid royalblue;
    border-radius: 3px;
}

table{
   display: flex;
   align-self: center;
   box-shadow: -30px 6px 3px rgba(0, 0, 0, 0.75);
   border: 4px solid yellow;
}

tr{
    background-color: white;

}

th{
    color: royalblue;
    text-align: center;
    font-size: 24px;
    padding: 1em;
    border: 2px solid black;
    border-radius: 4px;
}

td{
    border: 2px solid black;
    border-radius: 4px;
    font-size: 24;
    text-align: center;

}


.TimelineBasis{
    content: '';
    width: 100%; 
    border-radius: 18px;
    height: 10px;
    background-color: red;
    transform:rotate3d(0, 0, -1, 30deg);
    margin-bottom: 10em;
}


footer {
    background-color: royalblue; 
    color: white; 
    text-align: center;
    position: fixed bottom; 
    width: 100%; 
}