@charset "utf-8";

/*
   Course: CTI-110-03W
   Assignment: Improve My Home Page 2
   Author: Cody Foster
   Date: 03/24/2026

   Filename: styles.css

   This stylesheet controls the visual appearance of the
   Cody's Tech Corner website. The page layout uses a
   CSS grid to organize the header, main content,
   aside section, and footer.
*/


/* HTML PAGE SETTINGS */

html {
   background-color: #dcdcdc;
   font-family: Arial, Helvetica, sans-serif;
}


/* MAIN PAGE CONTAINER */

body {
   width: 90%;
   min-width: 700px;
   max-width: 1100px;
   margin: 20px auto;
   padding: 10px;

   background-color: #ffffff;

   outline: 3px dashed #333333;

   /* CSS Grid Layout */
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: auto 1fr auto;
   gap: 15px;
}


/* HEADER SECTION */

#siteHeader {
   grid-column: 1 / 3;
   grid-row: 1 / 2;

   padding: 15px;

   outline: 2px dashed #666666;

   border-radius: 12px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.25);

   background-color: #f8f8f8;
}

#siteHeader h1 {
   font-size: 2.6em;
   margin-bottom: 10px;
}

#siteHeader p {
   font-size: 1.1em;
   margin-bottom: 15px;
}


/* NAVIGATION MENU */

#topNav a {
   display: inline-block;

   padding: 8px 14px;
   margin-right: 8px;

   text-decoration: none;

   color: #000000;
   background-color: #e6e6e6;

   border: 1px solid #444444;
}

#topNav a:hover {
   background-color: #d0d0d0;
}


/* MAIN CONTENT AREA */

#mainContent {
   grid-column: 1 / 2;
   grid-row: 2 / 3;

   padding: 15px;

   outline: 2px dashed #666666;

   border-radius: 12px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.25);

   background-color: #ffffff;
}

#mainContent h2,
#mainContent h3 {
   margin-top: 0;
}


/* SIDEBAR / ASIDE */

#sideBar {
   grid-column: 2 / 3;
   grid-row: 2 / 3;

   padding: 15px;

   outline: 2px dashed #666666;

   border-radius: 12px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.25);

   background-color: #f8f8f8;
}

#sideBar h2,
#sideBar h3 {
   margin-top: 0;
}


/* FOOTER SECTION */

#siteFooter {
   grid-column: 1 / 3;
   grid-row: 3 / 4;

   padding: 15px;

   text-align: center;

   outline: 2px dashed #666666;

   border-radius: 12px;
   box-shadow: 3px 3px 6px rgba(0,0,0,0.25);

   background-color: #f8f8f8;
}


/* LIST FORMATTING */

ul,
ol {
   padding-left: 25px;
}


/* LINK STYLING */

a {
   color: #003366;
}

a:hover {
   color: #000000;
}

form {
   margin-top: 15px;
}

fieldset {
   padding: 15px;
}

label {
   display: block;
   margin-top: 10px;
   font-weight: bold;
}

input,
select,
textarea {
   display: block;
   width: 95%;
   max-width: 500px;
   padding: 8px;
   margin-top: 5px;
   box-sizing: border-box;
}

textarea {
   resize: vertical;
}

input[type="submit"],
input[type="reset"] {
   display: inline-block;
   width: auto;
   margin-right: 10px;
   margin-top: 15px;
   cursor: pointer;
}