/*My .css for column wrappers on all pages*/
/*1 Column Wrapper----------------------------------------------------------------------------------------------------*/
.Citation{
    background: linear-gradient(to top   , rgba(255,0,0,0), rgba(115, 125, 255, 1));
    color: black;
    padding: 10px 8px;
    border: 1px solid black;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 100fr;
    grid-template-rows: auto;
    grid-template-areas: "oneWrap";
    text-align: center;
}

.Citation:hover{
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(4, 99, 7, 1));
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px grey;
    border-radius: 8px;
    opacity: 80%;
    color: rgb(255, 236, 161);
}

.oneWrap{
    grid-area: oneWrap;
}

/*2 Column Wrapper----------------------------------------------------------------------------------------------------*/
.twoColumnWrapper{
    display: grid;
    grid-template-columns: 45fr 45fr;
    grid-template-rows: auto;
    grid-template-areas: "leftColumn    rightColumn";
}

.leftColumn{
    grid-area: leftColumn;
    margin-right: 5px;
}
.rightColumn{
    grid-area: rightColumn;
    margin-left: 5px;
}

/*3 Column Wrapper----------------------------------------------------------------------------------------------------*/
.threeColumnWrapper{
    display: grid;
    grid-template-columns: 32fr 32fr 32fr;
    grid-template-rows: auto;
    grid-template-areas: "leftColumnFirst   centerColumnSecond   rightColumnThird";
    padding: 10px;
}

.threeColumnFirst{
    grid-area: leftColumnFirst;
    margin-right: 2px;
    border: 1px solid black;
    border-radius: 8px;
    text-align: center;
}
.threeColumnSecond{
    grid-area: centerColumnSecond;
    margin-right: 2px;
    margin-left: 2px;
    border: 1px solid black;
    border-radius: 8px;
    text-align: center;
}
.threeColumnThird{
    grid-area: rightColumnThird;
    margin-left: 2px;
    border: 1px solid black;
    border-radius: 8px;
    text-align: center;
}

/*Card Formatting-----------------------------------------------------------------------------------------------------*/
.forwardCard{
    background: transparent;
    color: black;
    border: 1px solid black;
    border-radius: 8px;
    margin: 10px 12px;
}

.forwardCard:hover{
    background: rgba(4, 99, 7, 1);
    transition: 1s;
    color: black;
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px grey;
    border-radius: 8px;
    opacity: 80%;
    margin: 10px 12px;
}

.sectionBreak{
    background: linear-gradient(to top   , rgba(255,0,0,0), rgba(115, 125, 255, 1));
    color: black;
    padding: 10px 8px;
    border: 1px solid black;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 100fr;
    grid-template-rows: auto;
    text-align: center;
    margin-top: 10px;
}

/*Collapsible Header index--------------------------------------------------------------------------------------------*/
.indexHeaderBtn{
    background: transparent;
}
.indexContentDefaultState{
    height: 100px;
    background-color: transparent;
    transition: all 0.3s linear;
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px grey;
    border-radius: 8px;
}


/*Video Image Divider(a video center and 2 images on the side, video size and auto image size, 3 column wrap)---------*/
.indexWrapper{
    display: grid;
    grid-template-columns: 32fr 32fr 32fr;
    grid-template-rows: auto;
    grid-template-areas: "indexOne   indexTwo   indexThree";
    padding: 10px 8px;
    border: black solid 1px;
    border-radius: 8px;
    vertical-align: middle;
    margin: 10px;
    align-items: center;
}

.indexWrapper img{
    display: block;
    border: 1px solid black;
    border-radius: 8px;
}

/*Testing if I can make just the images in the index page zoom in when hovered*/
figure.indexOne:hover img{
    transform: scale(1.2);
    transform-origin: left;
    border-radius: 8px;
    overflow: hidden;
}
figure.indexThree:hover img{
    transform: scale(1.2);
    transform-origin: right;
    border-radius: 8px;
    overflow: hidden;
}

.indexOne{
    grid-area: indexOne;
    margin-left: 10px;
    text-align: center;
    vertical-align: middle;
    align-items: center;
}
.indexTwo{
    grid-area: indexTwo;
    margin-right: 10px;
    /*margin-left: 10px;*/
    text-align: center;
    vertical-align: middle;
}
.indexThree{
    grid-area: indexThree;
    margin-left: 10px;
    text-align: center;
    vertical-align: middle;
    align-items: center;
}

/*Hidden Class--------------------------------------------------------------------------------------------------------*/
.hidden{
    display: none;
}

/*Collapsible Image 1 (testing if it hides nested div elements)-------------------------------------------------------*/
.image1headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.image1contentDefaultState{
    height: auto;
    background-color: transparent;
    transition: all 0.3s linear;
}
/*Collapsible Image 2-------------------------------------------------------------------------------------------------*/
.image2headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.image2contentDefaultState{
    height: auto;
    background-color: transparent;
    transition: all 0.3s linear;
}
/*Collapsible Image 3-------------------------------------------------------------------------------------------------*/
.image3headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.image3contentDefaultState{
    height: auto;
    background-color: transparent;
    transition: all 0.3s linear;
}
/*Collapsible Image 4-------------------------------------------------------------------------------------------------*/
.image4headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.image4contentDefaultState{
    height: auto;
    background-color: transparent;
    transition: all 0.3s linear;
}


/*Collapsible Header Citation 1---------------------------------------------------------------------------------------*/
.Citation1headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.Citation1contentDefaultState{
     height: 100px;
    background-color: transparent;
    transition: all 0.3s linear;
}
.contentCollapsed{
    height: 0;
    overflow: hidden;
}
/*Collapsible Header Citation 2---------------------------------------------------------------------------------------*/
.Citation2headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.Citation2contentDefaultState{
    height: 100px;
    background-color: transparent;
    transition: all 0.3s linear;
}
.contentCollapsed{
    height: 0;
    overflow: hidden;
}
/*Collapsible Header Citation 3---------------------------------------------------------------------------------------*/
.Citation3headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.Citation3contentDefaultState{
    height: 100px;
    background-color: transparent;
    transition: all 0.3s linear;
}
.contentCollapsed{
    height: 0;
    overflow: hidden;
}
/*Collapsible Header Citation 4---------------------------------------------------------------------------------------*/
.Citation4headerBtn{
    background-color: rgb(211, 236, 255);
    border: 1px solid black;
}
.Citation4contentDefaultState{
    height: 100px;
    background-color: transparent;
    transition: all 0.3s linear;
}
.contentCollapsed{
    height: 0;
    overflow: hidden;
}