html{
scroll-behavior: smooth;
}
body{
font-family: 'Ranchers', cursive;
}
.book{
background: linear-gradient(
to left,
rgba(238, 196, 135, 0.5) 0%,
rgba(243, 207, 154, 0.5) 3%,
rgba(248, 216, 162, 0.5) 6%,
rgba(243, 207, 154, 0.5) 6%,
rgba(243, 207, 154, 0.5) 9%,
rgba(241, 202, 136, 0.5) 12%,
rgba(243, 207, 154, 0.5) 15%,
rgba(244, 208, 158, 0.5) 17%,
rgba(243, 207, 154, 0.5) 19%,
rgba(243, 207, 154, 0.5) 21%,
rgba(250, 221, 176, 0.5) 23%,
rgba(250, 221, 176, 0.5) 25%,
rgba(243, 207, 154, 0.5) 27%,
rgba(238, 200, 138, 0.5) 29%,
rgba(243, 207, 154, 0.5) 29%,
rgba(243, 207, 154, 0.5) 32%,
rgba(243, 207, 154, 0.5) 34%,
rgba(243, 207, 154, 0.5) 37%,
rgba(250, 221, 176, 0.5) 40%,
rgba(250, 221, 176, 0.5) 43%,
rgba(243, 207, 154, 0.5) 43%,
rgba(243, 207, 154, 0.5) 44%,
rgba(243, 207, 154, 0.5) 47%,
rgba(238, 200, 138, 0.5) 49%,
rgba(243, 207, 154, 0.5) 52%,
rgba(250, 221, 176, 0.5) 54%,
rgba(244, 208, 158, 0.5) 56%,
rgba(243, 207, 154, 0.5) 59%,
rgba(244, 208, 158, 0.5) 61%,
rgba(250, 221, 176, 0.5) 64%,
rgba(243, 207, 154, 0.5) 64%,
rgba(244, 208, 158, 0.5) 66%,
rgba(243, 207, 154, 0.5) 69%,
rgba(248, 216, 162, 0.5) 71%,
rgba(243, 207, 154, 0.5) 74%,
rgba(243, 207, 154, 0.5) 76%,
rgba(243, 207, 154, 0.5) 77%,
rgba(243, 207, 154, 0.5) 80%,
rgba(250, 221, 176, 0.5) 81%,
rgba(243, 207, 154, 0.5) 83%,
rgba(250, 221, 176, 0.5) 83%,
rgba(250, 221, 176, 0.5) 85%,
rgba(243, 207, 154, 0.5) 87%,
rgba(250, 221, 176, 0.5) 89%,
rgba(250, 221, 176, 0.5) 91%,
rgba(243, 207, 154, 0.5) 92%,
rgba(248, 216, 162, 0.5) 96%,
rgba(243, 207, 154, 0.5) 97%,
rgba(243, 207, 154, 0.5) 97%,
rgba(243, 207, 154, 0.5) 98%,
rgba(243, 207, 154, 0.5) 100%
),
linear-gradient(
to right,
rgba(238, 196, 135, 0.3) 0%,
rgba(243, 207, 154, 0.3) 3%,
rgba(248, 216, 162, 0.3) 6%,
rgba(243, 207, 154, 0.3) 6%,
rgba(243, 207, 154, 0.3) 9%,
rgba(241, 202, 136, 0.3) 12%,
rgba(243, 207, 154, 0.3) 15%,
rgba(244, 208, 158, 0.3) 17%,
rgba(243, 207, 154, 0.3) 19%,
rgba(243, 207, 154, 0.3) 21%,
rgba(250, 221, 176, 0.3) 23%,
rgba(250, 221, 176, 0.3) 25%,
rgba(243, 207, 154, 0.3) 27%,
rgba(238, 200, 138, 0.3) 29%,
rgba(243, 207, 154, 0.3) 29%,
rgba(243, 207, 154, 0.3) 32%,
rgba(243, 207, 154, 0.3) 34%,
rgba(243, 207, 154, 0.3) 37%,
rgba(250, 221, 176, 0.3) 40%,
rgba(250, 221, 176, 0.3) 43%,
rgba(243, 207, 154, 0.3) 43%,
rgba(243, 207, 154, 0.3) 44%,
rgba(243, 207, 154, 0.3) 47%,
rgba(238, 200, 138, 0.3) 49%,
rgba(243, 207, 154, 0.3) 52%,
rgba(250, 221, 176, 0.3) 54%,
rgba(244, 208, 158, 0.3) 56%,
rgba(243, 207, 154, 0.3) 59%,
rgba(244, 208, 158, 0.3) 61%,
rgba(250, 221, 176, 0.3) 64%,
rgba(243, 207, 154, 0.3) 64%,
rgba(244, 208, 158, 0.3) 66%,
rgba(243, 207, 154, 0.3) 69%,
rgba(248, 216, 162, 0.3) 71%,
rgba(243, 207, 154, 0.3) 74%,
rgba(243, 207, 154, 0.3) 76%,
rgba(243, 207, 154, 0.3) 77%,
rgba(243, 207, 154, 0.3) 80%,
rgba(250, 221, 176, 0.3) 81%,
rgba(243, 207, 154, 0.3) 83%,
rgba(250, 221, 176, 0.3) 83%,
rgba(250, 221, 176, 0.3) 85%,
rgba(243, 207, 154, 0.3) 87%,
rgba(250, 221, 176, 0.3) 89%,
rgba(250, 221, 176, 0.3) 91%,
rgba(243, 207, 154, 0.3) 92%,
rgba(248, 216, 162, 0.3) 96%,
rgba(243, 207, 154, 0.3) 97%,
rgba(243, 207, 154, 0.3) 97%,
rgba(243, 207, 154, 0.3) 98%,
rgba(243, 207, 154, 0.3) 100%
),
linear-gradient(
to left,
rgba(238, 196, 135, 0.3) 0%,
rgba(243, 207, 154, 0.3) 3%,
rgba(238, 200, 138, 0.3) 49%,
rgba(243, 207, 154, 0.3) 52%,
rgba(250, 221, 176, 0.3) 54%,
rgba(244, 208, 158, 0.3) 56%,
rgba(243, 207, 154, 0.2) 59%,
rgba(244, 208, 158, 0.3) 61%,
rgba(250, 221, 176, 0.3) 64%,
rgba(243, 207, 154, 0.3) 64%,
rgba(244, 208, 158, 0.3) 66%,
rgba(243, 207, 154, 0.3) 69%,
rgba(248, 216, 162, 0.3) 71%,
rgba(243, 207, 154, 0.3) 74%,
rgba(243, 207, 154, 0.3) 76%,
rgba(243, 207, 154, 0.3) 77%,
rgba(243, 207, 154, 0.3) 80%,
rgba(250, 221, 176, 0.3) 81%,
rgba(243, 207, 154, 0.3) 83%,
rgba(250, 221, 176, 0.3) 83%,
rgba(250, 221, 176, 0.3) 85%,
rgba(243, 207, 154, 0.3) 87%,
rgba(250, 221, 176, 0.3) 89%,
rgba(250, 221, 176, 0.3) 91%,
rgba(243, 207, 154, 0.3) 92%,
rgba(248, 216, 162, 0.3) 96%,
rgba(243, 207, 154, 0.3) 97%,
rgba(243, 207, 154, 0.3) 97%,
rgba(243, 207, 154, 0.3) 98%,
rgba(243, 207, 154, 0.3) 100%
);
background-color: rgba(33, 22, 0, 1);
background-size: 500px 20px, 300px 20px, 20px 820px;
background-position: 50% 50%, 70% 70%, 30% 30%;
}
.custombtn{
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 0 2px black;
border-radius: 2rem;
color: white;
padding: 1rem;
width: 75%;
text-align: center;
font-size: large;
box-shadow: 0px 4px 0.5rem 1px rgb(255 255 255 / 50%) inset;
filter: drop-shadow(2px 4px 6px rgba(0,0,0,.25));
margin: 1.5rem 0px;
cursor: pointer;
}
.custombtn:visited, .custombtn:active, .custombtn:hover {
text-decoration: none;
color: white;
}
.mainbanner{
background: linear-gradient(0deg, #171700 25%, transparent), url(banner.jpg);
background-position: center;
background-attachment: fixed;
padding:5rem 0px;
}
.footer {
background: #003c7e;
padding: .25rem 1rem;
color: white;
text-shadow: 0 0 2px black;
box-shadow: 0px 0px 1rem rgb(0 0 0 / 50%);
}
#code{
max-width: 10rem;
font-size: x-large;
text-align: center;
background: linear-gradient(180deg, #7b732b, #ddce46 10%, #7b732b 90%);
border: 1px solid #7b732b;
/* text-indent: 2px; */
letter-spacing: .5rem;
box-shadow: 0px 0px 0.5rem;
margin-top: .5rem;
display: inline-block;
}
.secondaryImg-container {
float: right; /* shape-outside only apply to float elements */
height: 100%; /* take all the height */
margin-left: .5rem;
padding-bottom: 2rem;
/* push the image to the bottom */
display: flex;
align-items: flex-end;
/**/
shape-outside: inset(calc(100% - 200px - 2rem) 0 0); /* make the text flow on the top free space*/
}
.redeemcode, .view {
padding:2rem;
background: radial-gradient(#f5f4e7, #bdbaa5);
box-shadow: 2rem 0px 2rem rgb(0 0 0 / 50%) inset;
position: relative;
font-family: 'Eagle Lake', cursive;
}