/* =====================================================
/*
Project:Capstone Project
Developed with guidance from Microsoft Copilot (GPT-4)
Copilot assisted in HTML/CSS structure, accessibility, semantic layout, and text.
startbootstrap.com assisted in HTML/CSS structure and acessiblity. 
www.w3schools.com assisted in HTML/CSS structure and accessiblity.
Tools: https://copilot.microsoft.com, https://startbootstrap.com and https://www.w3schools.com. 
Date: October-December 2025
Site designed by: Emilee Barker
*/

/*This CSS file accompanies my Capstone Project */

/*	/////  CSS CITATIONS */

/* 	This CSS file is released under the Creative Commons License - 
		- http://creativecommons.org/licenses/by-nc-sa/4.0/  /* 

/* License Allows: adaptations and commercial use, but requires share-and-share alike and attribution to me /*

/* 	/////  IMAGE CITATIONS */

/* 	Images are all cited below and are not included in the CC4.0 above, which is limited to the CSS only /* 

/* All Images below are provided by me and are under copyright 2025*/

/* 
Barker_About.jpg
Barker_Blacker2.jpg
Backer_Card.jpg
Barker_Casual_Maijuscule2.jpg
Barker_DrawingFour.jpg
Barker_DrawingOne.jpg
Barker_DrawingTWo.jpg
Barker_DrawingThree.jpg
Barker_illiexcerise.jpg
Barker_Lily_Maiden.jpg
Barker_Logo.jpg
Barker_Name.jpg
Barker_Shirt.jpg
Barker_W01_AdCritjpg
Barker_W01_Colorize.jpg
Elora_Marino.jpg
Forest_Cookie.jpg
Illustration3.JPG
Illustration5.jpg
Illustration6.jpg
Jack_O_Lyn.jpg
Lily_In_Golden_Field_.jpg
Lily_In_Winter_Island_.jpg
Nami.jpg
Siblings.jpg
*/

/* 	/////  FONT CITATIONS */

/*	All Google Fonts and Adobe Fonts are released under licenses which do not require them to be cited  */

/* Copyright 2016 The Faustina Project Authors (https://github.com/Omnibus-Type/Faustina)

This Font Software is licensed under the SIL Open Font License, Version 1.1. It is available with a FAQ at:
https://openfontlicense.org */

/* ===================================================== */

/* -----------------------------
   Base Styles
   ----------------------------- */

/* Citation: Based on Normalize.css principles */

* {
  box-sizing: border-box;
}

/* Fonts added from Google Fonts */

.ultra-regular {
  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}


.faustina-uniquifier {
  font-family: "Faustina", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

/* -----------------------------
   Grid Classes
   ----------------------------- */

/* 12 grid classes with percentages of widths */

/* Grid Format from Media Queries Excerise */

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  height: 100%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}


/* -----------------------------
  Body Styles
   ----------------------------- */

body {
  background-color: lightskyblue;
}

/* -----------------------------
   Header and Sub Heading Styles
   ----------------------------- */

/* Citation: Inspired by W3C HTML5 semantic structure */

/* Updated header and sub heading font color from Brite theme by Emilee Barker 2025 */


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "ultra", serif;
  text-align: center;
  padding: 10px;
  line-height: 30px;
}

/* Updated subheading font color by Emilee Barker 2025 */

.blue {
  -webkit-text-fill-color: #1b4965;
}

/* Updated header size by Emilee Barker 2025 */

header {
  font-family: "ultra", serif;
  text-align: center;
  -webkit-text-fill-color: #1b4965;
  font-size: xx-large;
  padding: 10px;
  line-height: 30px;
}

/* -----------------------------
   Pargraph Styles
   ----------------------------- */


/* Updated paragraph font from Brite theme by Emilee Barker 2025 */

p {
  font-family: "Faustina", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  text-align: center;
  font-size: 18px;
  margin: 5px, 5px, 5px, 5px;
  padding: 10px;
  line-height: 30px;
}

/* -----------------------------
   Navigation Styles
   ----------------------------- */

/* Updated nav font from Brite theme by Emilee Barker 2025 */

nav {
  font-family: "ultra", serif;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

/* Updated navbar colors from Brite theme by Emilee Barker 2025 */

.navbar {
  --bs-navbar-color: white;
  --bs-navbar-hover-color: #d1f5ff;
  --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
  --bs-navbar-active-color: #d1f5ff;
  --bs-navbar-brand-color: white;
  --bs-navbar-brand-hover-color: #d1f5ff;
}



/* -----------------------------
   Page Content Styles
   ----------------------------- */

main {
  margin: 20px 0;
}

section {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
}

article {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
}

/* -----------------------------
   Aside Styles
   ----------------------------- */

aside {
  padding: 15px;
  border-radius: 5px;
}

/* -----------------------------
   Footer Styles
   ----------------------------- */

footer {
  text-align: center;
}

/* -----------------------------
  Card
   ----------------------------- */

/* Updated background, border, and text color from Brite Theme by Emilee Barker 2025 */

.card {
  --bs-card-border-color: #1b4965;
  background-color: #d1f5ff;
  /*Added padding to card*/
  padding: 10px;
  line-height: 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* -----------------------------
  Card
   ----------------------------- */

/* Added to create rounded cornors on containers by Emilee Barker 2025*/

.container {
  border-radius: 15px;
}

/* -----------------------------
  Button
   ----------------------------- */

/* Updated the button color from Brite theme */

.btn-primary {
  --bs-btn-color: #1b4965;
  --bs-btn-bg: #d1f5ff;
  --bs-btn-border-color: #d1f5ff;
  --bs-btn-hover-color: #1b4965;
  --bs-btn-hover-bg: lightskyblue;
  --bs-btn-hover-border-color: #d1f5ff;
  --bs-btn-active-color: #1b4965;
  --bs-btn-active-bg: #d1f5ff;
  --bs-btn-active-border-color: #d1f5ff;
  --bs-btn-disabled-color: #1b4965;
  --bs-btn-disabled-bg: #d1f5ff;
  --bs-btn-disabled-border-color: #d1f5ff;
}

/* -----------------------------
   Dropdown Menu Styles
   ----------------------------- */

/* Updated link color of link-hover from Brite theme by Emilee Barker 2025 */

.dropdown-menu {
  --bs-dropdown-border-color: #000;
  --bs-dropdown-divider-bg: #000;
  --bs-dropdown-link-hover-bg: #d1f5ff;
  --bs-dropdown-link-active-color: lightskyblue;
  --bs-dropdown-link-active-bg: lightskyblue;
  --bs-dropdown-header-color: #000;
}

/* Updated dropdown item text color from Brite theme by Emilee Barker 2025 */

/* Text color changed to white for better visibility on dark background Emilee Barker 2025*/

.dropdown-menu .dropdown-item {
  color: white;
}

/* Change the dropdown menu background to match with navigation bar Emilee Barker 2025 */

.dropdown-menu {
  background-color: #000;
}

/* Text color changed to dark blue in hover for better visibility on lighter background Emilee Barker 2025 */
.dropdown-item:hover,
.dropdown-item:focus {
  color: #1b4965;
}

/* -----------------------------
   Pagniation Styles
   ----------------------------- */

/* Citation: Pagnination format is from w3schools.com */

/* Added hover and updated color from Brite theme by Emilee Barker 2025 */

.pagination {
  --bs-pagination-active-bg: #d1f5ff;
  --bs-pagination-hover-bg: #d1f5ff;
  --bs-pagination-active-border-color: #1b4965;
}

/* Change individual page links */
.page-link {
  background-color: #000;
  /* dark background */
  color: #fff;
  /* text color */
}





/* -----------------------------
  Color Override
   ----------------------------- */

/* Updated highlight color by Emilee Barker 2025 */

.light-mark {
  background-color: white;
}

.dark-mark {
  background-color: lightskyblue;
  -webkit-text-fill-color: white;
}

/* Colors and fonts updated from Brite theme by Emilee Barker 2025 */

:root,
[data-bs-theme=light] {
  --bs-primary-rgb: 209, 245, 255;
}

[data-bs-theme=dark] {
  --bs-primary-rgb: 209, 245, 255;
}

/* -----------------------------
   Media Queries
   ----------------------------- */

/* Updated the font size for a better fit on screen by Emilee Barker 2025*/

@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .md-text {
    font-size: 0.95rem;
  }

  .md-header {
    font-size: 1.1rem;
  }

  /* Updated the horztional row to a vertical column in the medium screen by Emilee Barker 2025 */

  .flex-direction4 {
    flex-direction: column;
    width: 400%;
    margin: auto;
  }

  .flex {
    flex-direction: column;
    width: 300%;
    margin: auto;
    padding: auto;
    alignment-baseline: middle;
  }
}

/* End of CSS */