:root{
   --raleway: 'Raleway';
   --color-principal: #efb810;
   --color-texto-oscuro: #305432;
   --color-texto-claro: #FFFFFF;
   --color-texto-gris: #a2a2a2;
   --color-background-claro: #f9f7f1;
   --color-background-gris-claro: #eef2ef;

   /* Padding lateral para la versión de escritorio */
   --padding-desktop: calc(1rem + 10vw);
   --margin-desktop: calc(-1rem - 10vw);

   /* Generados mediante https://codepen.io/sosuke/pen/Pjoqqp a través del código hexadecimal para colorear svg */
   --color-svg: invert(81%) sepia(60%) saturate(2986%) hue-rotate(360deg) brightness(102%) contrast(88%);
   --color-svg-gris: invert(82%) sepia(7%) saturate(16%) hue-rotate(325deg) brightness(79%) contrast(89%);
   --color-svg-rojo: invert(11%) sepia(100%) saturate(6089%) hue-rotate(354deg) brightness(102%) contrast(85%);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--raleway);
    color: var(--color-texto-oscuro);
    
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    background: var(--color-background-gris-claro);
}

h2, h3 {
    font-weight: 700;
}

a {
    color: var(--color-principal);
    font-size: 14px;
}

a:hover {
    font-weight: 700;
}

input, textarea {
    border: none;
    border-bottom: solid thin var(--color-principal);
    border-radius: 3px;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;

    font-family: var(--raleway);
    font-size: 16px;
    color: var(--color-texto-oscuro);
    resize: none;
}

input::placeholder, textarea::placeholder {
    font-family: var(--raleway);
    font-size: 12px;
    color: var(--color-texto-gris);
}

input:focus, textarea:focus {
    box-shadow: 0 2px 0 0 var(--color-principal);
    outline: none;
}

.boton {
    text-align: center;
    border: solid var(--color-principal);
    color: var(--color-texto-claro);
    background-color: var(--color-principal);
    min-width: 100px;
    width: 30vw;
    height: fit-content;
    padding: 1rem;
    transition: .5s;
}

.boton:hover {
    background: var(--color-background-claro);
    color: var(--color-principal);
    font-weight: 100;
}

.form-alert {
    color: red;
    font-size: 12px;
}

/* Responsive view Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .boton {
        max-width: 150px;
    }
}

/* Responsive view Desktop */
@media screen and (min-width: 1024px) {
    .boton, a {
        font-size: 16px;
        max-width: 200px;
    }
}