/* BODY ********************************************************************************************************************************************************** */
body {
    background: #eaeffa;
    font-family: "Verdana", "Helvetica", "Arial", "serif", "sans-serif";
    font-size: 18px;
    margin: 10px;
}

/* HEADER ********************************************************************************************************************************************************** */

/* Define an animation for .header-box2. */
@keyframes fadeInUp {

    /* Where the animation starts. */
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    /* Where the animation ends. */
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* header background */
.header-background {
    background-image: url("banner3.png");
    background-size: cover;
    background-position: center;
    padding: 30px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1000;
}

/* The box that contains the header picture and title (and button if present).*/
.header-box2 {
    /* Center elements vertically within box. Leave space between the items. The image and header are not separated because they are within the title-left div. */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* CSS related to font */
    color: white;
    font-size: 20px;
    font-weight: bold;

    /* CSS related to box itself. This defines the look of background directly behind picture and title (and button if present).*/
    background-color: rgba(0, 0, 102, 0.75);
    padding: 20px;
    /* Give button more padding so dropdown doesn't go off screen. */
    padding-right: 30px;
    border-radius: 12px;

    /* Apply the previously defined animation to this element. The animation will occur upon loading the page because the css is applied at the same time as the 
    page is loaded. Make it last for 1s, deccelerate the animation as it continues (ease-out), and maintain whatever the end-state of the animation is after it 
    is finished rather than reverting to what is defined in the main set of rules (forwards).*/
    animation: fadeInUp 1s ease-out forwards;
}

/* The title on page - ie. TygerMatrix Software */
.title-left {
    /* Make text and icon display on the same line centered in the middle of that line. */
    display: inline-flex;
    align-items: center;
}

/* NAV BUTTON ********************************************************************************************************************************************************** */

/* Container for button with dropdown menu. Tells bots and screen readers where the links are. */
#header-nav {
    /* Make inline so that it wraps */
    display: inline;

    /* Position relative so that you can position header-button absolute removing it from the document flow. */
    position: relative;

    box-sizing: border-box;
}

/* This label acts as a button that openes the dropdown menu. When the label is hovered over with a cursor, it will open the dropdown. If the
label is tapped on, the checkbox associated with the label is checked or unchecked opening or closing the dropdown (the button becomes a toggle
when using a touch screen). */
#header-button-label {
    /* Change mouse cursor to pointer when you hover over label. */
    cursor: pointer;

    /* Make sure checkbox is unselected by default. Different rules exist for the various browsers. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* CSS related to styling the the button. */
    background-color: #000066;
    border: solid 2px #00001a;
    color: white;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}

/* This is an invisible checkbox. When it is checked, the dropdown appears. When it is unchecked, the dropdown disappears. */
#header-button {
    /* Make checkbox invisible. */
    display: none;
}

/* The dropdown menu. */
#dropdown-menu {
    /* Don't display it by default. */
    display: none;

    /* Remove list dots. */
    list-style: none;

    /* Remove unordered list's default padding and margin so that it's directly below the button and aligned with its left edge. */
    margin: 0px;
    padding: 0px;

    box-sizing: border-box;

    /* Remove dropdown from the flow of document so width of button and dropdown menu are de-coupled. */
    position: absolute;

    /* Make it so that the dropdown's text takes up as much width as possible. This allows the dropdown's width to be greater than its container's width.
    Then specify max-width so that longer items wrap. */
    width: max-content;
    max-width: 175px;

    /* Shrink dropdown text so it wraps better. */
    font-size: medium;
}

/* The dropdown menu items. */
#header-nav li {
    /* CSS related to styling dropdown menu items. */
    background-color: #000066;
    border: solid 2px #00001a;
    padding: 10px;

    box-sizing: border-box;

    /* Make the borders of each item overlap each other so that there are no 4px wide top/bottum borders. */
    margin-top: -2px;
}

/* Links in dropdown menu. */
#header-nav a {
    /* Make link colors white by default. */
    color: white;
}

#header-nav a:hover {
    /* Make links turn green when hovered over. */
    color: #00ff00
}

/* DESCRIPTION BOX ********************************************************************************************************************************************************** */

/* The rendering of page contents happens in a certian order. First the normal flow backgrounds/content is rendered. Then the 
positioned elements (absolute, relative, etc.) are rendered. Within these two stacking contexts, elements that appear later in the HTML 
are rendered later than their preceding elements and elements that are within containing elements are rendered later than their containing 
elements. Elements that are rendered later appear above elements that are rendered earlier. You can manually change the layering of POSITIONED
elements using z-index where higher values are above lower values. */

/* When you specify the z-index of an inner element, that speficies which layer that element is within the CONTAINING element, not overall. So
if you have an element with an index of 250 and then another element with an inner element that has an index of 500, the one with an index of 250
will still cover the one with an index of 500. This is because the index of 250 refers to the 250th layer of the OVERALL PAGE while 500 refers to
the 500th layer of the CONTAINING ELEMENT. */

/* Section header is a wrapper for h3. Create this so that you can place a background behind h3 and change its opacity
without changing the opacity of the text. */
.section-header {
    /* Position relative so that you can position absolute for background later. */
    position: relative;

    margin-bottom: 20px;
}

/* Before does not mean insert something before the element. It means insert something as the first child of
that element. Here we place the background as the first child of the section header. This way the background is rendered before
the h3 and will be behind it. */
.section-header::before {
    /* Make an empty element behind h3. */
    content: "";

    /* Stretch element to fit h3. */
    position: absolute;
    inset: 0;

    /* Add background to element and decrease opacity. */
    background: url("banner3.png") no-repeat center center / cover;
    opacity: 0.15;
}

.section-header h3 {
    /* If h3 were not a positioned element, it would be rendered before the background because elements in the document's normal flow
    are rendered first. This means that the background would cover the text. Since h3 is now a positioned element, whether the text
    or background is rendered first is based on the order that they appear in the HTML. The background appears before the h3 in the
    HTML so it goes behind the text rather than in front. */
    position: relative;

    /* CSS related to styling h3 */
    padding: 50px;
    color: #193366;
    border: 3px solid #5c85d6;
    line-height: 1.5;

    /* Remove the margin so that it doesn't escape the parent element. When a child element has a margin (h3 has margins by defualt),
    that margin can escape the parent element meaning that the margin appears outside the parent element. */
    margin: 0px;
}

/* Unordered lists in the section header. */
.section-header ul {
    font-weight: normal;
    list-style: circle;
    margin-left: 20px;
    line-height: 2.5;
}

/* Icons and descriptions ********************************************************************************************************************************************************** */

/* General styling of all icons */
.icons {
    width: 100px;
    height: 100px;
    border: 5px solid white;
    border-radius: 10px;
    margin-right: 1em;
    box-sizing: border-box;
}

/* tygermatrix icon */
#mainIcon {
    /* Make main icon slightly bigger than the rest */
    width: 105px;
    height: 105px;

    /* Set min-size so that the icon never shrinks as the screen gets smaller. Only the text will shrink. */
    min-height: 105px;
    min-width: 105px;

    /* Defined border and put margin so text is not right next to image. */
    margin-right: 15px;
}

/* for any other "icons" with dark border used on the page */
.iconsDark {
    border: 5px solid #c1d0f0;
    margin-left: 10px;
    margin-bottom: 20px;
}

/* Show that icon is clickable by apllying border when hovered over. */
.iconsClickable:hover {
    border: 5px solid #ff33cc;
}

/* Title and icon (that have associated video) */
.iconTitle {
    /* 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. */
    position: absolute;
    top: 0px;
    left: 0px;

    /*  Center the text */
    display: flex;
    align-items: center;

    /* Give icon title a min-width so that videos are lined up once they stop being centered using flex. */
    min-width: 400px;

    padding-left: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Title and icon (that does not have associated video) */
.iconTitle2 {
    /* Used flex to center text. Doing it this way allows the text to wrap properly. */
    display: inline-flex;
    align-items: center;

    margin-left: 10px;
    margin-bottom: 20px;
}

/* Textual description for the icon */
.iconDesc {
    padding: 10px;
    background: #c1d0f0;
    margin: 0px;
    margin-bottom: 20px;
}

/* Videos ********************************************************************************************************************************************************** */

/* Contains the video and link. */
.videoContainer {
    /* Center the content of the video container. Because the link is removed from the flow of the document
    using position: absolute, the video is centered in the middle of the overall page. Once the video reaches
    the link, the container is displayed as block and the iconTitle as inline-flex so that the video does not go
    under the link and instead wraps. */
    display: flex;
    justify-content: center;

    /* Position relative so you can position icon title absolute. */
    position: relative;

    margin-bottom: 20px;
}

/* Video itself */
.video {
    /* 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. */
    width: 100%;
    max-width: 560px;

    /* Maintain the same aspect ration when scaling video. */
    aspect-ratio: 16 / 9;
}

/* Scroll container ********************************************************************************************************************************************************** */

/* Container for phone images */
.scroll-container {
    /* Space items out evenly. */
    display: flex;
    gap: 10px;

    /* Add horizontal scrollbar if items overflow horizontally. */
    overflow-x: auto;

    /* Padding inside the scroll container */
    padding: 10px;

    border: 2px solid #ccc;
    margin-bottom: 10px;
}

/* Phone image styling */
.scroll-container img {
    /* Set a consistent width for images */
    width: 250px;

    /* Rounded image corners. */
    border-radius: 8px;

    /* Add shadow behind images. */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Indicates to scroll right for scroll container. */
#scrollHeader {
    color: #5c85d6;
    margin-left: 20px;
    margin-bottom: 60px;
}

/* Other ********************************************************************************************************************************************************** */

/* Main page header */
h1 {
    /* Removes extra margin created when main header wraps. This prevents extra spacer above and below
    the main header. */
    margin: 0px;
}

/* Current apps header. */
h2 {
    /* Center text with appstore image. h2 and appstore are displayed as block when the screen gets smaller
    so that the appstore image can wrap below. */
    display: flex;
    align-items: center;

    color: #5c85d6;
    margin: 0px;
    margin-bottom: 20px;
}

/* Used for bolding various elements */
h4 {
    color: #5c85d6;
    margin: 0px;
    margin-bottom: 20px;
}

/* For styling copyright at bottom of page */
#copyright {
    color: #5c85d6;
    font-size: medium;
    margin: 0px;
}

/* For styling default color of links */
a {
    /* This stops the link from being purple after being visited. */
    color: blue;

    /* Removes underline. */
    text-decoration: none;
}

/* For styling color of links when hovered over. */
a:hover {
    color: #ff33cc;
    text-decoration: underline;
}

/* For styling back button. */
#backbutton {
    /* Force wrapping to occur if the back button takes up more than 70% of the width. This makes back buttons
    look better on smaller screens. */
    max-width: 70%;

    margin: 0px;
    margin-bottom: 20px;
}

/* For styling app store image. */
.appstore {
    width: 200px;
    margin-left: 20px;
}

/* For styling TOS and privacy policy iframes. */
.TOS,
.privacyPolicy {
    /* Set width to 80% so there is space to scroll page itself (and not PDF). For smaller screens,
    the width is set to 100% so the PDF is more readable. */
    display: block;
    width: 80%;

    /* Center the PDF. */
    margin-left: auto;
    margin-right: auto;

    /* Adjust height. For smaller screens the height is smaller so the PDF reader isn't too tall for the screen. */
    height: 800px;

    margin-bottom: 20px;
}

/* Directions for accessing more information about apps. */
#indexDirections {
    color: #5c85d6;
    margin: 0px;
    margin-bottom: 80px;
}

/* Smaller screens ********************************************************************************************************************************************************** */

/* Less than 1400px. */
@media (max-width: 1400px) {
    /* 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. */

    /* Contains the video and link. */
    .videoContainer {
        /* Stop centering using flex so that wrapping can occur. */
        display: block;
    }

    /* Title and icon (that have associated video) */
    .iconTitle {
        /* Position static so that icon title re-enters the flow of document. This prevents video from going under icon title.
        Display as in-line flex so that wrapping can occur */
        position: static;
        display: inline-flex;

        /* Align icon title with the top of line and therefore the top of video. */
        vertical-align: top;
    }
}

/* Less than 1200px. */
@media (max-width: 1200px) {
    /* Once the drop down gets too close to the main header, make it wrap by making header box and drowdown display as block. */

    /* The box that contains the header picture and title (and button if present).*/
    .header-box2 {
        /* Display as block so wrapping can occur. */
        display: block;
    }

    /* Container for button with dropdown menu. Tells bots and screen readers where the links are. */
    #header-nav {
        /* Display as block so dropdown moves to next line. */
        display: block;

        /* Add top margin so their is space between dropdown and main icon. */
        margin-top: 20px;

        /* Make is so dropdown does not take up entire width. */
        width: fit-content;
    }
}

/* Less than 650px. */
@media (max-width: 650px) {

    /* Once the text starts wrapping too much, make the app store image wrap below it so that the text has more room by
    displaying the text and image as block */
    h2 {
        /* Display as block so wrapping can occur. */
        display: block;
    }

    .appstore {
        /* Display as block so app store image moves to next line. */
        display: block;

        margin-left: 0px;
        margin-top: 20px;
    }
}

/* Less than 600px. */
@media (max-width: 600px) {

    /* Main page header */
    h1 {
        /* Change header to smaller font so that it fits in the banner for smaller screens. */
        font-size: x-large;
    }

    /* Text inside section header. */
    .section-header h3 {
        /* Reduce padding so that texts wraps better for smaller screens. */
        padding: 20px;
    }

    /* Section header is a wrapper for h3. Created this to place a background behind h3 and change its opacity
    without changing the opacity of the text. */
    .section-header {
        /* Reduce font size so that texts wraps better for smaller screens. */
        font-size: 14px;
    }

    /* For styling TOS and privacy policy for smaller screens. */
    .TOS,
    .privacyPolicy {
        /* Adjust width and height so TOS and privacy policy fit better for smaller screens. */
        width: 100%;
        height: 400px;
    }
}

/* Less than 450px. */
@media (max-width: 450px) {

    /* Reduce font size so that texts wraps better and can fit for smaller screens. */
    h1 {
        font-size: 20px;
    }
}

/* Cursor vs. touch screen ********************************************************************************************************************************************************** */

/* Rules applied when using cursor. */
@media (pointer: fine) {

    /* If the label is hovered over, apply this rule to the dropdown menu. If the dropdown menu is hovered
    over, apply this rule to the dropdown menu */
    #header-button-label:hover+#dropdown-menu,
    #dropdown-menu:hover {
        /* Display the dropdown. */
        display: block;
    }

    #header-button-label:hover {
        /* Change label color when label it is hovered over. Only applying this rule when a cursor is being used
        prevents strange behavior for touch screens. */
        color: #00ff00
    }
}

/* Rules applied when using touch. */
@media (pointer: coarse) {

    /* If the checkbox is checked (through tapping on the label), apply this rule to the dropdown menu. */
    #header-button:checked+#header-button-label+#dropdown-menu {
        /* Display the dropdown. */
        display: block;
    }

    /* If the checkbox is checked (through tapping on the label), apply this rule to the label. */
    #header-button:checked+#header-button-label {
        /* Change the color of the label. */
        color: #00ff00
    }
}

/* Dark mode ********************************************************************************************************************************************************** */

/* @media (prefers-color-scheme: dark) {
    body {
        background: #292b2c;
    }

    .header-box2 {
        color: rgb(207, 207, 207);
    }

    #header-button-label {
        color: rgb(207, 207, 207);
    }

    #header-nav a {
        color: rgb(207, 207, 207);
    }

    .title-left img {
        border-color: #3e4142;
    }

    .section-header h3 {
        border-color: #244b97;
        color: #96b9dc;
    }

    #indexDirections {
        color: #679acf
    }

    h2 {
        color: #679acf
    }

    h4 {
        color: #679acf
    }

    #copyright {
        color: #679acf
    }

    .iconDesc {
        background: #354e69;
        color: rgb(207, 207, 207);
    }

} */