:root{
    --main-color: rgb(221, 109, 3);
    --secondary-color: rgb(133, 50, 2);
}
/*
var(--main-color)
var(--secondary-color)
*/

@media screen and (max-width:900px){
    body{
        color: rgb(236, 233, 186);
        background-color: rgb(85, 27, 10);
    }
    h1{
        color: var(--secondary-color);
    }
    h2{
        color: var(--secondary-color);
    }
}

body{
    background-color: rgb(211, 216, 210);
}

header{
    margin-top: 50px;
    text-align:center;
    font-size: 40px;
    color: var(--main-color);
}

h1{
    color: var(--main-color);
}

.nav_bar{
    color: white;
    background-color: var(--main-color);
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:center;
    font-size: 20px;
    background-color: var(--main-color);
}

nav ul li{
    display: inline;
    margin-right: 10px;
}

a{
    text-decoration: none;
    color: var(--secondary-color);
}
a:hover{
    background-color: var(--secondary-color);
    color: var(--main-color);
}

.main{
    margin-top: 40px;
}

.lateral{
    display: inline-block;
    vertical-align: top;
    margin-top: 60px;
}

.lateral ul{
    list-style-type: none;
}

.lateral li{
    font-size: 18px;
}

#ullateral{
    list-style-type: none;
    
}
.lilateral{
    text-decoration: none;
    color: var(--main-color);
    margin-left: -20px;
}

.principal{
    vertical-align: top;
    margin-top: 40px;
}
h2{
    color: var(--main-color);
}
.principal span{
    color: var(--main-color);
}

video{
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

details{
    margin-bottom: 20px;
}

footer{
    text-align: center;
    margin-top: 60px;
}

footer p{
    font-size: 17px;
    color: var(--main-color);
}

footer ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer li{
    display: inline;
}

footer a{
    color: var(--secondary-color);
}

/*_______________________Pág. SOBRE________________________*/

section h2{
    margin-bottom: 10px;
    color: var(--main-color);
}

.h2top{
    margin-top: 35px;
    margin-bottom: 10px;
    color: var(--main-color);
}

table{
    text-align: left;
}

.margin30{
    margin-top: 30px;
    color: var(--secondary-color)
}
.margin30 a{
    color: var(--main-color)
}

/*_______________________Pág. CONTACTOS________________________*/

.red{
    color: red;
}

.margin20{
    margin-bottom: 20px;
}

.orangeA{
    color: var(--main-color);
}

input{
    transition: width 1s ease-in-out 1s, height 1s, background 1s;
}

input:hover{
    background-color: var(--main-color);
}