/*RELOJ CASINO*/
@import url("https://fonts.googleapis.com/css2?family=Gidugu&family=Michroma&display=swap");

@font-face {font-family: "Eurostile"; src: url(../fonts/CASIO/Eurostile.ttf) format("truetype")}

@font-face {font-family: "Reloj_Bold"; src: url(../fonts/CASIO/Reloj_Bold.ttf) format("truetype")}

@font-face {font-family: "GothamUltra"; src: url(../fonts/CASIO/GothamUltra.ttf) format("truetype")}

@font-face {font-family: "DSEG7 Classic"; src: url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff2) format("woff2"), url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff) format("woff"); font-display: swap}

@font-face {font-family: "DSEG14 Classic"; src: url(https://manzdev.github.io/twitch-casio/dseg14-bold.woff2) format("woff2"), url(https://manzdev.github.io/twitch-casio/dseg14-bold.woff) format("woff"); font-display: swap}




/*@use postcss-nested;*/

:root {
--model-color: #333;
--band-color: #966;
--white-color: #d3d2d4;
--yellow-color: #fbbd05;
--lcd-background-color: #dededc;
--lcd-color: #181921;
/*
--band-color: #3475b1;
--yellow-color: #cca25d;
--red-color: #7d3925;
*/
--red-color: #966;
--led-color: #fbf195;
/*--lcd-font: "DSEG7 Classic", monospace;*/
--lcd-font: "Reloj_Bold", monospace;
--shine-gradient: linear-gradient(40deg, #fff0 15%, #fff2 30%, #fff6 50%, #fff2 70%, #fff0 85%);
--casio-border-radius: 11% / 25%;
--casio-shape: polygon(0 20%, 10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%);
--putton-notch-shape: polygon(100% 0, 100% 100%, 0 90%, 0 10%);
  
}

body .casio-f91w {
  margin: 0;
  font-family: Michroma, sans-serif;
  font-weight: bold;
  transition: background 0.2s ease;
}

.fuera, #fechayhora1 {color: black}

body.off {background: black; 

   & h2 {color: white}
   & p {color: white}
   & .fuera {color: grey !important}
   & #fechayhora1 {color: grey !important}
   & .ranking {color: black}
   & .ranking2 p {color: black}
   & .cookies-policy p {color: black}
   & ul a:link, li a:link {color: white}
   & .cbp-tm-menu > li > a {color:white !important}
   & ul .cbp-tm-submenu a:link {color:black !important}
   & ul .cbp-tm-submenu a:visited {color:black !important}
   & ul .cbp-tm-submenu a:active {color:black !important}
	  }
  
.containerr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
    max-width: 368px;
    margin: auto !important;
    max-height: 399px;
    text-align: center;
	display: flex;
	padding: 0;
	overflow: hidden;
}


#botonCAbis {
position: absolute;
z-index: 99;
margin-left: 54px;
margin-top: 32px;
max-width: 200px;
overflow: hidden
}
.test{opacity:0}
.scrolp:hover ~use{opacity:1}

.casio-f91w, .containerr {
  /*pointer-events: auto;*/
  user-select: none;
}


#date_time{
font-family: var(--lcd-font);
		  /*display: flex;*/
		  font-size: 20px;
		  letter-spacing: 1px;
		  word-spacing: -5px;
		  font-weight: 400;
		  color: cadetblue;
}
/* Utility classes */

.text-white {font-family: Eurostile, sans-serif; color: var(--white-color)}
.brand {margin-left: -20px; letter-spacing: 1px; font-size: 1rem; color: white; font-weight:normal; scale: 1.1 1;}

.text-yellow {color: var(--yellow-color)}
.text-red {color: var(--red-color)}

.font-cursive {
  font-family: GothamUltra, sans-serif;
  font-style: italic;
  font-weight: bolder;
  font-size: 16px;
  letter-spacing: 1px;

}

.font-small {font-size: 7px; letter-spacing: 1px;}
.font-medium {font-size: 11px}

span.arrow {
  display: inline-block;
  color: var(--red-color);
  transform: scale(2, 0.75) translateX(var(--x));
  margin-top: -1px;
}

span.arrow.left {--x: -1px}
span.arrow.right {--x: 3px}

.minifecha {font-size: 20px; padding: 0px 5px; /*color: red*/}
.minidia {font-size: 20px; letter-spacing: 0.5px; /*color: blue*/}
.minimes {font-size: 20px; letter-spacing: 0.5px; /*color: brown*/}

#pantalla {
    font-weight: 400;
    transform: scale(0.9,1);
    text-align: center;
    font-family: var(--lcd-font);
    font-size: 3rem;
    letter-spacing: 1px;
    word-spacing: -2px;
    z-index: 1;
    display: inline-block;
    line-height: 45%;
text-align: center;
margin: -5px auto 5px auto;
}

#pantalla div {margin-top: 15px;}


#day-name, #day-date, #month-name, #month-date, #year-date, sup {

font-family: var(--lcd-font);
font-size: 19px;
letter-spacing: 0.5px;
word-spacing: -5px;
font-weight: 400;
/*color: purple;*/
}

#format {/*display: flex; align-items: end;*/}

.formato {font-size: 16px; padding-left: 5px; font-family: sans-serif; /*color: red;*/}

.facero:hover {transition: all 10s !important; transform:translate(5px, -22px) scale(-1.5,1) !important; z-index: -1 !important; /*background:red !important;*/}

.fauno:hover {transition: all 10s !important; transform:translate(5px, 20px) scale(-1.5,1) !important; z-index: -99999 !important; /*background:green !important;*/}

#btn3 {opacity: 1; width: 18px; height: 20px; margin: auto; display: block;/* background: #187382;*/}


.fados:hover {transition: all 5s !important; transform:translate(-2px, -30px) scale(0.5,1) !important; z-index: -1 !important; /*background:yellow !important;*/}

.fatres:hover {transition: all 15s !important; transform:translate(-243px, -120px) scale(1.69,1.69) !important;
border: none !important;
background: url("https://comunicart.net/images/Favi_CA.svg") no-repeat !important;
width: 200px !important;
height: 200px !important;
z-index: 999999999 !important;
overflow: hidden
}

.facuatro:hover {transition: all 5s; transform:translate(-2px, 90px) !important; overflow: hidden;}

.casio-f91w div {width: auto}

.puttons-containerr {position: relative; z-index: 0}

.casio-f91w {
  --width: 324px;
  --height: 273px;

  display: flex;
  flex-direction: column;
  align-items: center;

  & .correa {
    width: 100%;
	max-width: 220px;
    height: 150px;
    background: #333;
   /* background: hsl(0deg 19.01% 23.73% / 25%);*/
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);

    &.top {
      transform: scaleY(-1);
    }

    & .band {
      &.first {
        height: 45px;
        box-shadow: 0 3px 8px 3px #111;
      }

      &.second {
        height: 10px;
        background: linear-gradient(#111, #333, #444);
        transform: translateY(45px);
        position: relative;
        display: flex;
        justify-content: center;

        &::after {
          content: "";
          display: block;
          background: linear-gradient(#111 10%, #222 23%, #333 50%, #444 75%, #555 95%);
          width: 50%;
          height: 20px;
          position: absolute;
          transform: translateY(-5px);
          border-radius: 25px;
        }
      }
    }

    &.top {
      background: #333;
      /*background: hsl(0deg 19.01% 23.73% / 25%);*/

      & .band {
        &.first {
          box-shadow: 0 3px 3px 3px #000;
      background: #333;
      /*background: hsl(0deg 19.01% 23.73% / 25%);*/
        }

        &.second {
          background: linear-gradient(#444 0 30%, #111 75% 100%);

          &::after {
            background-color: #444;
            transform: scaleY(0.8) translateY(-6px);
            background-image: linear-gradient(#444 0 30%, #333 60%, #111 75% 100%);
          }
        }
      }
    }
  }

  & .core-watch-containerr {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--width) * 1);

    & .putton-notch {
      width: 8px;
      height: 60px;
      background: #262626;
      clip-path: var(--putton-notch-shape);
	  z-index: 999;

      &+.putton {
        width: 18px;
        height: 20px;
        /*border: 1px solid #e7eadd;*/
        border: none;
        border-radius: 2px;
        position: relative;
        z-index: -1;
        background: linear-gradient(to bottom, #fbfbfa 30%, #4f4a42 60%, #aea084);
      }

      &.right+.putton {transform: translate(10px, 10px);}
	  
      &.left+.putton {transform: translate(0px, -22px);}
      &.left {transform: translate(0px, 0px);}
      &.right {transform: translateX(-1px) scaleX(-1);}
    }

    & .space {height: 15px;}
  }

  & .core-watch {
    width: var(--width);
    height: var(--height);
    background-color: var(--model-color);
    clip-path: var(--casio-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
      0 -2px 0 0 #555 inset,
      0 -3px 0 1px #222 inset,
      0 2px 0 0 #222 inset,
      0 3px 0 1px #555 inset;
	  z-index: 0;
  }

  & .crystal-screen {
    width: calc(var(--width) * 0.85);
    height: calc(var(--height) * 0.8);
    background: #111;
    border-radius: var(--casio-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 0 2px 2px #444,
      0 0 0 5px #222,
      0 0 7px 7px #111;

    &::after {
      content: "";
      display: block;
      background: var(--shine-gradient);
      width: 100%;
      height: 100%;
      position: absolute;
	  z-index: 999
    }
  }

.crystal-screen {
    width: calc(var(--width) * 0.85);
    height: calc(var(--height) * 0.8);
    background: #111;
    border-radius: var(--casio-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 0 2px 2px #444,
      0 0 0 5px #222,
      0 0 7px 7px #111;

  & .color-border {
    width: calc(var(--width) * 0.8);
    height: calc(var(--height) * 0.78);
    border-radius: var(--casio-border-radius);
    box-shadow:
      0 0 0 4px var(--band-color) inset,
      0 0 0 8px #000 inset,
      0 0 0 10px #eee inset;
	  /*
	  height: 200px !important;
	  background: red*/
  }

  & .lcd-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	flex-wrap: wrap;

    & .top {
      margin-top: 12px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: calc(var(--width) * 0.7);
      border-bottom: 2px solid var(--band-color);
    }

    & .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(var(--width) * 0.65);
	      flex-wrap: wrap;
    align-content: center;
	 line-height: 115%;

      & .inner-top {
        display: flex;
        justify-content: space-between;
        width: 90%;
		margin-bottom: 5px;
	 /* margin: -3px auto -8px auto;
		margin-top: 0px;*/
      }

      & .inner-center {
        /*font-family: var(--lcd-font);
        font-size: 38px;
        flex-direction: column;
		    height: calc(var(--height) * 0.32);
		max-height: 93px;
        margin: 5px auto 7px auto;
		overflow: hidden;*/
        width: calc(var(--width) * 0.6);

        background: var(--lcd-background-color);
        color: var(--lcd-color);
        border-radius: 10px;
        box-shadow:
          0 0 0 4px #000,
          0 0 0 5px var(--white-color);
        display: flex;
        transition: background-image 0.25s;
        position: relative;

        &::before {
          /*display: flex;
          border-radius: 8px 8px 0 0;
          top: 0;*/
          content: "";
          background: linear-gradient(#292928 50%, transparent);
          width: 100%;
          height: 10px;
          position: absolute;
        }

        &.on {
          background:
            radial-gradient(circle at 0 50%, #ffff006e 20%, #ffff0426 80%),
            linear-gradient(#999 100%, var(--lcd-background-color) 11%);
            /*linear-gradient(#999 8%, var(--lcd-background-color) 11%);*/
        }

        & .lcd-top {display: none;
  justify-content: center;
          /*display: flex; justify-content: space-around;*/
		  margin-top: -3px;
		  font-weight: 400;

          & .timemode {
            font-family: sans-serif;
            font-size: 12px;
            align-self: flex-start;
            transform: translateY(54px);
			position: absolute;
			left: 6px;
			margin-bottom: -2px;
			font-weight: 400;
            /*color:green;*/
          }

          & .weekday {
            /*font-family: "DSEG14 Classic", monospace;*/
            font-family: "Reloj_Bold", monospace;
          }

         /* & .day {
            transform: translateX(5px);
          }*/
        }

        & .lcd-bottom {
          display: flex;
          justify-content: center;
          padding-top: 26px;
          visibility: hidden;

          & .time {
		  display: flex;
		  margin-top: -12px;
		  margin-left: 15px;
		  font-size: 3rem;
		  letter-spacing: 1px;
		  font-weight: 400;
		  /*color: deeppink;*/
		  }
		  
          & .seconds {
		  align-self: flex-end;
		  margin-left: -5px;
		  margin-bottom: 5px;
		  font-size: 1.7rem;
		  font-weight: 400;
		  /*color: darkviolet*/
		  }
		  
		  & .ampm {
		  position: absolute;
          font-size: 0.9rem;
          font-family: sans-serif;
          font-weight: normal;
          bottom: 7px;
          /*color:green;*/
          }
		  
		  & .semipepe {font-size: 2rem; align-self: flex-end; margin-bottom: 5px;}
		  
        }
      }

      & .inner-bottom {
        display: flex;
        justify-content: space-evenly;
        width: calc(var(--width) * 0.8);
		margin-top: 5px;
      }
    }

    & .bottom {
      display: flex;
      justify-content: space-around;
      width: calc(var(--width) * 0.7);
	  margin-top: -5px;

      & .water,
      & .resist {
        align-self: flex-end;
      }

      & .water::before,
      & .resist::before {
        content: "";
        display: block;
        border-top: 2px solid var(--band-color);
        width: 130%;
        transform: translate(-8px, 0);
      }

      & .resist::before {
        transform: translate(-10px, 0);
      }

      & .wr-box {
        letter-spacing: -3px;
        border: 2px solid var(--band-color);
        padding: 0 16px 0 10px;
        border-radius: 5px 5px 20px 20px / 5px 5px 30px 30px;
        transform: translate(0, 6px);

        /*&>span {
          display: inline-block;
          transform: translate(0, -2px);
        }

        & .r {
          font-style: italic;
        }*/
      }
    }
}}

}