.container-fluid {
    display: grid;
    width: 100%;
}

.header {
    margin: 20px auto 20px auto;
    font-size: 50px;
    font-weight: bold;
    justify-content: center;
}

.main {
    justify-content: center;
}

.board {
    max-width: 500px;
    margin: 0 auto 0 auto;
}

.board_row {
    height: 38px;
}

.blink-bg{
    animation: blinkingBackground 2s infinite;
}

@keyframes blinkingBackground{
    0%		{ opacity: 100%;}
    25%		{ opacity: 50%;}
    50%		{ opacity: 100%;}
    75%		{ opacity: 50%;}
    100%	{ opacity: 100%;}
}

.buttons {
    margin: 40px auto 0px auto;
    width: 500px;
}

.active {
    height: 60px;
    border: 5px solid white;
    cursor: pointer;
}

.inactive {
    border: 5px solid white;
    pointer-events: none;
    height: 30px;
    cursor: default;
}

.p1_tag {
    font-size: 25px;
    margin-top: 420px;
    float: right;
    padding-right: 20px;
}

.p2_tag {
    font-size: 25px;
    padding-left: 20px;
}

#p1_score, #p2_score {
    background-color: cornflowerblue;
    border-radius: 10px;
    width: 60px;
    color: white;
    font-weight: bold;
    text-align: center;
    margin: 0 15px 0 15px;
}

.arrow1 {
    width: 15px;
    height: 15px;
    border: 2px solid black;
    border-left: 0;
    border-top: 0;
    margin-top: 13px;
    transform: rotate(315deg);
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: slide1;
}

@keyframes slide1 {
    from {margin-right: 10px;}
    50% {margin-right: 30px;}
    to {margin-right: 10px;}
}
@keyframes slide1less {
    from {margin-right: 0px;}
    50% {margin-right: 20px;}
    to {margin-right: 0px;}
}
@keyframes slide1evenless {
    from {margin-right: -5px;}
    50% {margin-right: 10px;}
    to {margin-right: -5px;}
}

.arrow2 {
    width: 15px;
    height: 15px;
    border: 2px solid black;
    border-left: 0;
    border-top: 0;
    margin-top: 9px;
    transform: rotate(135deg);
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: slide2;
}

@keyframes slide2 {
    from {margin-left: 10px;}
    50% {margin-left: 30px;}
    to {margin-left: 10px;}
}
@keyframes slide2less {
    from {margin-left: 0px;}
    50% {margin-left: 20px;}
    to {margin-left: 0px;}
}
@keyframes slide2evenless {
    from {margin-left: -5px;}
    50% {margin-left: 10px;}
    to {margin-left: -5px;}
}

.help {
    color: grey;
    border-radius: 50px;
    border: 1px solid grey;
    width: 50px;
    height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin-left: 30px;
    bottom: 0;
    position: fixed;
    margin-bottom: 20px;
}

.helptext {
    background-color: white;
    border-radius: 20px;
    border: 1px solid grey;
    width: 400px;
    display: none;
    z-index: 100;
    bottom: 0;
    position: fixed;
    margin-bottom: 90px;
    margin-left: 20px;
    font-size: 15px;
    padding: 15px;
}    

.winner {
    font-size: 40px;
    text-align: center;
}

.playagain{
    width: 180px;
    font-size: 25px;
    font-weight: bold;
    background-color: cornflowerblue;
    color: white;
    padding: 10px;
    border: 1px solid cornflowerblue;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.playagain:hover {
    transform: scale(1.1) perspective(1px)
}

@media all and (max-width: 1200px) {
    .board {margin-top: 20px; max-width: 400px;}
    .board_row {height: 30.4px;}
    .buttons {width: 450px;}
    .active {height: 54px; border: 4px solid white;}
    .inactive {border: 4px solid white; height: 27px;}
    .p1_tag {font-size: 20px; margin-top: 355px;}
    .p2_tag {font-size: 20px; margin-top: 20px;}
    .arrow1 {width: 13px; height: 13px; margin-top: 10px;}
    .arrow2 {width: 13px; height: 13px; margin-top: 7px;}
    .winner {font-size: 30px;} 
}

@media all and (max-width: 992px) {
    .board {width: 500px;}
    .board_row {height: 32px;}
    .buttons {padding-top: 40px; width: 500px;}
    .active {height: 60px; border: 4px solid white;}
    .inactive {border: 5px solid white; height: 30px;}
    .p1_tag {position: fixed; z-index: 100; right: 60%; margin-top: 425px;}
    .p2_tag {position: fixed; z-index: 100; left: 60%;}
    .arrow1 {width: 13px; height: 13px; margin-top: 10px;}
    .arrow2 {width: 13px; height: 13px; margin-top: 7px;}
}

@media all and (max-width: 700px) {
    .header {font-size: 40px;}
    .board {margin-top: 0px;}
    .buttons {padding-top: 40px; width: 450px;}
    .p1_tag {margin-top: 405px;} 
    .playagain {width: 160px; font-size: 20px; padding: 8px;}
}

@media all and (max-width: 600px) {
    .p1_tag {right: 55%; margin-top: 405px;}
    .p2_tag {left: 55%;}
}

@media all and (max-width: 500px) {
    .header {font-size: 35px;}
    .board {max-width: 390px;}
    .board_row {height: 29.64px;}
    .p1_tag {margin-top: 377px;}
    .arrow1 {animation-name: slide1less;}
    .arrow2 {animation-name: slide2less;}
    .buttons {width: 380px;}
    .active {height: 48px;}
    .winner, .playbtn {padding: 0;}
}

@media all and (max-width: 440px) {
    .header {font-size: 30px;}
    .container-fluid {width: 100vw;}
    .arrow1 {width: 8px; height: 8px; margin-top: 10px; animation-name: slide1evenless;}
    .arrow2 {width: 8px; height: 8px; margin-top: 7px; animation-name: slide2evenless;}
    .help, .helptext {margin-left: 10px;}
}