p {
    width: 870px;
}
#bg-box1 {
    width: 10000px;
    height: 10000px;
    background-color: #ffc600;
    transform: translate(calc(-50% + 6650px), -3400px) rotate(330deg);
}
#bg-box2 {
    transform: translate(calc(-50% - 6190px), -1910px);
}
#bg-box3 {
    width: 10000px;
    height: 10000px;
    background-color: #ffc600;
    transform: translate(calc(-50% - 6511px), -8000px) rotate(80deg)
}
#bg-box4 {
    transform: translate(calc(-50% + 2753px), -4950px);
}
#bg-box5 {
    display: none;
    transform: translate(calc(-50% - 5980px), -1348px);
}
#bg-box6 {
    display: none;
    transform: translate(calc(-50% + 2263px), -4820px);
}
#bg-box7 {
    display: none;
    transform: translate(calc(-50% - 5920px), -1775px);
}
#bg-box8 {
    display: none;
    transform: translate(calc(-50% + 2250px), -4398px);
}
#bg-box9 {
    display: none;
    transform: translate(calc(-50% - 5940px), -1825px);
}
#bg-box10 {
    display: none;
    background-color: #56a9e9;
    width: 10000px;
    height: 240px;
    transform: translate(calc(-50% + 0px), -120px);
}
#bg-box11 {
    display: none;
    transform: translate(calc(-50% + 2163px), -4797px);
}
main {
    position:relative;
    gap: 70px;
}
article.second {
    display: flex;
    flex-direction: row;
    gap: 110px
}
#party {
    margin: 90px 0px 0px 0px;
    box-shadow: 5px 5px #00000080;
}
.second .left-text {
    flex-direction: column;
}
.second .left-text p {
    margin: 20px 0px 0px 0px;
}
#paper {
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% - 210px), 410px) rotate(38deg);
}
#scissors {
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% - 680px), 590px) rotate(327deg);
}
#rock {
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% - 297px), 690px);
}
#paper img, #scissors img, #rock img {
    position: relative;
    animation: up-down 2s ease-in-out infinite alternate;
}
@keyframes up-down {
    0% { transform: translate(0px, 0px) rotate(10deg); }
    100% { transform: translate(0px, 15px) rotate(-10deg); }
}
#paper img {
    width: 90px;
    height: auto;
    animation-delay: -0.3s;
    animation-duration: 1.7s;
}
#rock img {
    width: 123px;
    height: auto;
    animation-delay: -0.6s;
    animation-duration: 1.6s;
}
#scissors img {
    width: 104px;
    height: auto;
}
.spacing.first {
    height: 0px;
}
.spacing.third {
    height: 70px;
}
.left {
    text-align: left;
}
#roshambash-logo-lines {
    transform: translate(calc(-50% - 0px), -116px);
}
.sixth p {
    padding: 80px 0px 80px 0px;
}
#king {
    width: 153px;
    height: auto;
}
#warrior {
    width: 153px;
    height: auto;
}
#champion {
    width: 153px;
    height: auto;
}
#jester {
    width: 163px;
    height: auto;
}
#wizard {
    width: 228px;
    height: auto;
}
#assassin {
    width: 154px;
    height: auto;
}
.seventh {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 65px;
}
.seventh > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 65px;
}
.seventh > div > div {
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 185px;
    gap: 30px;
}
.seventh > div .box-highlight-blue {
    text-shadow: var(--shadow-offset-x) var(--shadow-offset-x) #000000;
}
.seventh > div span {
    padding: 0px 10px 0px 10px;
}
.seventh > div > img {
    filter: drop-shadow(0px 5px #00000080);
}
.ninth p {
    padding: 0px 0px 0px 20px;
}
.fourteenth {
    color: #000000;
    margin: 0px 0px 140px 0px;
}
.fourteenth > .bg > img.second {
    left: 0%;
    transform: translate(470px, -26px);
}
.sixteenth p {
    margin: 100px 0px 60px 0px;
}
#header-heart {
    width: 106px;
    height: auto;
    position: absolute;
    left:100%;
    transform: translate(-1040px, -200px);
}
#queen-of-pain {
    position:absolute;
    right:0%;
    width: 430px;
    transform: translate(-650px, -250px) rotate(0deg);
}
#queen-of-pain > * {
    filter: drop-shadow(0px 5px #00000080);
}
#queen-of-pain img:nth-child(1) {
    transform: translate(0px, 0px) rotate(340deg);
}
#queen-of-pain img:nth-child(2) {
    transform: translate(-104px, -306px) rotate(354deg);
    animation: heart1 2s ease-in-out infinite alternate;
    animation-delay: -0.5s;
}
@keyframes heart1 {
    0% { transform: translate(-104px, -306px) rotate(354deg) scale(1); }
    100% { transform: translate(-104px, -306px) rotate(354deg) scale(1.3); }
}
#queen-of-pain img:nth-child(3) {
    transform: translate(-120px, -230px) rotate(12deg);
    animation: heart2 1.3s ease-in-out infinite alternate;
    animation-delay: -0.8s;
}
@keyframes heart2 {
    0% { transform: translate(-120px, -230px) rotate(12deg) scale(1); }
    100% { transform: translate(-120px, -230px) rotate(12deg) scale(1.3); }
}
#red-squig-007::before {
    background-image: url("images/red_line_007.svg");
}
#red-squig-008::before {
    background-image: url("images/red_line_008.svg");
}
#yellow-squig-005::before {
    background-image: url("images/yellow_line_005.svg");
}
#red-squig-009::before {
    background-image: url("images/red_line_009.svg");
}
#yellow-squig-006::before {
    background-image: url("images/yellow_line_006.svg");
}
#red-squig-010::before {
    background-image: url("images/red_line_010.svg");
}
#red-squig-011::before {
    background-image: url("images/red_line_011.svg");
}
@media (max-width : 1746px) {
    p {
        width: 100%;
    }
    main {
        max-width: 600px;
        gap: 40px;
    }
    #bg-box1 {
        transform: translate(calc(-50% + 0px), -9370px) rotate(90deg);
    }
    #bg-box2 {
        display: none;
    }
    #bg-box4 {
        transform: translate(calc(-50% + 2283px), -4927px);
    }
    #bg-box5 {
        display: block;
    }
    #bg-box6 {
        display: block;
    }
    #bg-box7 {
        display: block;
    }
    #bg-box8 {
        display: block;
    }
    #bg-box9 {
        display: block;
    }
    article.second {
        flex-direction: column-reverse;
        align-items: center;
        gap: 50px;
    }
    #party {
        margin: 0;
        width: 500px;
        height: 500px;
    }
    article.second .left-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    article.second .left-text p {
        margin: 50px 0px 0px 0px;
    }
    #paper {
        transform: translate(calc(-50% + 290px), 330px) rotate(28deg);
    }
    #scissors {
        transform: translate(calc(-50% + 170px), 180px) rotate(32deg);
    }
    #rock {
        transform: translate(calc(-50% + 323px), 150px) rotate(346deg);
    }
    #paper img {
        width: 53px;
    }
    #rock img {
        width: 73px;
    }
    #scissors img {
        width: 62px;
    }
    #roshambash-logo-lines {
        width: 835px;
        transform: translate(calc(-50% - 0px), -50px);
    }
    .middle-text.second > img {
        width: 238px;
        height: 212px;
        margin-top: 30px;
    }
    .seventh {
        gap: 17px;
    }
    .seventh > div {
        gap: 17px;
    }
    .seventh > div > div {
        height: 240px;
        width: 150px;
    }
    #king {
        width: 110px;
    }
    #warrior {
        width: 110px;
    }
    #champion {
        width: 110px;
    }
    #jester {
        width: 117px;
    }
    #wizard {
        width: 164px;
    }
    #assassin {
        width: 111px;
    }
    #header-heart {
        width: 85px;
        transform: translate(-150px, 160px);
    }
    .fourteenth {
        margin: 0px 0px 50px 0px;
    }
    .right-text p {
        margin: auto;
    }
    #queen-of-pain {
        transform: translate(-450px, -20px) rotate(0deg) scale(0.68);
    }
}
@media (max-width: 1170px) {
    #queen-of-pain {
        transform: translate(-231px, 81px) rotate(0deg) scale(0.68)
    }
}
@media (max-width: 1000px) {
    .seventh {
        flex-direction: column;
    }
    .seventh > div > div {
        width: 150px;
    }
}
@media (max-width: 740px) {
    #rock {
        transform: translate(calc(-50% + 186px), 294px) rotate(346deg)
    }
}
@media (max-width: 660px) {
    h2 {
        font-size: 2.5em;
    }
    main {
        gap: 20px;
    }
    #bg-box1 {
        transform: translate(calc(-50% + 0px), -9605px) rotate(90deg);
    }
    #bg-box5 {
        display: none;
    }
    #bg-box6 {
        display: none;
    }
    #bg-box7 {
        transform: translate(calc(-50% - 5805px), -1875px);
    }
    #bg-box8 {
        transform: translate(calc(-50% + 2161px), -4814px);
    }
    #bg-box9 {
        transform: translate(calc(-50% - 5808px), -1864px);
    }
    #bg-box10 {
        display: block;
    }
    #bg-box11 {
        display: block;
    }
    #party {
        width: 300px;
        height: 300px;
    }
    .second {
        padding-top: 20px;
    }
    .second h1 {
        font-size: 55px;
        padding: 10px 23px 10px 23px
    }
    article.second .left-text p {
        margin: 25px 0px 0px 0px;
    }
    #paper {
        transform: translate(calc(-50% + 130px), 258px) rotate(28deg);
    }
    #paper img {
        width: 39px;
    }
    #scissors {
        transform: translate(calc(-50% + 112px), 185px) rotate(32deg);
    }
    #scissors img {
        width: 39px;
    }
    #rock {
        transform: translate(calc(-50% + 154px), 121px) rotate(346deg);
    }
    #rock img {
        width: 39px;
    }
    .spacing.third {
        height: 50px;
    }
    article.sixth > img {
        width: 149px;
    }
    #roshambash-logo-lines {
        width: 460px;
        transform: translate(calc(-50% - 0px), -10px);
    }
    .sixth {
        padding-top: 30px;
    }
    .sixth p {
        padding: 30px 0px 30px 0px;
    }
    .seventh {
        padding-bottom: 35px;
        gap: 37px;
    }
    .seventh > div > div {
        font-size: 15px;
        width: 70px;
        height: 110px;
        gap: 6px;
    }
    .seventh > div span {
        padding: 0px 5px 0px 5px;
    }
    #king {
        width: 63px;
    }
    #warrior {
        width: 63px;
    }
    #champion {
        width: 63px;
    }
    #jester {
        width: 67px;
    }
    #wizard {
        width: 94px;
    }
    #assassin {
        width: 64px;
    }
    .eighth > img {
        width: 187px;
    }
    .left-header > div > h2 {
        line-height: normal;
    }
    .right-header > div > h2 {
        line-height: normal;
    }
    .twelvth > img {
        width: 187px;
    }
    #header-heart {
        display: none;
    }
    .fourteenth {
        margin: 0px 0px 20px 0px;
    }
    #queen-of-pain {
        transform: translate(-47px, 12px) rotate(0deg) scale(0.38)
    }
    .sixteenth p {
        margin: 70px 0px 30px 0px;
    }
    .sixteenth img {
        width: 190px;
    }
    .seventeenth {
        height: 100px;
    }
}