.imgLogoWlcm{
    height: 150px;
    width: 150px;
    align-self: center;
    margin-bottom: -30px;
    margin-left: 80px;
	

}

h1.titleWlcm{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
    margin-top: 20px;
	color: rgb(5, 3, 3);
    font-size: x-large;
}
section.wlcm{
	display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
	
}

.buttonRegister{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 110px;
          margin-left: 100px;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.buttonRegister:hover {
	background-color: #edcb22;
	color: white;
     }

.buttonLogin{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 10px;
          margin-left: 100PX;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buttonLogin:hover {
	background-color: #edcb22;
	color: white;
     }

a{
	text-decoration: none;
	color: black;
    font-size: large;
    text-align: center;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
}

#root {
    background-image: url(IMG/Montanas-Rocosas-En-Canada-Lago-Louise-Y-Banff-f94e70f.webp);
}

@media only screen and (min-width:768px) and (max-width:900px){

.imgLogoWlcm{
    height: 150px;
    width: 150px;
    align-self: center;
    margin-bottom: -30px;
    margin-left: 300px;
	

}

h1.titleWlcm{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
    margin-top: 20px;
	color: rgb(5, 3, 3);
    font-size: x-large;
}
section.wlcm{
	display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
	
}

.buttonRegister{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 110px;
          margin-left: 265px;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.buttonRegister:hover {
	background-color: #edcb22;
	color: white;
     }

.buttonLogin{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 10px;
          margin-left: 265PX;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buttonLogin:hover {
	background-color: #edcb22;
	color: white;
     }

a{
	text-decoration: none;
	color: black;
    font-size: large;
    text-align: center;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
}

#root {
    background-image: url(IMG/Montanas-Rocosas-En-Canada-Lago-Louise-Y-Banff-f94e70f.webp);
}

}

@media only screen and (min-width:1000px) and (max-width:1024px){

.imgLogoWlcm{
    height: 150px;
    width: 150px;
    align-self: center;
    margin-bottom: -30px;
    margin-left: 430px;
	

}

h1.titleWlcm{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
    margin-top: 20px;
	color: rgb(5, 3, 3);
    font-size: x-large;
}
section.wlcm{
	display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
	
}

.buttonRegister{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 110px;
          margin-left: 430px;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}


.buttonLogin{
	height: var(--button-height);
          width: var(--button-width);
          margin-top: 10px;
          margin-left: 430px;
          border-radius: var(--border-radius-text-field-and-button);
	font-size: var(--tamaño-letra);
	background-color:rgb(44, 125, 231);
	font-size: var(--size-letters-button);
          color: black;
	text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}



a{
	
    font-size: large;
    
  
}

}


@media only screen and (min-width:1025px) and (max-width:1440px){
    .imgLogoWlcm{
        height: 150px;
        width: 150px;
        align-self: center;
        margin-bottom: -30px;
        margin-left: 600px;
        
    
    }
    
    h1.titleWlcm{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        margin-top: 20px;
        color: rgb(5, 3, 3);
        font-size: x-large;
    }
    section.wlcm{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        width: 100%;
        
    }
    
    .buttonRegister{
        height: var(--button-height);
              width: var(--button-width);
              margin-top: 110px;
              margin-left: 570px;
              border-radius: var(--border-radius-text-field-and-button);
        font-size: var(--tamaño-letra);
        background-color:rgb(44, 125, 231);
        font-size: var(--size-letters-button);
              color: black;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    
    .buttonLogin{
        height: var(--button-height);
              width: var(--button-width);
              margin-top: 10px;
              margin-left: 570px;
              border-radius: var(--border-radius-text-field-and-button);
        font-size: var(--tamaño-letra);
        background-color:rgb(44, 125, 231);
        font-size: var(--size-letters-button);
              color: black;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    a{
        
        font-size: large;
        
      
    }
    }