/*
CSS Document used for the Web project 1 assignment
Author: Manny McCullom
Course: ITWP 1000
File: styles.css
*/

/* Variable declarations */
:root
{
    /* Page Colors */
    --colorPrimary: lime;
    --colorSecondary: rgb(153, 87, 26);

    /* Preset Horizontal Line Element Styles */
    --hrPrimary: solid var(--colorPrimary);
    --hrSecondary: solid var(--colorSecondary);

    /* Page Width */
    --contentWidth: 50%;
}

header
{
    background-color: white;
}

body
{
    background-image: url(background_images/image_05.png);
}

footer
{
    background-color: white;
}

#mainPageHeader
{
    font-size: xx-large;
    background-color: white;
    text-align: center;
}

.fontColorPrimary
{
    color: var(--colorPrimary);
}

.fontColorSecondary
{
    color: var(--colorSecondary);
}

#pageContent
{
    font-size: x-large;
    width:40%;
    min-width: 800px;
    margin: auto;
    text-align: center;
}

.hrHeader
{
    border:solid white;
}

.hrPrimary
{
    border: var(--hrPrimary);
}

.hrSecondary
{
    border: var(--hrSecondary);
}

.elementBackground
{
    background-color: var(--colorPrimary);
    border: var(--hrSecondary);
}

#validation
{
    font-size:x-large;
    text-align: center;
}

#navigation
{
    font-size: xx-large;
    color: var(--colorSecondary);
    text-align: center;
    background-color: var(--colorPrimary);
}

.imageContainer
{
    margin:auto;
    margin-bottom: 1%;
    margin-top: 1%;
    text-align: center;
    border-style: none;
}

.videoContainer
{
    margin:auto;
    margin-bottom: 1%;
    margin-top: 1%;
    text-align: center;
    border-style: none;
}

.audioContainer
{
    margin:auto;
    margin-bottom: 1%;
    margin-top: 1%;
    text-align: center;
}

.image
{
    padding:1%
}

.video
{
    width: 80%;
    aspect-ratio: 16/9;
    margin: 1%;
}

.audio
{
    padding: 1px;
}
    
.paragraph
{
    padding: 1%;
    background-color: white;
    border: var(--hrSecondary);
    margin: auto;
}

#infoFooter
{
    font-size: large;
    text-align: center;
    background-color: var(--colorPrimary);
}