html{position:relative;height:100%;min-height:100%}

[data-theme="Dammy-Theme"]{
/* GENERAL */
--background:linear-gradient(180deg,#F8A040 0%, #FFEABE 40%);
--color-text:#05313E;
--table-border:1px solid #F8A040;
--title-welcome:#ADEDB3;
--title-welcome-shadow:2px 1px 1px #53B25D, 1px -2px 0 #53B25D, -1px 1px 0 #53B25D, -1px -1px 0 #53B25D, 1px 0px 0 #53B25D, 0px 2px 0 #53B25D, -2px 0px 0 #53B25D, 0px -2px 0 #53B25D, 4px 5px 2px #53B25DA1;
--table-background:url('img_index/table-fondo-i.png');
--table-date-shadow:2px 1px 1px #F8A040, 1px -2px 0 #F8A040, -1px 1px 0 #F8A040, -1px -1px 0 #F8A040, 1px 0px 0 #F8A040, 0px 2px 0 #F8A040, -2px 0px 0 #F8A040, 0px -2px 0 #F8A040;
--aside-color:#FFEABE;
--text-color-aside:#7A413A;
--u:#B23F3C;--u-border:1px dotted underline #B23F3C;
--quote-i:4px solid #F8A040;
--quote-ii:4px solid #B23F3C;

/* NAVIGATION-SETTINGS */
--background-table:linear-gradient(180deg,#FEEBE0 0%, #FFE383 50%, #FFBC74 100%);
--border-table:3px solid #F8A040;

/* HEADER-SETTINGS */
--backgroung-header:url('img_index/header-ii.png');
--border-text-days:2px 1px 1px #7A413A, 1px -2px 0 #7A413A, -1px 1px 0 #7A413A, -1px -1px 0 #7A413A, 1px 0px 0 #7A413A, 0px 2px 0 #7A413A, -2px 0px 0 #7A413A, 0px -2px 0 #7A413A;
--text-days:#7A413A;
}

[data-theme="Deuce-Theme"] {
/* GENERAL */
--background:linear-gradient(180deg,#1F2B42 0%, #435779 40%);
--color-text:#1F2B42;
--table-border:1px solid #5C6BA7;
--title-welcome:#A5DFEF;
--title-welcome-shadow:2px 1px 1px #7BB3CF, 1px -2px 0 #7BB3CF, -1px 1px 0 #7BB3CF, -1px -1px 0 #7BB3CF, 1px 0px 0 #7BB3CF, 0px 2px 0 #7BB3CF, -2px 0px 0 #7BB3CF, 0px -2px 0 #7BB3CF, 4px 5px 2px #5C95B1A1;
--table-background:url('img_index/table-fondo.png');
--table-date-shadow:2px 1px 1px #6A7CBC, 1px -2px 0 #6A7CBC, -1px 1px 0 #6A7CBC, -1px -1px 0 #6A7CBC, 1px 0px 0 #6A7CBC, 0px 2px 0 #6A7CBC, -2px 0px 0 #6A7CBC, 0px -2px 0 #6A7CBC;
--aside-color:#E9E1FF;
--text-color-aside:#595A92;
--u:#EC96AE;--u-border:1px dotted underline #EC96AE;
--quote-i:4px solid #5368A6;
--quote-ii:4px solid #EC96AE;

/* NAVIGATION-SETTINGS */
--background-table:linear-gradient(180deg,#FBEDFF 0%, #E0D5FC 50%, #B5B6F9 100%);
--border-table:3px solid #1F2B42;

/* HEADER-SETTINGS */
--backgroung-header:url('img_index/header-i.png');
--border-text-days:2px 1px 1px #5C6BA7, 1px -2px 0 #5C6BA7, -1px 1px 0 #5C6BA7, -1px -1px 0 #5C6BA7, 1px 0px 0 #5C6BA7, 0px 2px 0 #5C6BA7, -2px 0px 0 #5C6BA7, 0px -2px 0 #5C6BA7;
--text-days:#5C6BA7;
}

/* GENERAL */
body{
margin:0;
background:var(--background);
background-size:cover;
background-attachment:fixed;
color:var(--color-text);
font:15px 'Rubik'
}
a{color:#65A1BE;text-decoration:1px solid underline #65A1BE;
&:hover{text-decoration:1px dashed underline #3A3A3A;font-style:italic}}
p{margin:0 0 10px 0}
u{color:var(--u);text-decoration:var(--u-border)}
main{width:900px;min-height:800px;margin:auto}
img{width:100%}

header button, #date, .i-love-you{position:absolute}
header, #title-bar{position:relative}

/* HEADER-SECTION */
header{
width:900px;height:290px;
background-image:var(--backgroung-header);
background-size:900px;
& button{
background:none;
width:100px;height:100px;
padding:5px 10px;
font:700 13px 'Rubik';
border:none;
top:60px;right:280px;
cursor:pointer}}

table.menu, td{
padding:5px;
border-right:var(--border-table);
border-bottom:none;border-left:none;
border-collapse:collapse;
&:last-of-type{border-right:none}
& a{color:inherit;text-decoration:none;&:hover{font-family:inherit}}}
table.menu{
width:100%;
background:var(--background-table);
text-align:center;
font-weight:800;
text-shadow:2px 1px 1px #FFF, 1px -2px 0 #FFF, -1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px 0px 0 #FFF, 0px 2px 0 #FFF, -2px 0px 0 #FFF, 0px -2px 0 #FFF;
text-transform:uppercase;
& td{cursor:pointer;&:hover{color:#FFA500}}
}

/* DAY-COUNTER */
#date{
color:var(--text-days);
font-weight:700;
letter-spacing:1px;
top:22px;right:147px
}
.i-love-you{
text-align:center;
color:#FFFFFF;
font:800 17px 'Rubik';
text-transform:uppercase;
letter-spacing:1px;
text-shadow:var(--border-text-days);
top:45px;right:130px
}

/* GENERAL-SECTION */
#spade-cafe{padding-bottom:15px;background-color:#FFFFFF;display:flex;justify-content:space-between}
#left{width:230px;padding:10px 0 0 20px}
#right{width:620px;padding:0 20px}

/* GENERAL-SECTION-TABLE */
#left table, #right table{
width:100%;margin-bottom:10px;
border:var(--table-border);
& td{background-color:var(--aside-color);border:var(--table-border);vertical-align:top}
& #button{width:inherit}}
.date{
background-image:var(--table-background);
color:#FFFFFF;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
text-shadow:var(--table-date-shadow)
}
.date.i{width:10%;font-size:13px}
#deuce-icon{
width:87px;height:87px;
margin-bottom:5px;
background-image:url('img_index/deuce-spade-icon.png');
background-size:87px;
border:1px solid #FFFFFF
}

/* CONTENT-SETTINGS */
#title-bar{
padding:3px 10px;margin:20px 0 10px 0;
background:var(--title-welcome);
color:#FFFFFF;
font-size:14px;font-weight:800;
text-transform:uppercase;
text-align:right;
letter-spacing:1px;
border:5px double #FFFFFF;
& #title{
font:800 25px 'Rubik';
font-style:italic;
text-shadow:var(--title-welcome-shadow);
position:absolute;
top:-15px;left:10px;
}
}
.sub-title{
margin:10px 0;padding:10px 0 5px 25px;
background:url('img_index/spade.png') no-repeat left center;
background-size:20px;
color:var(--text-color-aside);
font-size:18px;font-weight:600;
text-transform:uppercase;
border-bottom:1px dashed #808080
}
#left aside, #right aside{padding:20px;background-color:var(--aside-color);color:var(--text-color-aside)}
textarea{
width:85%;height:36px;
background-color:var(--title-welcome);
color:var(--text-color-aside);
font:10px 'Rubik'
}
.quote{margin:5px 0;padding:0 0 0 7px}
.quote.i{border-left:var(--quote-i)}
.quote.ii{border-left:var(--quote-ii)}

/* CREDITS-SECTION */
footer{
margin:auto;padding-top:20px;
background-color:var(--title-welcome);
text-align:center;
& a{font-weight:600;color:#4382A1;text-decoration:1px solid underline #4382A1} 
}
#lace{
width:100%;height:35px;
margin-top:15px;
background-image:url('img_index/divider-.png');
background-size:180px
}