/* Michael Cain | CIS133 | Final Website Project */

* {box-sizing: border-box;}

body {
   background-color: #e8eef6; 
   color: #383636;
   font-family: 'Segoe UI', Arial;
   margin: 0;
   padding: 0;
}

body.stories {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /*vh stands for "viewport height", and is a useful property I found from seeking supplemental content*/
}

header {
    background-color: #3243c7;
    color: #FFFFFF;
    font-family: 'Lucida Grande', serif;
    height: 120px;
}

header a { text-decoration: none;}

header a:link {color: #FFFFFF;}
header a:visited {color: #FFFFFF;}
header a:hover {color: #c7b632;}

h1 {
    text-align: center;
    padding-top: .5em;
    font-size: 3em;
    letter-spacing: .25em;
    font-family: 'Segoe UI', Arial;
}

h2 {
    color: #c76b32;
    font-family: 'Segoe UI', Arial;
}

h3 {
    color: #3275c7;
    font-family: 'Segoe UI', Arial;
}

/*No page containing a vertical nav bar is included for the following reasons:
Top nav bar best suits my website as it has high media content and shallow site page depth
Lack of class instruction on coding a conditional nav bar for mobile and desktop
A different navigation scheme for some pages and not others would lead to user confusion and low click-through
Side nav bars are still used for web apps with significant page depth or functionality. SharePoint, company web portals, etc.
The stated instructional goal is that of a basic website in a contracting context.*/

nav {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #3243c7;
}

nav ul {
    list-style-type: none;
    padding-left: 0;
    display: flex; 
    justify-content: space-around; 
    margin: 0; 
}

nav a {
    text-decoration: none;
    color: #FFFFFF; 
    background-color: #E2725B; 
    padding: 0px 15px; 
    border-radius: 5px; 
    display: inline-block;
    margin: 5px; 
    transition: background-color 0.3s; 
}

nav li { padding: 1em;}

nav a:link      {color:#3243c7;}
nav a:visited   {color:#5332c7;}
nav a:hover     {
    background-color: #F4A688;
    color:#c7b632;
}

.navbar {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}

.nav-item {
    flex: 1 0 auto;
}

section {
    width: 33%;
    padding-left: 2em;
    padding-right: 2em;
}

main {
    padding-left: 2em;
    padding-right: 2em;
    background-color: #FFFFFF;
    overflow: auto;
    display: block;
}

dt {
    color: #3243c7;
    font-weight: bold;
}

.company {
    color: #3243c7;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Lucida Grande', 'sans-serif';
}

.image-container {
    float: right;
    margin-right: 20px;
}

.cta {
    font-size: 20px; 
    font-weight: bold; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    float: left; 
    color: #121310;
    width: 66%;
}

.story-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    width: 33.33%;
    padding-left: 20px;
    margin: 0;
    justify-content: center;
    height: 100vh;
}

.story-preview img {
    max-width: 120px; 
    margin-right: 20px;
}

.story-preview h3 {
    font-size: 18px;
    margin: 0;
}

.story-preview p {
    font-size: 14px;
    margin: 0;
}

.story-details h3 {
    font-size: 18px;
    margin: 0;
}
.story-details p {
    font-size: 14px;
    margin: 0;
}
.story-details a {
    color: #0074D9; 
    text-decoration: none;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

/*Begin Intermediate Feature code.  Gallery.*/
.gallery-container {
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    width: 80%;
}
.gallery-slide {
    flex: 0 0 33.33%; 
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}
.gallery-slide img {
    width: 100%; 
    height: auto;
    border-radius: 5px;
}
.gallery-slide h2 {
  color: #333; 
  font-size: 1.5em; 
  margin-bottom: 0.5em; 
 }

.gallery-slide p {
    color: #666; 
    font-size: 1em; 
    margin-bottom: 1em; 
}

.gallery-slide a {
    color: #007bff; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 8px 16px; 
    background-color: #e7f1ff; 
    border-radius: 4px; 
    transition: background-color 0.3s; 
 }

.gallery-slide a:hover {
    background-color: #cfe2ff; 
}

.gallery-slide {
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
 }
  
.prev, .next {
    height: 50px;
    width: 50px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 0 3px 3px 0;
}
.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}
/*End "Intermediate Feature" code.  Gallery view with buttons. */
label {
    display: block;
    font-weight: bold;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

section {
    display: flex;
    justify-content: space-between;
    padding: 10px; 
}

section img {
    max-width: 120px;
    height: auto; 
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

th, td {
    border: 1px solid #999;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}


footer {
    font-size: .70em;
    font-style: italic;
    text-align: center;
    padding: 1em;
    background-color: #FFFFFF;
    clear: both;
}

#wrapper {
    background-color: #FFFFFF;
    background-image:  linear-gradient(to bottom, #FFFFFF, #a9b0e9);
    background-repeat: no-repeat; 
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    min-width: 960px;
    max-width: 2048px;
    box-shadow: 3px 3px 3px #777;
}

/*Note: according to the MDN, there is no way to embed alt tag content into background images. Your rubric says
that points will be deducted unless ALL images have an alt tag.  For background images, this is a technical infeasability
I suspect you were unaware of this when writing the learning objective?  See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image */

#homehero {
    height: 300px;
    background-image: url(california.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3243c7;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
}
#return-to-top a:link{color: #ffffff}
#return-to-top a:visited   {color: #ffffff;}
#return-to-top a:hover     {
    background-color: #F4A688;
    color:#3243c7;
}

@media (max-width: 600px) { 
    .nav-item {
        flex: 1 0 50%; 
    }
}