/* css document for Advent Calendar project */

/*
$ChristmasRed = '#e63b10';
$ChristmasGreen = '#56b887';
*/


/* index and day */
body {
	background-color:#56B887;
}

#Background {
    background-color:#56B887;
}

/* Index */
#container{
    margin: 2%;
}

#DayLink{
    text-align: center;
/*    border-style: solid;    */
}

#DayLink img{
    border-radius: 15px 15px 15px 15px;
    width: 92%;
    text-align: center;
}

#indexHeading{
    text-align: center;
    background-color: #ADCBBC;
    font-family: cursive;
    color: #e63b10;
    font-size: 8vw;
}

center a {
	text-decoration:none;
	color:black;
}
center a:hover {
	text-decoration:underline;
	color:blue;
}

.push {
	height: 4em;     /*Creates space between bottom of page to the bottom of content before the footer*/
}


/* Day */
#Wrapper {
    position: relative; /* Establish a positioning context */
    top:2%;
    width: 98%; /* Adjust as needed */
    margin: 0 auto; /* Center the wrapper */
    display: flex;
    justify-content: center;
}

#Tree {
    width: 100%; /* Ensure the image scales responsively */
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#Heading {
    position: absolute; /* Overlay at the top of the image */
    top: 0%; /* Adjust spacing from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment */
    font-size: 5vw;
    font-family: cursive;
    color: #e63b10;
    text-align: center;
    /*background-color: rgba(255, 255, 255, 0.5); /* Optional semi-transparent background */
    padding: 5px 10px; /* Padding for readability */
    border-radius: 10px;
    width:80%;
}

#Note {
    position: absolute; /* Overlay at the bottom of the image */
    /* bottom: 1%; /* Adjust spacing from the bottom */
    /* left: 50%; /* Center horizontally */
    transform: translateX(-5%); /* Center alignment */
    font-size: 3.5vw;
    font-family: cursive;
    color: #e63b10;
    text-align: center;
    /*background-color: rgba(255, 255, 255, 0.5); /* Optional semi-transparent background */
    padding: 5px 10px; /* Padding for readability */
    border-radius: 10px;
    width: 60%;
    height: 15%;
    left: 15%;
    bottom: 0%;
}

#myElement{
    width: 100%;
    height: 100%;
}

#myElement span{
    font-family: cursive;
}

#myElement2{
    width: 90%;
    height: 100%;
}
#myElement2 span{
    font-family: cursive;
}