@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500&family=Pirata+One&display=swap');

* {
    margin: 0;
    padding: 0;
    border: none;
}

html {
    height: 100%;
    width: 100%;

}

body {
    width: 100%;
    height: 80%;
    background-image: url('../images/black-knight2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: "Barlow Semi Condensed", sans-serif;
    text-align: center;
    color: white;
}

/** Headings and Text **/

h1,
h2,
button {
    font-family: "Pirata One", sans-serif;
    letter-spacing: 2px;
    font-size: 300%;
}

h3 {
    font-family: "Pirata One", sans-serif;
    letter-spacing: 2px;
}

p {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 40%;
}

/** Content in Phone **/

/** Phone Slides Styling  **/

.phone-screen-change {
    width: 95vw;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}


.section-slides {
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overflow-x: auto;
    height: 1000px;
}

.section-slides>div {
    position: relative;
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 95vw;
    max-width: 500px;
    height: 100vh;
    max-height: 600px;
    border-radius: 10px;
}

.section-slides::-webkit-scrollbar {
    height: 0;
}

/** Phone Div **/

#phone {
    background-color: black;
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
    width: 95vw;
    max-width: 500px;
    height: 100vh;
    max-height: 600px;
    border-radius: 10px;
    margin-top: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    overflow: hidden
}

/** Landing Page **/

/** Heading in Phone div **/

.logo {
    font-size: 280%;
}

/** Images of knights in Landing page **/

.all-knights {
    height: 150px;
    display: flex;
    width: 90%;
    margin: 0 auto;
}

.knight {
    width: 20%;
    margin-top: 30px;
}

.knight-img {
    width: 90%;
    height: 70%;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

/** Buttons and Name Input on Landing page **/

.button-spacing {
    margin: 20px;
    font-size: 150%;
    padding: 10px 50px 10px 50px;
    text-align: center;
    background-color: darkgreen;
    color: #fafafa;
    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);
}

.button-spacing:hover {
    background-color: #fafafa;
    color: black;
}

#name {
    background: transparent;
    color: white;
    width: 50%;
    height: 25px;
    margin-bottom: 10px;
    border: 2px solid green;
    border-radius: 10px;
    text-align: center;
    font-family: "Pirata One", sans-serif;
    font-size: 100%;
    letter-spacing: 2px;
}

#name:hover {
    border: 2px solid white;
}

/** Footer on Landing page**/

footer {
    text-align: center;

}

footer li {
    display: inline;
    font-size: 1.5em;
}

footer a {
    color: white;
    margin: 20px;
}

footer ul {
    margin-top: 25px;
}

footer a:hover {
    background-color: black;
    color: green;
}

/** Game Page **/

/** Game Buttons in Game Page **/

#game-btns {
    height: 30px;
}

.gme-btn-style {
    margin: 2px;
    font-size: 100%;
    padding: 4px 25px 4px 25px;
    text-align: center;
    background-color: darkgreen;
    color: #fafafa;
    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);
}

.gme-btn-style:hover {
    background-color: #fafafa;
    color: black;
}

/** Player Names in Game Page **/

#players {
    height: 50px;

}

#player {
    float: left;
    Margin-top: 10px;
    margin-left: 7.5%;
    font-size: 180%;
    width: 33%
}

#opponent {
    float: right;
    Margin-top: 10px;
    margin-right: 6.5%;
    font-size: 180%;
    width: 33%;

}

/** Game Zone before Ingame **/

#game-left {
    font-size: 400%;
    padding-left: 35px;
    float: left;
    width: 35%;
    height: 250px;
}

#game-right {
    font-size: 400%;
    padding-right: 35px;
    float: right;
    width: 35%;
    height: 250px;
}

#vs {
    margin: 0 auto;
    font-size: 400%;
    width: 10%;
    margin-top: 70px;
}

#result {
    margin-top: 100px;
    font-size: 30%;

}

/** Game Zone Ingame Content **/

#all-knights-ingame {
    height: 120px;
    margin-right: 200px;
}

.knight-img-ingame {
    width: 500%;
    height: 140%;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;

}

#text-center-ingame {
    margin-left: 140%;
    letter-spacing: 1px;
    text-transform: capitalize;
}

/** Game Zone Score Area **/

#score-area {
    padding: 5px;
    height: 40px;

}

#your-score {
    font-size: 150%;
    margin-top: 10px;
    float: left;
    width: 20%;
    margin-left: 65px;

}

#opp-score {
    float: right;
    width: 20%;
    margin-right: 65px;
    margin-top: 10px;
    font-size: 150%;

}

#score-center {
    text-align: center;
    width: 20%;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 350%;
    letter-spacing: 2px;
}

hr {
    height: 2px;
    background-color: white;

    width: 80%;
    margin: auto;
    margin-top: 5px;
}

/** Game Zone Knight Choice Area **/

#knight-choice {
    margin-top: 15px;
    font-size: 150%;
    height: 10px;
    letter-spacing: 3px;

}

#all-knights-game {
    height: 150px;
    display: flex;
    margin-top: 20px;
    width: 90%;
    margin-left: 5%;

}

.knight-game {
    width: 20%;
    margin-top: 10px;

}

.knight-gme-img {
    width: 90%;
    height: 60%;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

.knight-gme-img:hover {
    border-color: green;
}

/** About Game Page **/

#about-page {
    margin: 15px;
}

#about-head {
    height: 60px;
}

.about-content {
    height: 120px;
    font-size: 300%;
    margin-left: 12px;
    margin-right: 17px;
}

#blk-knight-about {
    width: 70%;
    height: 150px;
    margin: 10px;
    border-radius: 5%;
}

/** How to Play Page **/

#how2plytext {
    font-size: 270%;
    margin: 18px;
    height: 200px;
}

.how2plyknght {
    font-size: 100%;
}

#how2plyhead {
    height: 50px;
    font-size: 190%;
}

.how-knight {
    width: 20%;
}

.how-knight-img {
    width: 90%;
    height: 55%;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin-top: 5px;
}

.button-spacing-how {
    margin: 20px;
    font-size: 150%;
    padding: 10px 50px 10px 50px;
    text-align: center;
    background-color: darkgreen;
    color: #fafafa;
    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);
}

.button-spacing-how:hover {
    background-color: #fafafa;
    color: black;
}

/** Rules Page **/

.rulediv {
    height: 65px;
}

.left-rule-img {
    float: left;
    width: 20%;
    margin-left: 20px;
}

.right-rule-img {
    float: right;
    width: 20%;
    margin-right: 20px;
}

.center-rule {
    Margin: 0 auto;
    display: flex;
}

.left-rule {
    width: 33%;
    margin-top: 20px;
    font-size: 300%;
    text-align: left;
}

.right-rule {
    width: 33%;
    margin-top: 20px;
    font-size: 300%;
    text-align: right;
}

.beats-rule {
    width: 33%;
    margin-top: 24px;
    font-size: 200%;
}

.knight-img-rule {
    width: 60%;
    height: 50px;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin-bottom: 7px;
}

.rule-line {
    height: 1px;
    background-color: white;
    width: 60%;
    margin: auto;
}

#rule-bk {
    margin-bottom: 50px;
}

/** GIF Results **/

#gif-win {
    height: 1000px;
}

#gif-loose {
    height: 1000px;
}

.gif-div {
    width: 80%;
}

/** Rules on Game and How to Play Page **/

#game-rules {
    height: 1200px;
}

#game-rules2 {
    height: 1200px;
}

.rulediv-gme {
    height: 5px;
}

.knight-img-rule-gme {
    width: 50%;
    height: 40px;
    padding: 1px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    margin-bottom: 4px;
}

.gme-rule-btn-style {
    margin: 10px;
    font-size: 150%;
    padding: 4px 25px 4px 25px;
    text-align: center;
    background-color: darkgreen;
    color: #fafafa;
    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);
}

.rule-btn-div {
    height: 40px;
}

.gme-rule-btn-style:hover {
    background-color: #fafafa;
    color: black;
}

/** Media Queries **/

/** Landing Page **/

@media screen and (max-width:749px) {

    body {

        background-color: black;
        background-image: none;
    }

    #phone {

        border-color: black;
    }
}

@media screen and (max-width:449px) {

    .all-knights {
        height: 120px;
    }

    .knight {
        margin-top: 10px;
    }
}

@media screen and (max-width:399px) {

    .all-knights {
        height: 100px;
    }
}

@media screen and (max-width:349px) {

    .knight-img {
        width: 80%;
        height: 60%;
    }

    #logo {
        font-size: 255%;
    }
}

/** About the Game **/

@media screen and (max-width:521px) {

    .about-content {
        height: 100px;
        font-size: 250%;
    }
}

@media screen and (max-width:441px) {

    .about-content {
        font-size: 230%;
    }
}

@media screen and (max-width:347px) {

    .about-content {
        font-size: 210%;
    }
}

/** How to Play Page **/

@media screen and (max-width:501px) {
    #how2plytext {
        font-size: 240%;
        height: 180px;
    }
}

@media screen and (max-width:448px) {

    #how2plyhead {
        font-size: 150%;
    }

    #how2plytext {
        font-size: 220%;
        height: 180px;
    }
}

@media screen and (max-width:410px) {

    .how-knight-img {
        width: 80%;
        height: 50%;
    }

    .button-spacing-how {
        font-size: 100%;
    }
}

@media screen and (max-width:381px) {
    #how2plytext {
        font-size: 195%;
    }
}

@media screen and (max-width:379px) {

    .button-spacing-how {
        margin: 2px;
        font-size: 80%;
        padding: 10px 45px 10px 45px;
    }

    .how2plyknght {
        font-size: 85%;
    }
}

/** Game Page **/
@media screen and (max-width:500px) {
    #game-left {
        height: 200px;
    }

    #game-right {
        height: 200px;
    }

    #all-knights-ingame {
        height: 110px;
    }

    #result {
        margin-top: 90px;
        font-size: 25%;
    }
}

@media screen and (max-width:467px) {
    #opponent {
        font-size: 160%;
    }

    #player {
        font-size: 160%;
    }

    .player-quote {
        font-size: 30%;
    }

    .opp-quote {
        font-size: 30%;
    }

    .knight-gme-img {
        width: 75%;
        height: 50%;
    }
}

@media screen and (max-width:424px) {
    #opponent {
        font-size: 140%;
    }

    #player {
        font-size: 140%;
        margin-left: 10.5%;
    }

    #game-right {
        height: 170px;
    }

    #game-left {
        height: 170px;
    }

    #vs {

        font-size: 350%;
        width: 8%;
        margin-top: 50px;
    }

    .knight-gme-img {
        height: 40%;
    }

    #all-knights-ingame {
        height: 80px;
        width: 19%;
    }

    #text-center-ingame {
        margin-left: 141%;
        font-size: 25%;
    }

    #result {
        margin-top: 70px;
        font-size: 25%;
    }
}

@media screen and (max-width:380px) {
    #opponent {
        font-size: 100%;
    }

    #player {
        font-size: 100%;
    }

    #players {
        height: 40px;
    }

    #game-left {
        height: 150px;
    }

    #game-right {
        height: 150px;
    }
}

@media screen and (max-width:351px) {
    #vs {
        font-size: 250%;

        margin-top: 40px;
    }

    #score-center {
        font-size: 270%;

    }

    #your-score {
        font-size: 120%;
        margin-left: 55px;
    }

    #opp-score {
        font-size: 120%;
        margin-right: 55px;
    }

    .knight-gme-img {
        height: 35%;
    }

    .knight-img-ingame {
        height: 170%;
    }

    #all-knights-ingame {
        height: 50px;
    }

    #result {
        margin-top: 60px;
        font-size: 30%;
    }
}


@media screen and (max-width:351px) {
    #result {
        margin-top: 60px;
        font-size: 24%;
    }
}

/** Rule list **/

@media screen and (max-width:460px) {
    .right-rule {
        font-size: 200%;
    }

    .left-rule {
        font-size: 200%;
    }
}


@media screen and (max-width:460px) {
    .beats-rule {
        font-size: 180%;
        margin-top: 21px;
    }

    .right-rule {
        font-size: 180%;
    }

    .left-rule {
        font-size: 180%;
    }
}

@media screen and (max-width:400px) {
    .knight-img-rule-gme {
        height: 35px;
    }
}