body {
color: #e3e3e3 !important;
}
h1,
h2,
h3 {
text-wrap: balance;
}
h2,
h3 {
margin-bottom: clamp(20px, 4vw, 40px) !important;
}
h1 {
font-size: clamp(1.9rem, 5vw, 4rem) !important;
}
h2 {
font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
}
h3 {
font-size: clamp(1.3rem, 3vw, 2.5rem) !important;
}
.christmasTop {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/christmas24/xmas-trees-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 60px);
margin-bottom: 10vh;
position: relative;
& > img:nth-of-type(1) {
width: clamp(150px, 20vw, 238px);
}
h1 {
text-align: center;
max-width: 43ch;
margin: clamp(30px, 4vw, 60px) 0;
text-transform: uppercase;
}
& > img:nth-of-type(2) {
margin-bottom: -10vh;
}
.christmasPrevBtn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
position: absolute;
right: clamp(20px, 6vw, 100px);
top: 0;
padding: 10px 15px;
color: #d2d2d2;
text-decoration: none;
border: 1px solid #d2d2d2;
border-top: 0px;
border-radius: 0 0 5px 5px;
font-size: clamp(0.8rem, 1vw, 0.9rem);
&,
svg {
transition-duration: 0.1s;
}
svg {
width: 18px;
fill: #d2d2d2;
}
&:hover {
background-color: #d2d2d2;
color: #989898;
svg {
fill: #989898;
}
}
}
@media (min-width: 768px) {
& {
margin-bottom: 20vh;
& > img:nth-of-type(2) {
margin-bottom: -20vh;
}
}
}
}
section.details {
display: flex;
flex-direction: column;
padding: 20px;
background: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/christmas24/decorations.jpg);
background-color: #cd0318;
background-repeat: no-repeat;
background-size: contain;
.container {
max-width: 85ch;
&:first-of-type {
margin-top: clamp(100px, 20vw, 300px);
}
}
img {
margin: clamp(25px, 4vw, 50px) 0;
}
a {
border: 3px solid #fff;
padding: 29px;
border-radius: 20px;
display: block;
width: clamp(320px, 85vw, 360px);
margin: 50px auto;
font-size: 25px;
color: #fff;
text-decoration: none;
transition-duration: 0.1s;
&:hover,
&:active,
&:focus {
background-color: white;
color: #cd0318;
}
&:active {
transform: scale(0.95);
}
}
@media (min-width: 768px) {
& {
padding: 80px 100px 0 100px;
}
}
}