117 lines
2.1 KiB
SCSS
117 lines
2.1 KiB
SCSS
#background {
|
|
height: 98%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
img {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
> div {
|
|
position: relative;
|
|
height: 80vh;
|
|
}
|
|
#bg-top {
|
|
/* #bg-1 {
|
|
top: 5vh;
|
|
left: 0;
|
|
} */
|
|
#bg-3 {
|
|
top: 13vh;
|
|
left: -10vw;
|
|
width: 20vw;
|
|
z-index: 1;
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
width: auto;
|
|
z-index: -1;
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop_large) {
|
|
width: 22vw;
|
|
}
|
|
}
|
|
#bg-2 {
|
|
top: 8vh;
|
|
left: -28vw;
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
transform: rotate(1deg);
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop_large) {
|
|
left: -5vw;
|
|
top: 9vh;
|
|
}
|
|
}
|
|
#bg-5 {
|
|
width: 20vw;
|
|
top: 5vh;
|
|
right: -10vw;
|
|
z-index: 1;
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
z-index: -1;
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop_large) {
|
|
width: 27vw;
|
|
}
|
|
}
|
|
/* #bg-4 {
|
|
top: 18vh;
|
|
right: -45vw;
|
|
} */
|
|
|
|
}
|
|
#bg-middle {
|
|
#bg-6 {
|
|
top: 5vh;
|
|
right: -5vw;
|
|
}
|
|
#bg-7 {
|
|
width: 85vw;
|
|
top: 10vh;
|
|
right: 0vw;
|
|
}
|
|
/* #bg-8 {
|
|
width: 80vw;
|
|
top: 45vh;
|
|
left: -40vw;
|
|
} */
|
|
#bg-12 {
|
|
width: 105vw;
|
|
left: -5vw;
|
|
top: 30vh;
|
|
}
|
|
}
|
|
#bg-bottom {
|
|
bottom: 0;
|
|
position: absolute;
|
|
#bg-11 {
|
|
left: 0;
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
left: 50vw;
|
|
bottom: 70vh;
|
|
}
|
|
}
|
|
#bg-10 {
|
|
width: 110vw;
|
|
left: 5vw;
|
|
bottom: 0;
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
left: 0;
|
|
bottom: 20vh;
|
|
}
|
|
}
|
|
#bg-4 {
|
|
transform: scaleX(-1);
|
|
left: -45vw;
|
|
bottom: 5vh;
|
|
@media screen and (min-width: $breakpoint_tablet) {
|
|
bottom: 150vhvh;
|
|
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
bottom: -8vh;
|
|
}
|
|
}
|
|
}
|
|
}
|