/* IMPORT FOR FONTS AND ANIMATIONS
GENERAL SETTTING AND DEFAULT BROWSER SETTINGS RESET */

* {margin: 0; padding: 0; font-family: 'Ubuntu Condensed', sans-serif;}

html {
    max-width: 1280px;
    margin: 0 auto;
}

body {
    background-color: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body.mayhem {animation: thundermayhem 200ms ease 3;}
@keyframes thundermayhem{50%{background-color:whitesmoke; opacity: 0.8;}}

main {position: relative;}

p {
    color: whitesmoke;
    font-size: 6vh;
}

a {
    text-decoration: none;
    color: #fa541c;
}

#mainMenu {
    text-align: center;
    
    & div:first-child {margin-top: -25vh;}
    & div:first-child p {padding: 2vh;}
}

#accordeon {
    position: fixed;
    top: 55vh;
    left: 10vw;
    width: 80vw;
    overflow: hidden;

    > label > span {color: whitesmoke; font-size: 2rem; padding: 5px 10px; display: block; cursor: pointer; text-align: center;}
    > label > div {display: grid; grid-template-rows: 0fr; transition: all ease 300ms; overflow: hidden; padding: 0px;}
    > label > div > p {color: #ffe58f; overflow: hidden; font-size: 1rem;text-align: center;}
    > label input[type=radio] {display: none}
    > label input[type=radio]:checked + div {grid-template-rows: 1fr;}
}

#gameArea {
    border-left: 3px dashed #f5222d;
    border-right: 3px dashed #52c41a;
    height: 90vh;
    width: 90vw;
    margin: 2vh auto;
    position: relative;
    overflow: hidden;
}

#dialogBox {
    border: 2px solid lightgray;
    border-radius: 2vh;
    box-shadow: 0 0 1vh darkgray;
    cursor: pointer;
    text-align: center;
    padding: 2vh 2vw;

    & p {font-size: 2rem; padding-bottom: 0.5rem;}
    & :first-child {padding-bottom: 1rem; color: #faad14; font-weight: bold;}
}

#gamelaunch {
    cursor: pointer;
    color:#fa541c;
    font-size: 2.5rem;
    font-weight: bold;
    animation: pulse 2s ease infinite;
}
@keyframes pulse{50%{opacity: 0.2;}}

#title {
    font-size: min(150px, 10vw);
    font-weight: bold;
}

.explosive {
    display: inline-block;
    transition: transform 1s ease, color 5s ease, text-shadow 1s ease;
}

/* explosive title transition */
#title:hover > .explosive {transition-duration: 800ms; text-shadow: #8c8c8c 5px 5px 10px;}

#title:hover > .explosive:nth-child(1) {transform: translate(-130%, 60%) rotate(10deg); color: #cf1322;}
#title:hover > .explosive:nth-child(2) {transform: translate(-120%, -60%) rotate(-30deg); color: #d46b08;}
#title:hover > .explosive:nth-child(3) {transform: translate(-70%, -30%) rotate(10deg); color: #ffe58f;}
#title:hover > .explosive:nth-child(4) {transform: translate(-20%, 30%) rotate(50deg); color: #a0d911;}
#title:hover > .explosive:nth-child(5) {transform: translate(-10%, -70%) rotate(-100deg); color: #2f54eb;}
#title:hover > .explosive:nth-child(6) {transform: translate(-10%, 20%) rotate(45deg); color: #9e1068;}
#title:hover > .explosive:nth-child(7) {transform: translate(-5%, 5%) rotate(-5deg); color: #eb2f96;}
#title:hover > .explosive:nth-child(8) {transform: translate(0%, -5%) rotate(-5deg); color: #ffadd2;}
/* 9th child is the space character between the two words! */
#title:hover > .explosive:nth-child(10) {transform: translate(-10%, -100%) rotate(-530deg); color: #fadb14;}
#title:hover > .explosive:nth-child(11) {transform: translate(10%, -60%) rotate(420deg); color: #fffb8f;}
#title:hover > .explosive:nth-child(12) {transform: translate(20%, 30%) rotate(-20deg); color:#722ed1;}
#title:hover > .explosive:nth-child(13) {transform: translate(45%, -30%) rotate(40deg); color: #85a5ff;}
#title:hover > .explosive:nth-child(14) {transform: translate(75%, 40%) rotate(-80deg); color: #5cdbd3;}
#title:hover > .explosive:nth-child(15) {transform: translate(120%, 20%) rotate(-375deg); color: #ad2102}


/* For mobile devices! This prevent browser from intercepting touch gestures */
.screenLock {touch-action: none;}

.appear {display: block !important;}

.hidden {display: none !important;}

.fade-in {animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

.fade-out {animation: fade-out 2s ease-out 2s both;}
@keyframes fade-out{0%{opacity:1}100%{opacity:0}}

.paddle {
    border-radius: 0.2rem;
    box-shadow: 0 0 0.5vh white, inset 0 0 0.5vh lightgray;
    position: absolute;
}

.paddle.left {background-color: #f5222d;}
.paddle.right {background-color: #52c41a;}

.ball {
    border-radius: 1vw;
    box-shadow: inset 0 0 1vh #fadb14;
    position: absolute;
    pointer-events: none;
    aspect-ratio: 1;
    transition: width 500ms ease, border-radius 500ms ease;
}

.ball.left {background-color: #f5222d;}
.ball.right {background-color: #52c41a;}

.ball.invisiBall {background-color: whitesmoke; opacity: 0.05;}

.box {
    border: #000000 solid 1px;
    border-radius: 0.5vw;
    box-shadow: inset 0 0 1vh #fafafa;
    position: absolute;
    pointer-events: none;
}

.wall {background-color: #595959;}
.wallToExplode {border: none; box-shadow: none; text-align: center;}

.candy {pointer-events: none; position: absolute;}

.candy.left{
    color: #f5222d;
    animation: fly-left 4s ease both, fade-out 2s ease-out 2s both;}
@keyframes fly-left{100%{transform: translate(-200%, -160%);}}

.candy.right{
    color: #52c41a;
    animation: fly-right 4s ease both, fade-out 2s ease-out 2s both;}
@keyframes fly-right{100%{transform: translate(180%, -140%);}}

.scoreCard {
    color: whitesmoke;
    font-size: max(1rem, 4vh);
    position: absolute;
}

.scoreCard.left {top: 1vh; left: 6vw; & i {color: #f5222d;}}
.scoreCard.right {top: 1vh; right: 6vw; & i {color: #52c41a;}}

@media only screen and (max-height: 450px) {
    .scoreCard.left {top: 15%; left: -10%; transform: rotate(90deg)}
    .scoreCard.right {top: 80%; right: -10%; transform: rotate(-90deg)}
}