/* ---- General body styles ---- */
body {
    color: #000000; /* Sets text color to black */
    font-family: "Roboto Condensed", serif; /* Sets font family */
}

/* ---- Set up site grid ---- */
.wrapper {
    display: grid; /* Defines the layout as a grid */
    grid-template-columns: 1fr 300px; /* Defines two columns: one flexible (1fr) and one fixed (400px) */
    grid-template-rows: auto; /* Rows adjust their height automatically based on content */
    grid-template-areas:
        "header header" /* Header spans the full width */
        "nav nav" /* Navigation spans the full width */
        "main aside" /* Main content and sidebar are next to each other */
        "footer footer"; /* Footer spans the full width */
    grid-gap: 4px; /* Sets a small gap between the grid items */
}

header,nav ,main, aside, footer {
    padding:20px;
    border-radius: 10px;
}

/* ---- Header styles ---- */
header {
    grid-area: header; /* Positions the header in the grid */
    background-color: #2685B3; /* Sets a blue background */
    color: #5DD4FB; /* Sets a light blue text color */
    padding:0px;

    height:84px;
}

nav, main, aside {
    border-style: solid;
    border-width:1px;
}

/* ---- Navigation styles ---- */
nav {
    grid-area: nav; /* Positions the navigation in the grid */
    background-color: #00465d; /* Dark blue background */
    color: #5DD4FB; /* Light blue text color */
}

/* ---- Main content styles ---- */
main {
    grid-area: main; /* Positions the main content in the grid */
    background-color: #156e8c; /* Sets a teal background */
    color: #5DD4FB; /* Light blue text color */
}

/* ---- Sidebar styles ---- */
aside {
    grid-area: aside; /* Positions the sidebar in the grid */
    background-color: #156e8c; /* Same teal background as the main content */
    color: #5DD4FB; /* Light blue text color */
}

/* ---- Footer styles ---- */
footer {
    grid-area: footer; /* Positions the footer in the grid */
    background-color: #00465d; /* Dark blue background */
    color: #5DD4FB; /* Light blue text color */
}
/* ----- Grid for front image -----*/
.homeimages {
    display: grid; /* Defines the layout as a grid */
    grid-template-columns: 250px 250px; /* Defines two columns: one flexible (1fr) and one fixed (400px) */
    grid-template-rows: auto; /* Rows adjust their height automatically based on content */
    grid-template-areas:
        "haiku free" 
        "limerick ascrotic"; 
    grid-gap: 4px; /* Sets a small gap between the grid items */

    width: 520px;
    margin: auto;
    padding: 5px;
}


.haiku {grid-area: haiku;}
.free {grid-area: free;}
.limerick {grid-area: limerick;}
.ascrotic {grid-area: ascrotic;}



/* ---- General box styling ---- */
.box {
    padding: 20px; /* Adds padding inside the box */
    border-radius: 10px; /* Rounds the corners of the box */
}

/* ---- Heading styles ---- */
h1, h2, h3 {
    font-family: "Josefin Sans", serif; /* Sets a different font for headings */
}

h1 {
    font-size: 300%; /* Makes h1 3 times larger than normal text */
    padding-left: 150px;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-tranform:translateY(-50%);
    -ms-transform: translateY(-50%);

}

img.roundleft{
    border-radius: 10px;
    box-shadow: 1px 0px 10px #000;
    float: left;
}

/* -------- Link formatting --------*/

/* Links in the main section & Sidebar */
a:link {color: #5DD4FB;}
a:visited {color: #5d0055d8;}
a:hover {color: #5DD4FB;}


/* Top Navigation */
nav a{text-decoration: none;}
nav a:link, nav a:visited {color:#2bb3e0;}

/* ------- Drop down nav menu styles ------- */
ul {
    list-style-type: none; /* Removes list bullets */
    margin: 0; /* Removes margin */
    padding: 0; /* Removes padding */
    overflow: hidden; /* Prevents the menu items from overflowing */
    background-color: #00465d; /* Dark blue background */
    border-radius: 10px; /* Rounds the corners of the menu */
    padding: 5px; /* Removes padding */
    
    
}

li {
    float: left; /* Aligns menu items horizontally */
}

li a, .dropbtn {
    display: inline-block; /* Makes the anchor links inline-block elements */
    color: #2bb3e0; /* Sets light blue text color */
    text-align: center; /* Centers text within the link */
    padding: 14px 16px; /* Adds padding around the text */
    text-decoration: none; /* Removes underlines from links */
}

li a:hover, .dropdown:hover .dropbtn {
    color:#00465b;
    background-color: #a5e0f4; /* Light blue background on hover */
    border-radius: 5px; /* Adds rounded corners on hover */
}

li.dropdown {
    display: inline-block; /* Allows dropdown items to display next to each other */
}

.dropdown-content {
    color:#00465d;
    display: none; /* Initially hides the dropdown content */
    position: absolute; /* Positions the dropdown content absolutely relative to the parent */
    background-color: #f9f9f9; /* Light background color */
    min-width: 160px; /* Sets the minimum width for the dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Adds a subtle shadow effect */
    z-index: 1; /* Ensures the dropdown content appears above other elements */
    border: 4px solid #2685B3; /* Adds a border to the dropdown */
    border-radius: 5px; /* Rounds the corners of the dropdown */
}

.dropdown-content a {
    color: #00465d; /* Sets the text color for dropdown links to black */
    padding: 12px 16px; /* Adds padding inside the dropdown links */
    text-decoration: none; /* Removes underlines from the links */
    display: block; /* Makes the links block elements so they take up the full width */
    text-align: left; /* Aligns the text to the left */
}

.dropdown-content a:hover {
    background-color: #f1f1f1; /* Changes background color when hovering over a link */
    border: 1px solid #2685B3; /* Adds a border to dropdown links when hovered */
    border-radius: 0px;
}

.dropdown:hover .dropdown-content {
    display: block; /* Shows the dropdown content when hovering over the parent item */
}

iframe {
    width: 85%;
    height: 754px;
    margin: auto;
    border: 0;
}