/* ---- 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 (300px) */
    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; /* Adds padding to all layout sections */
    border-radius: 10px; /* Rounds the corners of the layout sections */
}

/* ---- Header styles ---- */
header {
    grid-area: header; /* Positions the header in the grid */
    background-color: #ffb24c; /* Sets an orange background for the header */
    color: #000000; /* Sets text color to black */
    padding: 0px; /* Removes padding */
    height: 84px; /* Sets a fixed height for the header */
}

nav, main, aside {
    border-style: solid; /* Adds a solid border around nav, main, and aside */
    border-width: 1px; /* Sets border width */
}

/* ---- Navigation styles ---- */
nav {
    grid-area: nav; /* Positions the navigation in the grid */
    background-color: #5c554c; /* Dark brown background for navigation */
    color: #000000; /* Sets text color to black */
}

/* ---- Main content styles ---- */
main {
    grid-area: main; /* Positions the main content in the grid */
    background-color: #ffbf6b; /* Light orange background for the main content */
    color: #000000; /* Sets a light blue text color */
}

/* ---- Sidebar styles ---- */
aside {
    grid-area: aside; /* Positions the sidebar in the grid */
    background-color: #ffbf6b; /* Same orange background as main content */
    color: #000000; /* Same light blue text color as main content */
}

/* ---- Footer styles ---- */
footer {
    grid-area: footer; /* Positions the footer in the grid */
    background-color: #5c554c; /* Dark brown background for footer */
    color: #000000; /* Sets light blue text color for the footer */
}

/* ----- Grid for front image ----- */
.homeimages {
    display: grid; /* Defines the layout as a grid */
    grid-template-columns: 250px 250px; /* Defines two columns with fixed widths of 250px */
    grid-template-rows: auto; /* Rows adjust their height automatically based on content */
    grid-template-areas:
        "Unity Unreal_Engine" 
        "Godot Scratch"; /* Defines grid areas for each item */
    grid-gap: 4px; /* Sets a small gap between the grid items */
    width: 520px; /* Sets the width of the image grid */
    margin: auto; /* Centers the grid horizontally */
    padding: 5px; /* Adds padding around the grid */
}

/* Grid area for each image */
.Unity {grid-area: Unity;}
.Unreal_Engine {grid-area: Unreal_Engine;}
.Godot {grid-area: Godot;}
.Scratch {grid-area: Scratch;}

/* ---- 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; /* Adds left padding */
    position: relative;
    top: 20%; /* Moves the heading down 20% of its height */
    transform: translateY(-50%); /* Centers the heading vertically */
    -webkit-transform:translateY(-50%); /* Ensures compatibility with older browsers */
    -ms-transform: translateY(-50%); /* Ensures compatibility with older browsers */
}

/* Image with rounded corners and shadow */
img.roundleft {
    border-radius: 10px; /* Rounds the corners of the image */
   
    float: left; /* Floats the image to the left */
  

}

/* Style for elements with allround class */
.allround {
    border-style: solid; /* Adds a solid border */
    border-radius: 20px; /* Rounds the corners */
    border-color: #000; /* Sets the border color to black */
    border-width: 5px; /* Sets the border width */
    box-shadow: 5px 0px 15px #000000; /* Adds a shadow effect */
    margin: auto; /* Centers the element horizontally */
}

/* Center text within an element */
.centered {
    text-align: center; /* Centers text horizontally */
}

/* --------- Text over image -------- */
.hvrbox, .hvrbox  {
    box-sizing: border-box; /* Ensures padding and borders are included in element's total size */
}
.hvrbox {
    position: relative; /* Positions the box relatively for the hover effect */
    display: inline-block; /* Allows the box to behave like an inline element */
    overflow: hidden; /* Prevents content from overflowing */
    max-width: 100%; /* Limits the width to 100% of the parent */
    border-radius: 20px; /* Rounds the corners */
    height: auto; /* Adjusts height automatically */
}
.hvrbox img {
    max-width: 100%; /* Ensures images fill the box width */
}
.hvrbox .hvrbox-layer_bottom {
    display: block; /* Ensures the bottom layer is displayed */
}
.hvrbox .hvrbox-layer_top {
    opacity: 0; /* Makes the top layer initially invisible */
    position: absolute; /* Positions the top layer over the image */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Adds a semi-transparent black overlay */
    color: #fff; /* Sets text color to white */
    padding: 15px; /* Adds padding */
    transition: all 0.4s ease-in-out 0s; /* Smooth transition effect */
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
    opacity: 1; /* Shows the top layer on hover or when active */
}
.hvrbox .hvrbox-text {
    text-align: center; /* Centers the text */
    font-size: 18px; /* Sets font size */
    display: inline-block; /* Ensures text behaves like an inline element */
    position: absolute;
    top: 50%; /* Vertically centers the text */
    left: 50%; /* Horizontally centers the text */
    transform: translate(-50%, -50%); /* Perfectly centers the text */
}
.hvrbox .hvrbox-text_mobile {
    font-size: 15px; /* Sets smaller font size for mobile */
    border-top: 1px solid rgba(179, 179, 179, 0.7); /* Adds a subtle border */
    margin-top: 5px; /* Adds margin above the text */
    padding-top: 2px; /* Adds padding above the text */
    display: none; /* Initially hides the mobile text */
}
.hvrbox.active .hvrbox-text_mobile {
    display: block; /* Displays the mobile text when the box is active */
}

/* ----- Hidden Box Formatting ----*/
#hidden {
    display: none; /* Hides the element */
}

.poemtype {
    font-size: 150%; /* Increases font size */
    font-weight: bold; /* Makes the text bold */
    padding-right: 15px; /* Adds padding to the right */
}

.info {
    font-style: italic; /* Sets text to italic */
    border-style: solid; /* Adds solid borders */
    border-width: 5px; /* Sets border width */
    background-color: #ffbf6b; /* Sets a light orange background */
    border-color: #000000; /* Sets border color to black */
    padding: 10px; /* Adds padding inside the element */
    width: 85%; /* Sets the width of the element */
}

.showhide {
    background-color: #ffbf6b; /* Light orange background */
    font-style: italic; /* Italicizes text */
    padding: 2px; /* Adds padding */
    padding-left: 5px; /* Adds left padding */
    padding-right: 5px; /* Adds right padding */
}

.showhide:hover {
    color: #ffff; /* Changes text color to white on hover */
    background-color: #ffb24c; /* Changes background color to a darker orange on hover */
}

/* -------- Link formatting --------*/

/* Links in the main section & Sidebar */
a:link {color: #000000;} /* Sets default link color */
a:visited {color: #5d0055d8;} /* Sets visited link color */
a:hover {color: #5DD4FB;} /* Changes color on hover */

/* Top Navigation */
nav a {text-decoration: none;} /* Removes underlines from nav links */
nav a:link, nav a:visited {color:#ffb24c;} /* Sets link color in navigation */

/* ------- Drop down nav menu styles ------- */
ul {
    list-style-type: none; /* Removes list bullets */
    margin: 0; /* Removes margin */
    padding: 0; /* Removes padding */
    overflow: hidden; /* Prevents menu items from overflowing */
    background-color: #5c554c; /* Dark background for the menu */
    border-radius: 10px; /* Rounds the corners of the menu */
    padding: 5px; /* Adds padding around the menu */
}

li {
    float: left; /* Aligns menu items horizontally */
}

li a, .dropbtn {
    display: inline-block; /* Makes the links inline-block elements */
    color: #000000; /* Sets light orange text color */
    text-align: center; /* Centers text inside the links */
    padding: 14px 16px; /* Adds padding around the text */
    text-decoration: none; /* Removes underlines from links */
}

li a:hover, .dropdown:hover .dropbtn {
    color: #ffe1ba; /* Changes text color on hover */
    background-color: #000000; /* Sets a dark background on hover */
    border-radius: 5px; /* Rounds the corners on hover */
}

li.dropdown {
    display: inline-block; /* Allows dropdown items to display next to each other */
}

.dropdown-content {
    color: #00465d; /* Sets text color for dropdown links */
    display: none; /* Hides the dropdown initially */
    position: absolute; /* Positions dropdown relative to the parent */
    background-color: #f9f9f9; /* Light background color for dropdown */
    min-width: 160px; /* Sets minimum width for dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Adds a shadow effect */
    z-index: 1; /* Ensures dropdown appears above other elements */
    border: 4px solid #000000; /* Adds border around dropdown */
    
    border-radius: 5px; /* Rounds corners of dropdown */
}

.dropdown-content a {
    color: #00465d; /* Sets text color for dropdown links */
    padding: 12px 16px; /* Adds padding inside the dropdown links */
    text-decoration: none; /* Removes underlines from links */
    display: block; /* Makes links take up the full width */
    text-align: left; /* Aligns text to the left */
}

.dropdown-content a:hover {
    background-color: #ffb24c; /* Changes background color when hovering over a link */
    border: 1px solid #000000; /* Adds border to dropdown links when hovered */
    color: #000000;
    border-radius: 0px; /* Removes border radius on hover */
}

.dropdown:hover .dropdown-content {
    display: block; /* Displays the dropdown content on hover */
}

/* Styling for iframe elements */
iframe {
    width: 85%; /* Sets iframe width */
    height: 754px; /* Sets iframe height */
    margin: auto; /* Centers iframe horizontally */
    border: 0; /* Removes iframe border */
}
