/*RESET*/

body {
    padding: 0;
    margin: 0;
    background-color: #222;
    font-family: Helvetica, Arial, sans-serif;
}

a {
    text-decoration: none;
    color: white;
}
/*CODE*/
#topbar {
    background-color: black;
    width: 100%;
    Height: 30px;
    -position: fixed;
}
#topbar-tt {
    color: orange;
    height: auto;
    width: 80px;
    font-weight: bold;
    padding: 0px 15px;
    float: left;
    border-style: solid;
    border: 1px 1px 1px 1px;
    border-color: orange;
    margin: 3px;
    xmargin: 20px 20px;
}
#topbar-tt:hover {
    color: white;
    border-bottom: 2px white solid;
    border-color: white;
}

#topbar-section-container {
    float: right;
}

#topbar-section-container a {
    color: darkgray;
    background-color: black;
    border-left: 2px greenyellow solid;
    
    height: 18px;
    font-weight: bold;
    padding: 6px 15px;
    float: left;
}

#topbar-section-container a:hover {
    border-bottom: 2px cornflowerblue solid;
    color: cornflowerblue;
    background-color: darkslategrey;
}
#encabezado {
    color: red;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    background-color: #5d9;
}

/*HAPPY FRIEND*/
/*
#happy-friend-container{
    position: fixed;
}
#happy-friend {
    color: white;
    xxbackground-color: dimgrey;
    height: 100px;
    width: 100px;
    position: fixed;
    float: left;
    xxborder: 3px dimgrey solid;
    xxborder-radius: 50%;
    overflow: hidden;
}
#happy-friend img {
    xxbackground-color: red;
    width: 100;
    height: 100;

}
#happy-friend h3 {
    margin: 0;
    xxbackground-color: darkblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;

}
#happy-friend-side {
    float: left;
    width: 500px;
    xxbackground-color: lime;
    margin-left: 100px;
    margin-top:50px;
    color: white;
}*/
.cuadricula {
    position: relative;
    float: left;
    margin-top: 50px;
    padding-left: 100px;
}
.cuad-border{
    float: left;
    border: 1px black solid;
    background-color: dimgray;
    width: 50px;
    height: 50px;
}
.cuad {
    float: left;
    border: 1px black solid;
    background-color: steelblue;
    width: 50px;
    height: 50px;
}
.clear-line {
    clear: both;
}

.cuad:hover {
    background-color: lightseagreen;
}
#controller1 {
    background-color: white;
    width: 1000px;
    height: auto;
    padding: 10px 10px;
}
/*
#controller1v2 {
    background-color: white;
    width: 1000px;
    height: auto;
    padding: 10px 10px;
}
.control-box {
    background-color: grey;
    width: 20px;
    height: 20px;
    border: 1px black solid;
    border-radius: 50%;
    float: left;
}
.controlles1v2 h2 {
    float: left;
}
*/

.cuadricula2 {
    position: relative;
    float: left;
    margin-left: 100px;
    margin-top: 50px;
    xxborder: 1px red solid;
    width: 572px;
    height: 572px;

}
.cuad-border2 {
    float: left;
    border: 1px green solid;
    background-color: limegreen;
    width: 50px;
    height: 50px;

}
.cuad2 {
    float: left;
    border: 1px green solid;
    background-color: black;
    width: 50px;
    height: 50px;
        opacity: 0.5;
}
.cuad2:hover {
    background-color: darkgreen;
        opacity: 0.5;
}

/*meter una animación en la cuadrícula verde. Que sea una línea de radar girando en círculos, que recorra todo el borde pero no sobrepase la cuadrícula (cuadrícula circunscrita, pero que se borre lo que sobresale). Darle a la barra que gira un rastro que se difumina en plan fadding. Modificar la opacidad para que se vea bien el tablero. Cuadrar que cuando pasa la barra, los puntos de barcos dados se marquen.

molaría mucho que al pasar por encima, el blanco que se ilumina del cuadro deje ver los barcos. con sobreexposicion u opacidad o algo asi. se ven los barcos en otro color.
*/

#radar {
    position: absolute;
    top: 286px;
    left: 286px;
    transform: translate(-50%, -50%);
    xxborder: 2px yellow solid;
    width: 572px;
    height: 572px;
    z-index: -1;
    overflow: hidden;
    
}
#radar2 {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: blueviolet;

}
xx#cuadro-radar {

    width: 50px;
    height: 50px;
    position: absolute;
    border: 1px white solid;
   /* top: 312px;
    left: 312px;*/
    top: calc(50% + 26px);
    left: calc(50% + 26px);
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;

}
xx#centro-radar {
    background-color: orange;
    width: 40px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 1;
    z-index: 4;
}

#radar-circle {
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    top: -59px;/*-2px para centrar en amarillo*/
    left: -59px;
    
    width: 737px;
    height: 737px;
    border: 2px green solid;
    border-radius: 50%;
    
    animation-name: anim-radar;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    float: left;

}

xx.radar-redbox {
    width: 9px;
    height: 9px;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    xxborder-top: 3px yellow solid;
    opacity: 1;
    z-index: 3;

}

.radar-greenbar {
    height: 370px;
    width: 3px;
    background-color: limegreen;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 2;
}
.radar-fade{
    xxbackground-color: orange;
    width: 370px;
    height: 370px;
    position: relative;
    left: -370px;
    opacity: 1;
    border-top-left-radius: 100%;
    background-image: linear-gradient(to top, rgba(0,255,0,0), green);

    
}
/*ANIMACION*/

/*--#anim-radar {
    animation-name: radar;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}*/

@keyframes anim-radar {
  0%   {
      transform: rotate(0deg);
    }
  100% {
      transform: rotate(360deg);
    }
    
}

#redcapo {
    background-color: darkred;
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
    animation-name: redcapo;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    top: 300px;
}

xx@keyframes redcapo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    
}

#bluecapo {
    background-color: darkblue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;

}
#greencapo {
    background-color: darkgreen;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 25px;
    left: 25px;

}

xx#metal-1 {
background-image: url("paginas/imagenes/metal_1.jpg");
    width: 1600px;
    height: 1300px;
}