/* 

CSS TABLE OF CONTENTS 
1.0 - GENERAL STYLES
2.0 - MAIN
    2.1 - TITLE PAGE
    2.2 - MAIN BOARD
    2.3 - MODAL
3.0 - MEDIA QUERIES

*/

/* 1.0 - GENERAL STYLES */

html {
    font-family: 'Londrina Solid', 'Arial';
}

body {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}

button {
    font-family: 'Londrina Solid', 'Arial';
    font-size: 1em;
    background: white;
}

h1 {
    font-size: 7em;
}

h2 {
    font-size: 3em;
}

form > p {
    font-size: 2em;
}

label {
    font-size: 2em;
}

footer {
    position: fixed;
    width: 375px;
    margin: 10% auto;
    left: 0;
    right: 0;
    text-align: center;
}

/* 2.0 - MAIN */

.ghost {
    display: none;
}

/* 2.1 - TITLE PAGE */

.title-page {
    position: static;
    text-align: center;
    width: 650px;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid black;
    border-radius: 3em;
    padding-top: 2em;
    padding-bottom: 2em;
    background: #f3f3f3;
}

.difficulty-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#difficulty input[type="radio"] {
    opacity: 0.5;
    position: fixed;
    width: 0;
}

#difficulty input[type="radio"]:checked + label {
    background: rgb(0, 0, 0);
    color: rgb(241, 241, 241);
    border-color: rgb(0, 0, 0);
}

#difficulty label {
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid black;
    background: rgb(241, 241, 241);
    border-radius: 4px;
    margin: 5px;
}

#main-play {
    font-size: 3em;
    border-radius: 4px;
    box-shadow: 5px 5px;
}

#main-play:active {
    background:rgba(128, 128, 128, 1);
    color: white;
    box-shadow: 0px 0px;
    transform: translateY(4px);
    transform: translateX(4px);
}

#effect-sound-title {
    margin-top: 2em;
    font-size: 1.25em;
    border-radius: 4px;
}

#effect-sound-main {
    margin-top: 2em;
    font-size: 1.25em;
    border-radius: 4px;
}

.on {
    background: rgb(0, 0, 0);
    color:rgb(241, 241, 241);
}

.off {
    color: rgb(0, 0, 0);
    background:rgb(241, 241, 241);
}

/* 2.2 - MAIN BOARD */

.main-page {
    width: 750px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid black;
    border-radius: 3em;
    padding: 2em;
    background: #f3f3f3;
}

.header {
    font-size: 3.5em;
    text-align: center;
}

.board-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    border-top: 1px solid rgba(128, 128, 128,0.5);
    border-left: 1px solid rgba(128, 128, 128,0.5);
}

.square {
    border-bottom: 1px solid rgba(128, 128, 128,0.5);
    border-right: 1px solid rgba(128, 128, 128,0.5);
    width: 30px;
    height: 30px;
}

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#lock, #randomize {
    font-size: 1.5em;
}

#randomize {
    display: none;
}

.board-title {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 1em;
}

.instruction-container {
    display: flex;
}

.instructions {
    width: 100%;
    font-size: 1.2em;
    text-align: center;
}

.instructions > p {
    padding: 0.1em;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.ship {
    position: absolute;
    background: rgba(144, 238, 144, 0.7);
    border: 1px solid rgba(0, 0, 0, 1);
    z-index: 1;
}

.HA {
    width: 153px;
    height: 29px;
}

.HB {
    width: 122px;
    height: 29px;
}

.HC1, .HC2 {
    width: 91px;
    height: 29px;
}

.HD {
    width: 60px;
    height: 29px;
}

.VA {
    width: 29px;
    height: 153px;
}

.VB {
    width: 29px;
    height: 122px;
}

.VC1, .VC2 {
    width: 29px;
    height: 91px;
}

.VD {
    width: 29px;
    height: 60px;
}

@keyframes clicked-hit {
    0% {
        transform: scale(0);
        transition: all 450ms ease 0ms;
    }
    50% {
        transform: scale(1.2);
        background: #f55252;
        border-radius: 100%;
        transition: all 450ms cubic-bezier(1, 1, 0.0, 0.01) 0ms;
    }
}

@keyframes clicked-miss {
    0% {
        transform: scale(0);
        transition: all 450ms ease 0ms;
    }
    50% {
        transform: scale(1);
        background: #6595e2;
        border-radius: 70%;
        transition: all 450ms cubic-bezier(1, 1, 0.01, 0.01) 0ms;
    }
}

.hit-ship:before {
    position: relative;
    content: ' \25CF';
    font-size: 30px;
    color: #f96d6d;
    z-index: 100;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: clicked-hit;
    animation-duration: 0.5s;
}

.miss-ship:before {
    position: relative;
    content: ' \25CF';
    font-size: 30px;
    color: #8fb1e9;
    z-index: 100;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: clicked-miss;
    animation-duration: 0.5s;
}

.hit {
    width: 30px;
    height: 30px;
    animation-name: clicked-hit;
    animation-duration: 0.5s;
    background: #f96d6d;
}

.miss {
    width: 30px;
    height: 30px;
    animation-name: clicked-miss;
    animation-duration: 0.5s;
    background: #8fb1e9;
}

.not-turn {
    width: 311px;
    height: 359px;
    position: absolute;
    background: rgba(243, 243, 243, 0.5);
    z-index: 2;
}

.noClick {
    pointer-events: none;
}

#move {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.sfx-container {
    display: flex;
    justify-content: center;
}

/* 2.3 - MODAL */

.modal {
    position: fixed;
    z-index: 100;
    left: 30%;
    top: 30%;
    width: 40%;
    min-width: 200px;
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    border: 1px solid black;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    width: 40%;
    min-width: 200px;
    background: white;
    font-size: 1.25em;
    text-align: center;
}

#result-message {
    font-size: 2em;
    padding: 0.5em;
}

#play-again {
    font-size: 1.25em;
}

/* 3.0 - MEDIA QUERIES */

@media screen and (max-width: 768px) {
    body {
        width: 100%;
    }

    h1 {
        font-size: 15vw;
    }

    h2 {
        font-size: 10vw;
    }

    .title-page {
        position: static;
        text-align: center;
        width: 80%;
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
        border: 10px solid black;
        border-radius: 3em;
        padding-top: 2em;
        padding-bottom: 2em;
        background: #f3f3f3;
    }

    .board-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-page {
        width: 83%;
        margin-top: 0%;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid black;
    }

    #player-board, #computer-board {
        width: 310px;
    }

    .button-container {
        margin-top: 15px;
    }

    #randomize {
        display: block;
    }

    #before-lock {
        display: none;
    }

    .board-title {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .ship {
        pointer-events: none;
    }
    
    .modal {
        position: fixed;
        z-index: 100;
        left: 18%;
        top: 40%;
        width: 40%;
        min-width: 200px;
    }

}