body {
    background-color: #eaeffa;
    font-family: "Verdana", "Helvetica", Arial, serif, sans-serif;
    font-size: 18px;
    margin: 10px;
    /* put margin instead of padding to make contents of body fit within body correctly /////////////////////////////////////////////////////////////*/
}

/* Header/Title - NOTE: use "." for class and "#" for id */

/***********************************************************************/
/* MAIN HEADER TITLE WITH DROP DOWN LIST BOX */

/* New Header Bar and Drop Down List */

/* for animation in title/header */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Make about button wrap sooner by giving header a right margin /////////////////////////////////////////////*/
h1 {
    margin: 0px;
    margin-right: 25px;
}

/* header background */
.header-background {
    background-image: url("banner3.png");
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    z-index: 10;
}

/* Main "white box" translucent overlay with logo + nav (on top of header background) */
.header-box2 {
    display: flex;

    /* about nav menu now wraps when there is no room left in header box 2 //////////////////////////////////////////////////////////////////////////////*/
    flex-wrap: wrap;

    justify-content: space-between;
    align-items: center;

    /* 20px indent on both sides */
    max-width: calc(100% - 40px);
    background: white;
    position: relative;
    z-index: 100;
    /* background: #000099; */
    color: white;
    /* font-size: xxxx-large; */
    font-size: 20px;
    font-weight: bold;
    font-family: "Verdana-Bold", "Helvetica-Bold", "Verdana", Arial, serif, sans-serif;
    /* 20px indent on left and right */
    margin: 0 20px;
    border-radius: 10px;
    /* optional: make it responsive */
    animation: fadeIn 1.5s ease;
    /* 100% width minus 20px * 2 */
    width: calc(100% - 40px);
    /* includes padding and border in width */
    box-sizing: border-box;
    /* semi-transparent dark blue #000066 rgba(0, 0, 102, 0.75) */
    background-color: rgba(0, 0, 102, 0.75);
    /* semi-transparent white */
    /* background-color: rgba(255, 255, 255, 0.15); */
    padding: 1em 1.5em;
    /* ⬅️ Make it as wide as the container */
    width: 97%;
    /* max-width: 1200px; /* Optional max width for layout control */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

/* title on page - ie. TygerMatrix Software */
.title-left {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

/* tygermatrix icon */
.title-left img {
    width: 100px;
    height: 100px;
    min-height: 100px;
    min-width: 100px;
    border: 5px solid white;
    border-radius: 10px;
}

/* Nav styles for the drop down list */

#header-nav {
    display: inline-block;
    box-sizing: border-box;
}

#header-button-label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #000066;
    border: solid 2px #00001a;
    color: white;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}

#header-button {
    position: absolute;
    width: 0;
    height: 0;
}

#dropdown-menu {
    display: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    position: absolute;
}

#header-nav li {
    background-color: #000066;
    border: solid 2px #00001a;
    box-sizing: border-box;
    padding: 10px;
    margin-top: -2px;
}

#header-nav a {
    color: white;
}

#header-nav a:hover {
    color: #00ff00
}

/***********************************************************************/
/* APP DESCRIPTION BOX WITH APP BACKGROUND BEHIND IT
 				
 				/* Description box of app with background behind it */

h3 {
    position: relative;
    /* top right bottom left */
    padding: 50px;
    color: #193366;
    /* dusty blue */
    border: 3px solid #5c85d6;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 2px;
    margin-left: auto;
    /*width: 75%;*/
    vertical-align: text-top;
}

/* Explanation:
				h3 contains the text and positions it above the background image.
				The ::before pseudo-element acts as the background layer with an image and 
				opacity set to 0.5, without affecting the h3 text.
				The z-index settings ensure that the text stays above the background. */
h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("banner3.png");
    /* Adjust as needed */
    background-size: cover;
    background-position: center;
    /* Set background opacity */
    opacity: 0.1;
    /* Places background behind the text */
    z-index: -1;
}

/*************************************************************************************
 				

 				/* Section header is a wrapper for h3 - app description box */
.section-header {
    position: relative;
    padding: 0px 0px;
    z-index: 1;
}

.section-header h3 {
    position: relative;
    z-index: 1;
    /* font-size: 1.2rem; */
    line-height: 1.5;
}

/* Background behind h3 text */
.section-header h3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("banner3.png") no-repeat center center / cover;
    opacity: 0.15;
    z-index: -1;
}

/***********************************************************************/
/* OTHER ELEMENTS
 				
 				
                /* Mission/Current Apps */
h2 {
    color: #5c85d6;
    padding: 20px 0 0 0;
}

h4 {
    color: #5c85d6;
    padding: 20px 0 0 0;
}

/* any div tag nested inside a div with a class of currentAppsList */
div.currentAppsList div {
    padding-bottom: 20px;
}

/* for Apps Currently in Development section; alternative so that "float" doesn't mess up alignment; uses flex instead */
.devApp {
    display: flex;
    flex-direction: column;
    /* text above icon */
    align-items: flex-start;
    /* LEFT justified */
    margin-bottom: 0px;
}

.devApp img {
    margin-left: 0px;
    /* aligns icon with text padding */
}

/* to stop description from being right justified because of plain .iconDesc (I can't change that one because it's used elsewhere) */
.devApp .iconDesc {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
}

/* for any other "icons" used on the page */
.icons {
    width: 100px;
    height: 100px;
    float: left;
    /* for rounding corners */
    border: 5px solid white;
    border-radius: 10px;
    margin-right: 1em;
    /* adds right margin to every icon so that label is not right next to it ////////////////////////////////////////// */
}

/* for any other "icons" with dark border used on the page */
.iconsDark {
    width: 100px;
    height: 100px;
    float: left;
    /* for rounding corners */
    border: 5px solid #c1d0f0;
    border-radius: 10px;
}

.devApp div {
    margin-left: 10px;
    /* made apps in development line up with other apps */
}

.icons:hover {
    /* hot pink */
    border: 5px solid #ff33cc;
}

/* Title associated with the icon - ie. Hazel's Recipes */
.iconTitle {
    /* height of text */
    height: 100px;
    /* you can use line-height = to height to center vertically; or use padding 20px 0 */
    /* line-height: 100px; */
    /* Used flex to center text. Doing it this way allows the text to wrap properly ////////////////////////////////////////////////////////////////////*/
    display: flex;
    align-items: center;
    color: blue;
    padding-left: 10px;
}

/* Textual description for the icon - ie. Hazel's Recipes is an app... */
.iconDesc {
    padding: 10px;
    /* another dusty blue */
    background-color: #c1d0f0;
    margin-top: 20px;
    /* margin-right: 50%; */
    margin-bottom: 10px;
    margin-left: auto;
    box-sizing: border-box;
    /* make descriptions fit within body. */
}

/* italicize list */
.ital {
    font-weight: normal;
    font-style: italic;
    margin: 20px;
}

/* any li tag nested inside a ul with a class of ital */
ul.ital li {
    padding: 10px;
    list-style: circle;
}

/* use # for id - in this case, refers to id="copyright" in html doc */
#copyright {
    /* dusty blue */
    color: #5c85d6;
    font-size: medium;
    font-family: "Verdana", "Verdana-Bold", Arial, serif, sans-serif;
    /* border: 5px solid green; */
    padding: 10px;
    padding-top: 50px;
}

/* change the color for links */
a {
    color: blue;
    /* optional: removes underline */
    text-decoration: none;
}

/* not good to use this because hover seems to stop working
                /* a:visited { color: purple} */

a:hover {
    /* hot pink */
    color: #ff33cc;
    text-decoration: underline;
}







/* Mission/Current Apps */
.header2 {
    /* dusty blue */
    color: #5c85d6;
    padding: 25px 0 0 0;
}

/* italicize list */
.ital-bold {
    font-weight: normal;
    font-style: italic;
    margin: 20px;
}

#backbutton {
    max-width: 70%;
}

.appstore {
    position: relative;
    width: 200px;
    height: auto;
    left: 20px;
    top: 25px;
}

/* Keep video in the center of the screen. */
.videoContainer {
    display: flex;
    position: relative;
    justify-content: center;
    min-width: fit-content;
}

/* Remove link from the flow of the document and place in the top left of the video container. 
    This ensures that the video is in the middle of the screen itself. */
.iconTitle2 {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    min-width: 400px;
    /* This ensures the videos are lined up once the videos stop being
                            centered using flex. */

    /*  Center the text */
    align-items: center;
    padding-left: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* Makes it so videos will never be too big to fit inside the body. For screens with a width larger
    than 560px, the video will not expand beyond a width of 560px. For screens with a width smaller
    than 560px, the video fits the screen's width. */
.video {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
}

/***********************************************************************/
/* HORIZONTAL SCROLLING OF APP SCREENSHOTS
 				
 				/* if you want a horizontally scrolling container of pictures */
.scroll-container {
    /* Arrange items in a row */
    display: flex;
    /* Enable horizontal scrolling */
    overflow-x: auto;
    /* Space between images */
    gap: 10px;
    /* Padding inside the scroll container */
    padding: 10px;
    /* Prevent wrapping */
    white-space: nowrap;
    /* Optional: border for visibility */
    border: 2px solid #ccc;
}

.scroll-container img {
    /* Set a consistent width for images */
    width: 250px;
    /* Maintain aspect ratio */
    height: auto;
    /* Optional: rounded corners */
    border-radius: 8px;
    /* Optional: shadow for aesthetics */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* words "Scroll right -> ... now on bottom" */
#scrollHeader {
    /* dusty blue */
    color: #5c85d6;
    /* margin: TOP RIGHT BOTTOM LEFT; */
    margin: 10px 0 5px 15px;
    font-style: italic;
}

.TOS, .privacyPolicy {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 800px;
}

/* Change header to smaller font so that it fits in the banner for smaller screen ///////////////////////////////////////////////////////*/
@media (max-width: 600px) {
    h1 {
        font-size: x-large;
    }

    .section-header {
        font-size: 14px;
    }

    h3 {
        padding: 20px;
    }

    .TOS, .privacyPolicy {
        width: 100%;
        height: 400px;
    }
}

@media (max-width: 450px) {
    /* If the width is less than 600px and its a touch screen, apply this rule. /////////////////////////////////////////////////*/
    h1 {
        font-size: 20px;
    }
}

/* when about us button wraps add top margin*/
@media (max-width: 1200px) {
    .header-box2 {
        display: block;
    }

    #header-nav {
        display: block;
        margin-top: 1em;
        width: fit-content;
    }
}

/* Once the video touches the link, stop centering it using flex so that it wont go under the
    link. Display the link as an inline-flex and put it into the document's flow so that the video
    will eventually wrap. */
@media (max-width: 1400px) {
    .videoContainer {
        display: block;
    }

    .iconTitle2 {
        display: inline-flex;
        vertical-align: top;
        position: static;
    }
}

@media (pointer: coarse) {
    #header-button:checked+#header-button-label+#dropdown-menu {
        display: block;
    }

    #header-button:checked+#header-button-label{
        color: #00ff00
    }
}

@media (pointer: fine) {

    #header-button-label:hover+#dropdown-menu,
    #dropdown-menu:hover {
        display: block;
    }

    #header-button-label:hover {
        color: #00ff00
    }
}

.red {
    border: solid 2px red
}