:root{
    --bg: #2c2c2c;  /*Color for background on non-cover pages*/
    --bg3: #462e1b;
    --bg2: #5584ba;
    --fc3: #ff7b00;
    --fc2: #da9631;
    --fc: #ffffff;  /*Color for font on non-cover pages*/
    --cfc: #ffffff; /*Color for font on cover page*/
    --hc: #da9631; /*Color for hovering*/
    --hc2: #ff7b00;
    --fbb: #000000; /*border for fun button*/
    --white: #ffffff; /*white button color*/
    --grey: #dfdbdb;  /*white button hover color*/
    --lightred: #be9090; /*pdf button color*/
    --hoverred: #a77d7d; /*pdf button hover color*/
    --yellow: #ffea32;
    --dyellow: #fcc631;
    --dgrey: #888888;
    --ss: #8b3131;
    --sshov: #602222; 
    --sshov2: #391414; 
    --green: #597e5f;
    --ssgr: #64E36C;
}

html {
    height: 100%;
    margin: 0;
}

hr.one{

    border: 1px solid var(--dyellow);

}


hr.two{
    border: 1px solid var(--yellow);
}

hr.proj {
    margin: 40px;
}

.header {
    padding: 0px;
    text-align: left;
    background: var(--bg);
    color: var(--fc);
    font-size: 30px;
    font-family: 'BIZ UDPMincho', serif;
}

.headersanta {
    padding: 0px;
    text-align: left;
    background: var(--ss);
    color: var(--fc);
    font-size: 30px;
    font-family: 'BIZ UDPMincho', serif;
}

.headercover {
    padding: 0px;
    text-align: left;
    background-color: none;
    color: var(--cfc);
    font-size: 30px;
    font-family: 'BIZ UDPMincho', serif;
}
body {
    font-family: "Open Sans", sans-serif;
    color: var(--fc);
    padding-left: 60px;
    background: var(--bg);
    margin: 0;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
    
.content {
    flex: 1;
}

body.cover{

    background-image: url("../images/lake.jpg");
    background-size: cover;
    color: var(--cfc);
    
}

body.c24 {
    background-color: #2c2c2c;
}

body.santa {
    background: var(--ss);
}

body.covercali {
    background-image: url("../images/cali.jpg");
    background-size: cover;
    color: var(--cfc);
    text-shadow: 2px 2px #000000;
}

h2 {

    font-family: "Open Sans", sans-serif;
    list-style-type: none;
}

p {
    font-family: "Open Sans", sans-serif; 
    list-style-type: none;
}

ul {
    list-style-type: circle;
    font-family: "Open Sans", sans-serif;
    line-height: 1.8;
    letter-spacing:0px;
    
}

nav {
    border-bottom-style: solid;
    border-bottom-color: var(--fc2);
    border-bottom-width: 2px;
    padding-right: 30px;
}

nav.c {
    border-bottom-style: solid;
    border-bottom-color: var(--cfc);
    border-bottom-width: 2px;
    padding-right: 0px;
    width: 100%

}

.navi {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    /*letter-spacing: 1.5px;*/
    text-decoration: none;
    list-style-type: none;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*background-color: #2c2c2c;*/
    background-color: none;  
}

.navi li a {
    display: block;
    color: var(--fc);
    text-align: center;
    padding: 14px 16px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    letter-spacing: 1.5px;
}

.naviSanta {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    /*letter-spacing: 1.5px;*/
    text-decoration: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*background-color: #2c2c2c;*/
    background-color: none; 
    min-width: 875px;
}

.naviSanta li a {
    display: block;
    color: var(--fc);
    text-align: center;
    padding: 14px 16px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.navi li a:hover {
    color: var(--hc);
}

.naviSanta li a:hover {
    color: white;
    background-color: var(--sshov);
    border-radius: 15px 15px 0px 0px;
}

li a.selsanta {
    color: white;
    background-color: var(--sshov);
    border-radius: 15px 15px 0px 0px;

}
nav.cs {
    border-bottom-style: solid;
    border-bottom-color: var(--sshov);
    border-bottom-width: 3px;
    padding-right: 30px;

}
  
li.tabs {
    float: left;
}

li.tabsy {
    float: right;
    display: block;
    color: var(--fc);
    text-align: center;
    padding: 14px 16px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}


#demo {
    font-size: 22px;
    background: var(--sshov);
    font-weight: bold;
    margin-left: 5px;
    border-radius: 15px 15px 15px 15px;
    float: right;
    margin-right: 0px;

}

.spacer {
    letter-spacing:0.5px;
    display: flex;
    /*align-items: center;*/
    margin-top:40px;
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5px;*/
}

.leftstuff {
    /*float: left;*/
    padding-left: 40px;
    padding-right: 40px;
    font-size: 18px;
}

.rightstuff {
    margin-top:30px;
    margin-right: 35px;
    padding-right: 35px;
}

.jumpto a{
    text-decoration:none;
    color: var(--fc)

    
}

li a.sel {
    color: var(--hc);
}

li.res a {
    padding: initial;
    display:initial;
    text-align:initial;
    padding:initial;
    text-decoration: underline;
    color: var(--fc);
}

li.res a:hover {
    color: var(--hc);
}

a.c {
    color: var(--cfc);
}

div.projlist ul {
    line-height: 1.8;
    letter-spacing:0px;
}

a.res:link, a.res:visited {
    color: var(--fc);
}
a.res:hover{
    color: var(--hc);
}
  
  /* Change the link color to #111 (black) on hover */
li a:hover {
    color: var(--hc);
}


a.three:link, a.three:visited {
    background-color: #ffffff;
    color: var(--bg);
    border: 2px solid #76a7b6;
    padding: 10px 20px;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
}
  
a.three:hover, a.three:active {
    background-color: #dfdbdb;
    color: var(--bg);
}

.dark-mode {
    --bg: #none;
    --col: #ffffff; 
}

.light-mode {
    --bg: #ffffff;
    --col: #000000;
}

button.xmas { 
    padding: 15px;
    background: var(--bg);
    color: var(--white);
    font-size: 18px;
    border: none;/*2px solid var(--white);*/
}

 
.button-54 {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  float: left;
  /*text-transform: uppercase;*/

  color: var(--fbb);
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background-color: var(--white);
}

.button-54:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
  background-color: var(--grey)
}

.button-54:hover {
    background-color: var(--grey)
  }

.button-54r {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--fbb);
    cursor: pointer;
    border: 3px solid;
    padding: 0.25em 0.5em;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    background-color: var(--lightred);
    float: right
  }
  
  .button-54r:active {
    box-shadow: 0px 0px 0px 0px;
    top: 5px;
    left: 5px;
  }

  .button-54r:hover {
    background-color: var(--hoverred)
  }
@media (min-width: 768px) {
  .button-54 {
    padding: 0.25em 0.75em;
  }
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

div.item a {
    color: var(--fc);
    text-decoration: none;
}

div.item a:hover{
    color: var(--fc2);
    text-decoration: underline;
}

div.itemy img {
    width: 300px;
    height: 300px;
    background-color: grey;
}
.caption {
    display: block;
    font-size: 16px;
    letter-spacing: 0px;
}


.column {
    float: left;
    width: 21%;
    padding: 15px;
}


.columnL {
    float: left;
    width: 30%;
    padding: 15px;
}

.columnV {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 40px;
    column-gap: 20px;
    padding: 30px;
    align-items: center;
    justify-items: center;
   
}

.columnV1 {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 2fr;
    row-gap: 40px;
    column-gap: 20px;
    align-items: center;
    justify-items: center;
    padding: 30px; 
}

.columnV2 {
    display: inline-grid;
    grid-template-columns: 2fr 3fr;
    row-gap: 40px;
    column-gap: 20px;
    align-items: center;
    justify-items: center;
    padding: 30px;
}

.columnV3 {
    display: inline-grid;
    grid-template-columns: 3fr 2fr 2fr;
    row-gap: 40px;
    column-gap: 20px;
    align-items: center;
    justify-items: center;
    padding: 30px;
}
  
/* Clear floats after image containers*/

.row::after {
    content: "";
    clear: both;
    display: table;
}

.rightside {
    float: right;
    padding-top: 15px;
    padding-right:40px;
}

footer {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
}

footer img {
    width: 100px;
    /*display: block;
    margin-left: auto;
    margin-right: auto;*/
}

p.sig {

    padding-top: 75px;
    text-align: right;
}


p.logo {
    text-align: center;
}

.reslinks {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
}

table, td {
    border: 1px solid black;
}

tr {
    padding: 0 15px;
}

#trees {
    background-image: url('../pages/secretSanta/images/tree.png');
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-size: contain;/*100% 200%;*/
    width: 100%;
    height: 0;
    padding-top: 60.9%;
}

.treecontainer {
    position: relative;
    text-align: center;
    color: white;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.centered {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

#info_left {
    padding-top: 60px;
    padding-bottom: 20px;
    padding-left: 50px;
    /*padding-right: 200px;
    /*width: 50%;*/
}

#info {
    font-size: 20px;
    /*font-family: "Orbitron";*/
    letter-spacing: 0.0625em;
    line-height: 22px;
    padding-right: 25px;
    /*color:#90cd76;
    background: black;
    font-family: "Audiowide";*/
}

.yesSpy {
    font-family: "Orbitron";
    color:#90cd76;
}

.notSpy {
    font-family: "Open Sans", sans-serif;;
    color:white;
}

.yesSpyB {
    background-color: black;
}

.noSpyB {
    background-color: none;
}

textarea {
    font-family: "Arial";
}

#info_container {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    
}

#person_img {
    max-height: 100%;
    padding-left: 50px;
    padding-top: 20px;
}

.person_img {
    width: 100%;
}


.def { /* Default */
    min-width: 325px;
    max-width: 500px;
}

.port { /* Portrait shaped picture */
    min-width: 325px;
    max-width: 500px;
    padding-right: 100px;
}

.port2 { /* Portrait shaped picture subject farther away */
    min-width: 450px;
    max-width: 600px;
    padding-right: 50px;
}

.rect { /* Rectangular shaped picture */
    min-width: 500px;
    max-width: 800px;
    padding-right: 20px
}

.famimg {
    max-width: 50%;
}

#mainpic {
    max-width: 100%;
    min-width: 400px;
}

.bl {
    font-size: 25px;
    color: var(--ssgr);
    font-weight: bold;
}

.bgl{
    font-size: 50px;
    font-weight: bold;
    font-family: 'BIZ UDPMincho', serif;
    padding-right: 50px;;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
}

#spyBtn {
    display: none;
}


label {
    font-size: 25px;
}

.xmasBtn {
    border-radius: 8px;
    color: white;
    background-color: var(--sshov);
    border: 4px solid var(--sshov2);
    font-size: 20px;
    padding: 12px 28px;
    letter-spacing: 1px;
    text-decoration: none;
}

#getStarted {
    margin-bottom: 20px;
    white-space: nowrap;

}

.xmasBtn:hover {
    background-color: var(--sshov2);
}

#save {
    white-space: nowrap;
    text-align: right;
}

#cancel {
    margin-left: 25px;
}


.fa {
    margin-left: -12px;
    margin-right: 8px;
}

ul.nobull {
    list-style-type: none;
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    padding-top: 40px;
}

input {
    font-size: 18px;
}

textarea {
    font-size: 18px;
}

.linky {
    color: #9DE3FB;
}

.linky:hover {
    color: #87c5da;
}

.icon {
    font-size: 15px;
    padding-right: 5px;
}

.iconList {
    list-style-type: none;
}

.nowrap {
    white-space: nowrap;
}

.grid-container {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 20% auto auto auto auto auto auto auto 20%;;
    /*background-image: url("../pages/secretSanta/images/xmastree.svg"); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    */
    padding: 0px;
    height: 1500px;
    min-width: 1150px;
}

.treeimg {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 1500px;
}

.grid-item {
    padding: 0px;
    /*font-size: 30px;*/
    text-align: center;
    border: none;
    margin: 0;
    height: 50px;
    max-height: 50px;
    max-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.treecontainer {
    display: grid;
    align-items: center;
}

.ornaBtn {
    height: 90px;
    width: 90px;
    min-height: 90px;
    min-width: 90px;
    border-radius: 50%;
    border: none;
    background-color: #b45656;
    text-align: center;
    font-size:18px;
    color:white;
}

.ornaBtn:hover {
    font-weight: bold;
    background-color: var(--ss);
    min-height: 120px;
    min-width: 120px;
    font-size: 21px;
    background-color: var(--ss);
    z-index: 1;
}


.img1:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/1_face.jpg);
}
.img2:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/2_face.jpg);
}
.img3:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/3_face.jpg);
}
.img4:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/4_face.jpg);
}
.img5:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/5_face.jpg);
}
.img6:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/6_face.jpg);
}
.img7:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/7_face.jpg);
}
.img8:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/8_face.jpg);
}
.img9:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/9_face.jpg);
}
.img10:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/10_face.jpg);
}
.img11:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/11_face.jpg);
}
.img12:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/12_face.jpg);
}
.img13:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/13_face.jpg);
}
.img14:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/14_face.jpg);
}
.img15:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/15_face.jpg);
}
.img16:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/16_face.jpg);
}
.img17:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/17_face.jpg);
}
.img18:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/18_face.jpg);
}
.img21:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/21_face.jpg);
}
.img22:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/22_face.jpg);
}
.img23:hover {
    background:url(../pages/secretSanta/images/famMembers/faces/23_face.jpg);
}

.imgBtn:hover {
    color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 200px;
    min-width: 200px;
    z-index: 1;
    
}

#back {
    font-size: 40px;
    color: white;
    padding: 10px;
    position: absolute;
    left: 50px;
    top: 215px;
}

#back:hover {
    background-color: var(--sshov);
    border-radius: 8px;
}