@font-face {
	font-family: "RubikMonoOne-Regular";
	src: url('../fonts/RubikMonoOne-Regular.ttf')
}

	:root {
	--background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	--text: #3558C0;
  --main-textcolor: #3558C0;/*#efe4d0;*/
	--background-body: #fff;

	--background-postal:#fff;
	--texto-postal:	#3558C0;
	--input-color: #3558C0;
	--aside-menu-color: #fff;
	--aside-hover: #3558C0;

	--luna: #3558C0;
	--fondo-luna:	transparent;
	--padding_luna:	.25rem .1rem .25rem .1rem;

	--sol: #f3eee0;
	--fondo-sol:	#3558C0;
	--padding_sol:	.75rem .1rem .25rem .1rem;

	--display_noche: none;

	--background-descripcion: #3558C0;
	--text-descripcion: #414042;
	--cursor-color: #F3E37C;
}

**{
	margin: 0%;
	padding: 0%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
	background: var(--background-body);
	font-family: "Montserrat", Helvetica;
	font-size:1vw;
	color:  var(--text);
	height: 100%;
	overflow-x: hidden;
      }

@font-face{
	font-family: "SignPainter-HouseScript";
	src:url('../fonts/SignPainter-HouseScript.woff');
}


.postales{
	background: var(--background);
	border-radius: 5px;
	transition: background-color 0.6s ease, color 1s ease;
	background-size: 400% 400%;
	animation: change 5s ease-in-out infinite;
	width: 60rem;
	height: 40rem;
}

@keyframes change {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



.contenedor{
	width: 90%;
	margin: auto;
}


form {
	text-align: left;
}

form label,
form input {
	display: block;
}
form input{
	background: transparent;
	border: 0;
	border-bottom: 2px solid #444;
	padding: 5px;
	width: 100%;
	color: #000;
}
form label {
	margin: 15px 0;
}
form input[type="submit"] {
	display: block;
	width: auto;
	margin: 3rem auto;
	padding: 5px 10px;
	cursor: pointer;
}

textarea {
    outline: none;
		resize: none;
		border-radius: 10px;
		margin: 2rem auto 0;
		border: 2px solid #dcdee3;
		background: #dcdee3;
		color:#3558C0;
		font-weight: 700;
}

#landsend{
	background-image: url("../postales/12.jpg");
	background-size: cover;
	bottom:30%;
	right: 4%;
}

#tijuana{
	background-image: url("../postales/01.jpg");
	background-size: cover;
	bottom: 25%;
	right: 6%;
}
#rumorosa{
	background-image: url("../postales/02.jpg");
	background-size: cover;
	top: 16%;
	left: 40%;
}
#ensenada{
	background-image: url("../postales/03.jpg");
	background-size: cover;
	bottom: 50%;
	left: 70%;
}
#catavina01{
	background-image: url("../postales/04.jpg");
	background-size: cover;
	bottom: 90%;
	left: 30%;
}
#catavina02{
	background-image: url("../postales/05.jpg");
	background-size: cover;
	bottom: 60%;
	left: 1%;
}
#catavina03{
	background-image: url("../postales/06.jpg");
	background-size: cover;
	top: 30%;
	left: 5%;
}
#bahiadelosangeles{
	background-image: url("../postales/07.jpg");
	background-size: cover;
	bottom: 15%;
	left: 15%;
}
#sales{
	background-image: url("../postales/08.jpg");
	background-size: cover;
	top: 15%;
	left: 60%;
}
#guerreronegro{
	background-image: url("../postales/09.jpg");
	background-size: cover;
	bottom: 30%;
	left: 6%;
}
#mulege{
	background-image: url("../postales/10.jpg");
	background-size: cover;
	top: 43%;
	left: 30%;
}
#lapaz{
	background-image: url("../postales/11.jpg");
	background-size: cover;
	bottom: 70%;
	left: 10%;
}
#cactaceas-1{
	background-image: url("../postales/cactaceas-1.jpg");
	background-size: cover;
	top: 12%;
	left: 40%;
}
#cactaceas-2{
	background-image: url("../postales/cactaceas-2.jpg");
	background-size: cover;
	top: 22%;
	left: 20%;
}
#cactaceas-3{
	background-image: url("../postales/cactaceas-3.jpg");
	background-size: cover;
	bottom: 90%;
	left: 3%;
}
#cactaceas-4{
	background-image: url("../postales/cactaceas-4.jpg");
	background-size: cover;
	top: 16%;
	left: 2%;
}
#cactaceas-5{
	background-image: url("../postales/cactaceas-5.jpg");
	background-size: cover;
	top: 18%;
	left: 19%;
}
#rancho-1{
	background-image: url("../postales/rancho-1.png");
	background-size: cover;
	bottom: 50%;
	left: 70%;
}
#rancho-2{
	background-image: url("../postales/rancho-2.png");
	background-size: cover;
	bottom: 20%;
	left: 40%;
}
#rancho-3{
	background-image: url("../postales/rancho-3.png");
	background-size: cover;
	bottom: 35%;
	left: 57%;
}
#rancho-4{
	background-image: url("../postales/rancho-4.png");
	background-size: cover;
	bottom: 90%;
	left: 80%;
}

#thecape-1{
	background-image: url("../postales/thecape-1.png");
	background-size: cover;
	bottom: 50%;
	left: 70%;
}
#thecape-2{
	background-image: url("../postales/thecape-2.png");
	background-size: cover;
	bottom: 20%;
	left: 29%;
}
#thecape-3{
	background-image: url("../postales/thecape-3.png");
	background-size: cover;
	bottom: 30%;
	left: 89%;
}
#thecape-4{
	background-image: url("../postales/thecape-4.png");
	background-size: cover;
	bottom: 30%;
	left: 20%;
}
#thecape-5{
	background-image: url("../postales/thecape-5.png");
	background-size: cover;
	bottom: 80%;
	left: 60%;
}
#pasado-1{
	background-image: url("../postales/pasado-1.jpg");
	background-size: cover;
	bottom: 30%;
	left: 78%;
}
#pasado-2{
	background-image: url("../postales/pasado-2.jpg");
	background-size: cover;
	bottom: 70%;
	left: 30%;
}
#pasado-3{
	background-image: url("../postales/pasado-3.jpg");
	background-size: cover;
	bottom: 90%;
	left: 20%;
}
#pasado-4{
	background-image: url("../postales/pasado-4.jpg");
	background-size: cover;
	bottom: 60%;
	left: 80%;
}
#pasado-5{
	background-image: url("../postales/pasado-5.jpg");
	background-size: cover;
	bottom: 80%;
	left: 20%;
}
#pasado-6{
	background-image: url("../postales/pasado-6.jpg");
	background-size: cover;
	bottom: 40%;
	left: 20%;
}
#pasado-7{
	background-image: url("../postales/pasado-7.jpg");
	background-size: cover;
	bottom: 90%;
	left: 80%;
}


a#ig{
	color:var(--text);
	text-decoration: none;
}

/*DARKMOOD */
.noche {
	position: fixed;
	top: 3%;
	right: 1%;
	border: 2px solid var(--main-textcolor);
	border-radius: 50px;
	padding: .1rem .1rem;

}
.noche h5{
	margin: 0;
	font-size:1vw;

}

.luna {
	background-color: var(--fondo-luna);
	color:   var(--luna);
	padding:	var(--padding_luna);
	border-radius: 50px;
	transition: background-color 0.2s ease, color 1s ease;
}
.sol {
	background-color: var(--fondo-sol);
	color: var(--sol);
	padding: var(--padding_sol);
	border-radius: 50px;
	transition: background-color 0.2s ease, color 1s ease;

}
.noche div:hover{
		background-color: #ECAF93;
}

 .dark_mood h3{
	 position: fixed;
	 top: 1%;
	 right: 5%;
	 color: var(--main-textcolor);
	 font-size:2vw;
	 display: var(--display_noche);
	 transition: display 0.6s ease, color 1s ease;
 }
/*MENU*/
nav{
	z-index: 10;
}
 aside {
   display: block;
   position: relative;
   margin: 40px 0;
	 z-index: 11;
 }

 aside a {
   font: bold 12px Sans-Serif;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--aside-menu-color);
   padding: 5px 10px;
   margin: 0 0 10px 0;
   line-height: 24px;
	 background: rgb(34,19,171);
	 background: radial-gradient(circle, rgba(34,19,171,0.5301470930168943) 0%, rgba(255,255,255,0.0) 74%);
	 height: 10em;
	 width: 10em;
	 text-align: center;
	 transition: display 0.6s ease, color 1s ease;
	 cursor: pointer;
 }

 	aside a {
   position: fixed;
   top: 10%;
   transform-origin: 0 0;
   transform: rotate(90deg);
	 font-size:1vw;
	  text-decoration: none;
 }

 aside a:hover{
	 background: rgb(34,19,171);
	 background: radial-gradient(circle, rgba(34,19,171,0.5301470930168943) 0%, rgba(255,255,255,0.3452731434370623) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	transition: display 0.6s ease, color 1s ease;
 }

 	.side {
	 display: block;
	position: fixed;
	 bottom: 20%;
	 margin: 40px 0;
	 z-index: 12;
 }

 	.side a {
	 font: bold 12px Sans-Serif;
	 letter-spacing: 2px;
	 text-transform: uppercase;
	 color:var(--aside-menu-color);
	 padding: 5px 10px;
	 margin: 0 0 10px 0;
	 line-height: 24px;
	 background: rgb(34,19,171);
	 background: radial-gradient(circle, rgba(34,19,171,0.5301470930168943) 0%, rgba(255,255,255,0.0) 74%);
	 height: 10em;
	 width: 10em;
	 text-align: center;
	 cursor: pointer;
	 text-decoration: none;
 }

	.side a {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 transform-origin: 0 0;
	 transform: rotate(90deg);
	 font-size:1vw;

 }

 .side a:hover{
	background: rgb(34,19,171);
	background: radial-gradient(circle, rgba(34,19,171,0.5301470930168943) 0%, rgba(255,255,255,0.3452731434370623) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
 transition: display 0.6s ease, color 1s ease;
 }

/*MAIN*/
.partidademadre {
	text-align: right;
	position: absolute;
	top: 12%;
	right: 22%;
	color: #fff;
	font-size:2vw;
	font-family: "RubikMonoOne-Regular";
 font-weight: 800;
 z-index: 5;
   mix-blend-mode: difference;
}

.partidademadre svg{
	max-width: 150px;
}
.partidademadre path{
	mix-blend-mode: difference;
	fill: #fff;
}

.postcard {
	height: 90vh;
	    display: flex;
	    justify-content: center;
	    align-items: stretch;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-content: center;
			margin-bottom: 70px;
			overflow: visible;

}
  #postal-wrap {
    border-radius: 20px;
    background-color: var(--background-postal);
    z-index: 2;
    width: 60rem;
    height: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
		box-shadow: 0 0 8px var(--input-color) !important;
}

.sketch{
	z-index: 3;
	color: var(--main-textcolor);
}

.sketch b{
  background-color: yellow !important;
	color: black;
}
canvas {
    border: 5px solid #fff;
   border-radius: 20px;
    margin: 0;

}


.postcard img{
	margin: 5px;
}

.de h3{
	    margin-top: 0;
}
.mensaje h3{
	color: var(--input-color);
}


input[type="submit"] {
	margin-top: 1.50rem;
	margin-bottom: 1rem ;
	 background-color: var(--background-postal);
}
input[type="submit" i] {
		 border-radius: 50px;
		 border-width: 3px;
		 border-style: solid;
		 border-color: var(--input-color);
		 color:	var(--input-color);
		 align-items: center;
		 padding: .5rem 1rem .5rem 1rem;
		font-weight: 600;
}

input[type="submit"]:hover{
	border-color: #ecaf93;
	color:	var(--text);
	background-color: #ecaf93;
}

input{
	 background-color: var(--background-postal);
	 outline: none;
}
input[type="email" i] {
border-width: 0;
border-style: solid;
border-color: transparent;
border-bottom: 2px solid var(--input-color);
color: var(--input-color);
width: 90%;
outline: none;
}


		.mensaje {
		  display: inline-block;
		  width: 90%;
		  padding: 5px;
			height: 100%;
		}


.submit {
	text-align: center;
}

		.stamp {
			text-align: right;
			margin: 2rem;
		}
.stamp svg{
	width: 100px;
}
		.de-para{
			margin: 2rem auto;
		}

/*DESCRIPCION*/
	.color{
		z-index: 3;
		/*background-color: var(--background-descripcion);*/
		position: fixed;
		bottom:0;
		width: 100%;
		text-align: center;
		font-size:1.5vw;
		backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	}

	.titulo-postal h5{
		animation: move 20s infinite;
		position: relative;
		width: fit-content;
	}

	@keyframes move {
	  0%   {left:-300px;}
	  100% {left:100%;}
	}
	small {
		font-style: italic;
	}
	.imagen {
		height: 90vh;
		display: flex;
	  justify-content: center;
	  align-items: center;

	}
	#image {
		border-radius: 5px;
		z-index: 1;
	}

/*SETTINGS PEN */
.settings-pen{
	border-radius: 20px;
	margin:  .70rem auto;
	padding: 5px;
	color:#3050b0;
	font-weight: 600;
	box-shadow: 0 0 8px var(--input-color) !important;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 40%;

}
	input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #3558C0;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #1A2C60;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #3558C0;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #3558C0;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #1A2C60;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #3558C0;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3558C0;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #1A2C60;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3558C0;
}
input[type=range]:focus::-ms-fill-upper {
  background: #3558C0;
}



#penColor{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
}
#penColor::-webkit-color-swatch{
	border-radius: 20px;
	border: none;
}


#cleardraw {
	cursor: pointer;
	background: #fff;
	color:  var(--text);
	border-radius: 20px;
	padding: 5px;
	-webkit-appearance: none;
	border: none;
	font-weight: 600;
}

#cleardraw:hover{
	background: var(--text);
	color: #fff;
}

.dark-mode {
  --background: #414042;
	--text: #414042;
	--main-textcolor: #3558C0;/*#efe4d0;*/

	--background-postal:#414042;
	--texto-postal:	#efe4d0;
	--input-color: #3558C0;

	--luna:	#414042;
	--fondo-luna:	#3558C0;
	--padding_luna:	.25rem .1rem .75rem .1rem;

	--sol: #3558C0;
	--fondo-sol:	transparent;
	--padding_sol:	.25rem .1rem .25rem .1rem;

	--display_noche: block;

	--background-descripcion: #3558C0;
	--text-descripcion: #414042;

	--cursor-color: #3C787E;
}

::-moz-selection { /* Code for Firefox */
  color: #414042;
  background: yellow;
}

::selection {
  color: black;
  background: yellow;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: var(--cursor-color);
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
		background-color: var(--cursor-color);
}
.cursor2.hover{
	background-color: transparent;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--input-color);
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--input-color);
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	background-color: #F3E37C;
	background-color: #F3E37C;
	overflow-x: clip;
	height: 100vh;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	height: 100vh;
}


/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
	text-decoration: none;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.box {
	background-color: transparent;
	text-align: center;
	width: 300px;
	height: 200px;
	line-height: 100px;
	color: black;
  position:absolute;
	border-radius: 10px;
	margin: 20px;
}


@media (max-width: 480px){
	#postal-wrap{
		width: 100%;
		flex-direction: column;
	}

	#sketchCanvas{
		width: 300px;
		height: 300px;
	}

	.stamp{
		display: none;
	}
	form input[type="submit"]{
		margin: 1rem auto;
	}

	.de-para{
		margin: 1rem auto;
	}

	aside a{
		transform-origin: 0;
		font-size: .5rem;
		background: transparent;
		height: 4em;
		color: var(--text);
	}

	.side a {
		transform-origin: 0;
		font-size: .5rem;
		background: transparent;
		height: 4em;
		color: var(--text);
	}
}


@media screen and (max-width: 800px) {
	body {
		font-size: 5vw !important;
	}
	.content-container {
	    flex-direction: column;
}

input{
	font-size: 5vw;
}

.box {
	width: 50vw;
height: 30vw;
margin: 0;
}
}
@media only screen and (max-width: 600px) {

.partidademadre{
	color: #fff;
	    font-size: 5vw;
	    font-family: "RubikMonoOne-Regular";
	    font-weight: 800;
	    z-index: 5;
	    position: absolute;
	    top: 30%;
	    left: 40%;
	    transform: translate(-50%, -50%);
	    mix-blend-mode: difference;
	    text-align: left;
			right: 0;
}

.imagen {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
		position: sticky;
		top: -15%;
}
canvas{
	border: none;
}
nav{
	display: none;
}
.partidademadre svg{
	max-width: 90px;
}
}