/* Main css for whole site */
:root {
    --background: steelblue;
    --background-hover: aliceblue;
    --menu-title: white;
    --selected: aqua;
}

html {
	font-size: 16px;
}

body {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--background);
    font-weight: bold;
}

a:visited {
    color: silver;
}

a:hover {
    color: black;
}

h1.title {
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    color: silver;
    text-transform: capitalize;
}

.frame {
    padding: 5px;
}

select, 
::picker(select)  {
appearance: base-select;
}    

select::picker-icon {
  color: var(--background);
  transition: 0.4s rotate;
}

select:open::picker-icon {
  rotate: 180deg;
}

.one-rem {
    height: 1rem;
    min-height: 1rem;
    max-height: 1rem;
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    border: solid 1 px black;
}

.two-rem {
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    border: solid 1 px black;
}

.pagina {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 90%; 
    margin-left: 5%; 
    min-height: 8rem; 
    gap: 1rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;  
    border: solid 1px var(--background); 
    border-radius: 8px; 
    margin-bottom: 2rem;
}

.renglon {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.2rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: stretch; 
    align-items: flex-start;
    gap: 5px;
    border: dotted 1px var(--background);
}

.renglon label {
    font-size: 1.4rem;
}

.renglon select {
    color: var(--background); 
    font-size: 1.4rem; 
    font-weight: bold; 
}

button.bgbutton {
    background: var(--background);
    color: var(--menu-title);
    font-size: 1.2rem;
    padding: 10px;
    border-radius: 8px;
    margin: 0.5rem;
}

@media  screen and (width>800px) {
    .renglon {
        margin-left: 3rem;
        margin-right: 3rem;
        padding: 0.5rem; 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
    }

    .renglon label {
        font-size: 1.5rem;
    }

    .renglon select {
        font-size: 1.5rem; 
    }

}