* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

section {
	scroll-margin-top: 75px;
}

body {
    background-color: #161616;
    margin-top: 75px;
    font-family: "Fira Code", monospace;
}

nav {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    font-family: "Fira Code", monospace;
    padding: 0 5%;
    background-color: #000;
}

nav .logo {
    float: left;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #ffffff;
}

nav .list {
    float: right;
    padding: 0;
    margin: 0;
	margin-bottom: 10px;
	margin-top: 5px;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

nav .list li {
    list-style: none;
}

nav .list a {
    display: block;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 4px solid #000000;
}

nav .list a:hover {
    border-bottom: 4px solid #e96e21;
}

#toggle {
    position: absolute;
    top: -100px;
}

nav .icon-bars {
    display: none;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

nav .icon-bars .line {
    width: 30px;
    height: 5px;
    background-color: #ffffff;
    margin: 5px;
    border-radius: 3px;
    transition: all .3s ease-in-out;
}

@media (max-width:768px) {
    nav .logo {
        float: none;
        width: auto;
        justify-content: center;
    }

    nav .list {
        float: none;
        position: fixed;
        z-index: 9;
        left: 0;
        right: 0;
        top: 75px;
        bottom: 100%;
        width: auto;
        height: auto;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: rgba(0,0,0,0.8);
        overflow: hidden;
        transition: all .5s ease-in-out;
    }

    nav .list a {
        font-size: 20px;
    }

    nav :checked ~ .list {
        bottom: 0;
    }

    nav .icon-bars {
        display: block; 
    }

}

nav::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Ajusta la altura de la barra según sea necesario */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 2); 		
}

.addHTML{
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border: 0 !important;
}

h1.JP {
	width: 55%;
    text-shadow: 2px 2px #262626, -2px -2px #161616;
	color: #000000;
    font-size: 100px;
    margin-left: 15%;
    font-family: fira code, monospace;
    font-style: bold;
	margin-right: 0;
}

h1 {
	color: #fff;
    font-size: 75px;
    margin-left: 15%;
	margin-right: 15%;
	justify-content: center;
    font-family: fira code, monospace;
    font-style: bold;
}


h2 {
    font-size: 26px;
    color: #e96e21;
    margin-left: 15%;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: fira code, monospace;
    font-style: bold;
}

h3 {
    font-size: 18px;
    color: #999;
    margin-left: 15%;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: fira code, monospace;
    font-style: bold;
}

p {
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 10px;
    font-size: 18px;
	color: #ffffff;
}

b {
    font-size: 18px;
    font-style: bold;
	color: #b616de;
}

.pNoMargin{
	margin: 0;
	margin-bottom: 10px;
	color: #ffffff;
}

.list{
	color: #ffffff;
	margin-left: 20%;
	margin-right: 15%;
	margin-bottom: 10px;
}

.container {
    width: 70%;
    background-color: #161616;
    box-sizing: border-box;
    margin-left: 15%;
	margin-right: 15%;
    border-radius: 10px;
    position: relative;
    height: 100%;
    z-index: 5;
}

.container::after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: ' ';
    width: 100%;
    height: 100%;
    background: #fc4a1a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: blur(3px);
    z-index: -1;
}


 .btn {
    width: 15%;
    margin-left: 15%;
    border: none;
    background: #262626;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 20px;
    padding: .5em;
    display: inline-block;
    text-align: center;
    text-justify: auto;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
}

 .btn:hover,
 .btn:focus {
    background: #e96e21;
}

.par {
    color: #ffffff;
    font-family: fira code, monospace;
    font-size: 20px;
	margin: 0;
}

footer {
    font-family: "Fira Code", monospace;
    font-size: 20px;
    background-color: #161616;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer, p {
	margin-top: 5px;
}

a {
    color: #e96e21;
	text-decoration: none;
}


a:hover {
	text-decoration: underline;
}

.postImg{
	text-align: center;
	margin-left: 15%;
	margin-right: 15%;
}

img{
	display: inline-block;
}

.Profilephoto {
	width: 50%;
    margin-right: 15%;
}

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

.downloadButton {
	margin-left: 15%;
	height: 50px;
	background: #cc743e;
	width: 15%;
	align-content: center;

}

.downloadButton:hover {
	background: #161616;
	background: #e96e21;
}

.downloadButton p{
	color: #ffffff;
	text-transform: bold;
	text-transform: uppercase;
}

/* Cards para los proyectos */
.card-container {
    display: grid;
	grid-template-columns: auto auto auto;
    justify-content: space-around;
    margin: 20px 15%;
					
}

.card {
    background-color: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    margin: 1%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
								
}

.card a {
    color: inherit;
    text-decoration: none;
			
}

.card:hover {
    transform: translateY(-5px);
		
}

.card-img {
    width: 100%;
    object-fit: cover;
		
}

.card-content {
    padding: 20px;
		
}

.card-content h3 {
    margin: 0;
    font-size: 24px;
    color: #ffffff;
    font-family: fira code, monospace;
					
}

.card-content p {
    font-size: 16px;
    color: #b0b0b0;
    font-family: fira code, monospace;
    margin-top: 10px;
				
}

.progressBar{
	position: relative;
	width: 100%;
	height: 6px;
	background: #999;
	border-radius: 6px;
	overflow: hidden;
	margin: 5px 0;
}

.progressBar::before{
	content: '';
	position: absolute;
	width: var(--wth);
	height: 100%;
	background: #e96e21;
}


/*Formulario de contacto*/

.contactForm{
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 15%;
}

.contactForm form{
	display: grid;
	grid-template-columns: 1fr 2fr;

}

.contactForm form .block{
	grid-column: 1/3;
}

.contactForm form p{
	margin:0;
	padding: 10px;
	justify-content: center;
	color: #ffffff;	
}

.contactForm form input,
.contactForm form textarea{
	width: 100%;
	resize: vertical;
	padding: .7em;
	border: none;
	background: none;
	border-bottom: 1px solid #e96e21;
	margin-bottom: 20px;
	color: #ffffff;
	form-sizing: content;
}

.contactForm form button{
	width: 100%;
	border: 0;
	background: #262626;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 20px; 
	padding: .5em;

}

.contactForm form button:hover,
.contactForm form button:focus{
	background: #e96e21;
}




/* Iconos de tecnologías */

.iconContainer{
	display: flex;
	margin-left: 15%;
	margin-right: 15%;
	align-items: center;

}

.iconContainerNM{
	display: flex;
	margin-left: 0%;
	margin-right: 5%;
	align-items: center;

}

.iconContainerNM span{
	margin-right: 2%;
	display: block;

}

.iconContainer p{
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
	font-size: 14px;
	color: #ffffff;
	
}

.iconContainer span{
	margin: 0;
	margin-left: 2px;
	margin-top: 1px;
	margin-bottom: 1px;
}

.iconContainer .Arduino{
	margin-right: 1%;	
	display: flex;
	background-color: #00979D;
	width: auto;
}

.iconContainer .MQTT{
	margin-right: 1%;	
	display: flex;
	background-color: #660066;
	width: auto;
}

.iconContainer .Adafruit{
	margin-right: 1%;	
	display: flex;
	background-color: #000000;
	width: auto;
}

.simple-icons--mqtt {
	display: inline-block;
	margin-left: 1%;	
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.657 23.994h-9.45A1.21 1.21 0 0 1 0 22.788v-9.18h.071c5.784 0 10.504 4.65 10.586 10.386m7.606 0h-4.045C14.135 16.246 7.795 9.977 0 9.942V6.038h.071c9.983 0 18.121 8.044 18.192 17.956m4.53 0h-.97C21.754 12.071 11.995 2.407 0 2.372v-1.16C0 .55.544.006 1.207.006h7.64C15.733 2.49 21.257 7.789 24 14.508v8.291c0 .663-.544 1.195-1.207 1.195M16.713.006h6.092A1.19 1.19 0 0 1 24 1.2v5.914c-.91-1.242-2.046-2.65-3.158-3.762C19.588 2.11 18.122.987 16.714.005Z'/%3E%3C/svg%3E");
	background-color: #ffffff;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	 mask-size: 100% 100%;
						  
}

.simple-icons--arduino {
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.087 6.146c-.3 0-.607.017-.907.069c-2.532.367-4.23 2.239-5.18 3.674c-.95-1.435-2.648-3.307-5.18-3.674a6.5 6.5 0 0 0-.907-.069C2.648 6.146 0 8.77 0 12s2.656 5.854 5.913 5.854c.3 0 .607-.017.916-.069c2.531-.376 4.23-2.247 5.18-3.683c.949 1.436 2.647 3.307 5.18 3.683c.299.043.607.069.915.069C21.344 17.854 24 15.23 24 12s-2.656-5.854-5.913-5.854M6.53 15.734a4 4 0 0 1-.625.043c-2.148 0-3.889-1.7-3.889-3.777c0-2.085 1.749-3.777 3.898-3.777q.312.002.624.043c2.39.35 3.847 2.768 4.347 3.734c-.508.974-1.974 3.384-4.355 3.734m11.558.043q-.312-.002-.624-.043c-2.39-.35-3.856-2.768-4.347-3.734c.491-.966 1.957-3.384 4.347-3.734q.312-.041.624-.043c2.149 0 3.89 1.7 3.89 3.777c0 2.085-1.75 3.777-3.89 3.777m1.65-4.404v1.134h-1.205v1.182h-1.156v-1.182H16.17v-1.134h1.206V10.19h1.156v1.183zM4.246 12.498H7.82v-1.125H4.245v1.125z'/%3E%3C/svg%3E");
	background-color: #ffffff;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
						  
}

.simple-icons--adafruit {
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.399 12.794c-.924.148-1.722-.037-1.781-.412c-.06-.375.64-.798 1.565-.945s1.721.038 1.78.412c.06.374-.64.798-1.564.945m-.878 3.86c-.338.172-.957-.363-1.382-1.196c-.426-.834-.497-1.65-.158-1.822s.956.363 1.382 1.196s.497 1.65.158 1.822m-3.64-1.552c-.662.662-1.415.981-1.683.713c-.27-.268.05-1.022.71-1.684c.66-.663 1.414-.982 1.683-.714s-.05 1.023-.71 1.685m-2.531-4.61c.171-.339.987-.268 1.82.156s1.372 1.042 1.2 1.38s-.988.269-1.822-.155s-1.37-1.043-1.198-1.381m4.8-2.45c.375.058.56.856.414 1.78c-.145.925-.566 1.625-.942 1.567c-.374-.06-.56-.857-.415-1.78c.145-.925.567-1.626.943-1.568m11.835 2.53c-.078-.491-.345-.632-.989-.837l-3.762-1.2s-2.283-.863-3.974.357c-.228.164-.464.351-.7.55c.198-.236.385-.472.55-.7c1.215-1.694.349-3.975.349-3.975l-1.207-3.761c-.207-.643-.347-.91-.84-.986c-.492-.078-.707.132-1.101.68l-2.305 3.209s-1.524 1.903-.888 3.89c.086.266.191.549.308.836a12 12 0 0 0-.497-.74C7.693 6.215 5.258 6.332 5.258 6.332S1.82 6.32 1.308 6.32c-.676-.003-.972.05-1.198.493s-.093.714.307 1.258c.303.415 2.34 3.183 2.34 3.183S4.095 13.292 6.18 13.3c.28.001.58-.012.889-.034a12 12 0 0 0-.855.244c-1.98.656-2.619 3.01-2.619 3.01L2.36 20.273c-.21.64-.252.939.1 1.29c.352.353.65.31 1.291.098c.489-.16 3.75-1.242 3.75-1.242s2.352-.644 3.004-2.624c.088-.266.169-.556.243-.854a11 11 0 0 0-.03.887c.01 2.085 2.051 3.421 2.051 3.421l3.186 2.333c.546.398.816.531 1.26.305c.443-.226.495-.523.491-1.199l-.022-3.95s.114-2.435-1.567-3.668a12 12 0 0 0-.739-.495c.287.115.568.22.836.304c1.986.633 3.888-.894 3.888-.894l3.204-2.31c.547-.395.756-.612.679-1.104'/%3E%3C/svg%3E");
	background-color: #ffffff;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
						  
}