/* Style Sheet for Nancy Melchert.com
   Simplistic style, dark grey on white
   Expanding buttons around links     */

body{
    background: #FFFFFF;
    margin:1%;
    font-family: Arial;
    font-size: 95%;
    display: flex;
    flex-direction: column;
}

/* Header with a grey gradient bg to white, left align, padded around */
header{
    background: #ffffff;
    background: -moz-linear-gradient(top, #a9a9a9 0%, #ffffff 100%);
    background: -webkit-linear-gradient(#a9a9a9 0%, #ffffff 100%);
    background: -o-linear-gradient(#a9a9a9 0%, #ffffff 100%);
    background: linear-gradient(#a9a9a9 0%, #ffffff 100%);
    text-align: left;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 5px;
}
/* black text in headers where h2 is used */
h2{
    color: #000000;
}
/* gray text in headers where h3 is used */
h3{
    color: #a9a9a9;
}
/* black text on the blog where h5 is used */
h5{
    color: #000000;
}
/* unvisited link */
a:link {
    color: #ffffff;
    text-decoration: none;
}
/* visited link */
a:visited {
    color: black;
}
/* mouse over link */
a:hover {
    color: #000000;
}
/* selected link */
a:active {
    color: blue;
}
/* main block on main page */
.mainDiv {
  /*  margin: auto;*/
  padding-top: 14px;
  padding-bottom: 30px;
  text-align: center;
  padding-inline-end: 20px;
}
/* for Samantha Short Film */
.samdiv{
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center;
    border-radius: 20px;
}
/*for Sam intro animation until the film is ready */
.samintroimg {
    background-color: #000000;
    color: #a9a9a9;
    text-decoration: white;
    margin: auto;
    text-align: center;
    align-items: center;
    border-radius: 20px;
    width: 80%;
    padding: 10px;
    box-shadow: 5px 5px 10px #000000;
}
/* for the links on the main page to be in buttons and change when hovered over */
a.one:link, a.one:visited {
    background-color: #ffffff;
    color: #a9a9a9;
    border: 2px solid #000000;
    width: 300px;
    border-radius: 20px;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

a.one:hover, a.one:active {
    background-color: #000000;
    padding: 20px 32px;
    font-size: 170%;
    border: 2px solid #ffffff;
    border-radius: 40px;
    width: 400px;
    text-decoration: none;
    box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5), 0 12px 40px 0 rgba(0,0,0,0.49);
}

/* footer to be the opposite of the header */
footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height:20px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 5px;
    background: #a9a9a9;
    background: -moz-linear-gradient(bottom, #ffffff 0%, #000000 100%);
    background: -webkit-linear-gradient(#ffffff 0%, #000000 100%);
    background: -o-linear-gradient(#ffffff 1000%, #000000 100%);
    background: linear-gradient(#ffffff 0%, #a9a9a9 100%);
}
/* put a little padding around a paragraph */
.p{
    margin: 15px;
    padding: 15px;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    margin: auto;
    float: left;
    width: 70%;
    padding: 10px;
}

/* Right column */
.rightcolumn {
    float: right;
    width: 20%;
    /*padding-left: 5px;*/
}
.column {
    float: left;
    width: 30%;
    padding: 10px;
    text-align: center;
    cursor: auto;
    color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000;
}

.containerTab {
    padding: 1px;
    color: black;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Create two equal columns that float next to each other for sheets */
/* Left column */
.leftcolumn2 {
    float: left;
    width: 45%;
}

/* Right column */
.rightcolumn2 {
    float: left;
    width: 45%;
}

/* Fake image*/
.fakeimg {
    background-color: #ffffff;
    color: #444444;
    margin: auto;
    text-decoration: white;
    text-align: left;
    align-items: center;
    border-radius: 20px;
    width: 70%;
    padding: 10px;
    box-shadow: 5px 5px 10px #000000;
}


/* Add a card effect for articles */
.card {

    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: white;
    padding: 20px;
    border: 1px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000;
}

.card-two {
    margin: auto;
    background-color: white;
    padding: 20px;
    border: 1px;
    border-radius: 20px;
}


/* Closable button inside the image */
.closebtn {
    float: right;
    color: black;
    font-size: 25px;
    cursor: pointer;
}

iframe:focus {
    outline: none;
    padding: 10px;
}

iframe[seamless] {
    display: flex;
    padding: 10px;
}
.captions-menu {
    display: none;
    position: absolute;
    bottom: 14.8%;
    right: 20px;
    background: #666;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    padding: 10px;
}

.captions-menu li {
    padding: 0;
    text-align: center;
}

.captions-menu li button {
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
    width: 90%;
    padding: 2px 5px;
    border-radius: 2px;
}
.controls button[data-state="captions"] {
    height: 85%;
    text-indent: 0;
    font-size: 16px;
    font-size: 1rem;
    font-weight: bold;
    color: #666;
    background: #000;
    border-radius: 2px;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
    }
}