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

.allround{
    border-radius: 20px;
    box-shadow: 1px 0px 10px #000;
    margin: auto;
}

.centered {
    text-align: center;
}


/* ---------Text over image --------*/
	
.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
    border-radius: 20px;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}

/* ----- Hidden Box Formatting ----*/

#hidden {
    display: none;
}

.poemtype{
    font-size: 150%;
    font-weight: bold;
    padding-right: 15px;
}
.info {
    font-style: italic;
    border-style: solid;
    border-width: 1px;
    background-color: #156e8c;
    border-color: #00465d;
    padding: 10px;
    width: 85%;
}
.showhide {
    background-color: #156e8c;
    font-style: italic;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
}
.showhide:hover{
    color: #ffff;
    background-color: #2685B3;
}


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