/*
 * code for a style sheet that resides in main directory
 * Here I can include custom css classes that will be pulled
 * in to the head section of my bootstrap website
 *
 */

/*
 * Color scheme
 * Black - #030303
 * White - #ffffff
 * Accent 1: Baby Blue - #97c6da
 * Accent 2: Red - #ff0000
 * Links: Blue - #0066ff
 */

#otherpages{
        padding: 0;
        margin: 0;
        background: #ffffff; // white
        font-family: 'Roboto';
}

.navbar {
        background-color:#97c6da; // baby blue
}

.nav-link,
.navbar-brand {
        color: #030303; // N/A now that I have a temp logo in
        cursor: pointer;
}
.nav-link {
        margin-right: 1em !important;
        //color:#f2f6e9;
}

.nav-link:hover {
        //color: #000;
        color: #d9051b;
}

.navbar-collapse {
        justify-content: flex-end;
}

.normal-text {
    font-size: 200%;
}

/* header stuff */
.header {
        background-image: url('./images/artsy.jpg');
        background-size: cover;
        background-position: center;
        position: relative;
}

/* this sheet will overlay over the header image, to provide a canvas */
.overlay {
        position: absolute;
        min-height: 100%;
        min-width: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
}

/* these classes will provide style info for the description class/tags */
.description {
        left: 50%;
        position: absolute;
        top: 45%;
        transform: translate(-50%, -55%);
        text-align: center;
}

.description h1 {
        color: #6ab446;
}

.description p {
        color: #fff;
        font-size: 1.3rem;
        line-height: 1.5;
}

/* button stuff */ 
.description button {
        border:1px solid #6ab446;
        background:#6ab446;
        border-radius: 0;
        color:#fff;
}

.description button:hover {
        border:1px solid #fff;
        background:#fff;
        color:#000;
}

/*--- footer ---*/

.page-footer {
    background-color: #97c6da;
    color: #303030;
}

.footer-copyright-left {
    float: left;
    color: #303030;
}

.footer-copyright-right {
    float: right;
    color: #303030;
}

.footer-copyright-right a {
    color: #303030;
}

/* tab functions */
.tab1 {
        tab-size: 2;
}

.tab2 {
        tab-size: 4;
}

.tab4 {
        tab-size: 8;
}

/* Create three unequal columns that floats next to each other */
.column-vid {
    float: left;
    padding: 10px;
}

/* Left and right column */
.column-vid.side {
    width: 10%;
}

/* Middle column */
.column-vid.middle {
    width: 80%;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column-vid.side, .column-vid.middle {
        width: 100%;
    }
}

/* video containers */
.container{ 
    display: grid; 
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: repeat(3, 1fr); 
    background-color: #FFFFFF; 
    gap: 0px 40px; 
}
.container > div { 
    //background-color: #ffffff; 
}


/* press containers */
.container-press{ 
    display: grid; 
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: repeat(2, 1fr); 
    background-color: #FFFFFF; 
    gap: 0px 40px; 
}

.container-press {
    width: 100%;
}


/* Create three unequal columns that floats next to each other */
.column-text {
    float: left;
    padding: 10px;
}

/* Left and right column */
.column-text.side {
    width: 15%;
}

/* Middle column */
.column-text.middle {
    width: 70%;
}

/* Left and right footer margins */
.column-text.footer-side {
    width: 7.5%;
}

/* Middle column for footer*/
.column-text.footer-middle {
    width: 85%;
}

/* changing the line spacing */
.row {
    line-height: 1.7;
}

/* changing the paragraph spacing */
p {
    margin-top: 1em ;
    margin-bottom: 1em ;
}

/* link hover styling */
.page-footer a:hover {
    color: #d9051b;
}

a:hover {
    color: #d9051b;
}
