@charset "UTF-8";

/*
A Submission for Shane Howell's Fluid Grid System Project

Student Name: Marquevia Lei'saige Wright
Website Title: Salt of the Earth Studios

This website was designed, coded, tested, and developed by
Marquevia Lei'saige Wright using Visual Studio Code.

Microsoft Copilot was used as an educational tool to assist
with researching, reviewing, troubleshooting, and developing
HTML, CSS, and JavaScript code throughout the project.
All design decisions, testing, implementation, content
creation, and final project assembly were completed and
evaluated by Marquevia Lei'saige Wright.
*/

/* ////////////////////////////////////////////////////// */
/* CSS CITATIONS */
/* ////////////////////////////////////////////////////// */

/*
The CSS for Salt of the Earth Studios was originally
developed by Marquevia Lei'saige Wright.

With guidance from instructor Shane Howell, the CSS
was organized into multiple files:

- framework.css
  Contains the 1440 Fluid Grid System, layout structure,
  grid framework, column classes, and shared layout styles.

- styles.css
  Contains page-specific styling, gallery styles,
  multimedia presentation, and custom visual enhancements.

Microsoft Copilot was used to assist with learning,
reviewing, troubleshooting, and understanding CSS
implementation during development.
*/

/* ////////////////////////////////////////////////////// */
/* JAVASCRIPT CITATIONS */
/* ////////////////////////////////////////////////////// */

/*

JavaScript features include:

- Interactive gallery image modal
- Enlarged artwork viewer
- Contact form confirmation message

Microsoft Copilot was used to assist with learning,
reviewing, troubleshooting, and understanding
JavaScript concepts and implementation.
*/

/* ////////////////////////////////////////////////////// */
/* IMAGE AND ANIMATION CITATIONS */
/* ////////////////////////////////////////////////////// */

/*
All artwork, illustrations, graphics, images, and
animations displayed throughout Salt of the Earth Studios
were originally created and are owned by
Marquevia Lei'saige Wright unless otherwise noted.

Images:

- armor_persona.jpg
- light_vs_dark.jpg
- praying.jpg
- bible.jpg
- brokenhearted.jpg

Animations:

- rise.mp4
- wicked.mp4
- honor.mp4
- lukewarm.mp4

All listed files were created by
Marquevia Lei'saige Wright.
*/

/* ////////////////////////////////////////////////////// */
/* CONTENT CITATIONS */
/* ////////////////////////////////////////////////////// */

/*
All written website content, project descriptions,
artwork descriptions, page text, and documentation
were written by Marquevia Lei'saige Wright unless
otherwise noted.

Biblical references and scripture quotations remain
the property of their original published sources and
are cited within website content where applicable.
*/

/* ////////////////////////////////////////////////////// */
/* FONT CITATIONS */
/* ////////////////////////////////////////////////////// */

/*
The website uses the system font stack:

"Times New Roman", Georgia, serif

No external font files, web-font services,
or third-party typography libraries are used
within this project.
*/



.card img {
    cursor: pointer;
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.card img:hover {
    opacity: 0.8;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 1, 1, 0.9);
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.card {
    height: 350px;
    overflow: hidden;
    padding: 0;
}


.card4 video {
      display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}



.cardfooter {
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}

.cardfooter2 {
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}


.demo-cell3 {
    /* background: #f18973; */
    background-color: var(--third-color);
    text-align: center;
    padding: 25px;
    font-weight: bold;
     border: 3px solid white;
    border-radius: 6px;
}

.cardfooter3 {
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}

.card3 {
    background-color: var(--fourth-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #000000;   
}

.card4 {
     background-color: var(--fourth-color);
    padding: 0;
    border: 3px solid white;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    color: #ffffff; 
}

.cardfooter4 {
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}

.cardfooter5{
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}

.cardfooter6{
    background-color: var(--third-color);
    padding: 25px;
    border: 3px solid white;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;  

}