*{text-decoration: none; list-style: none; margin: 0 auto; padding: 0}


@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500&subset=latin,latin-ext);
*{text-decoration: none; list-style: none; margin: 0 auto; padding: 0; font-family: 'Roboto', sans-serif;}


header { 
    
    
    background-color: rgba(66, 32, 106, 0.79);
    height: 150px;
    width: auto;
    margin-bottom: 30px;
    margin-top: 60px;
    padding: 10px;


}

body{
  background-image: url(img/fondob.jpg);
  background-size: 100%;
  background-origin: padding-box;
  
}


nav {    
    background-color: rgba(242, 64, 64, 0.54);
    width: 100%;
    margin-bottom: 30px;
    font-weight: 500; 
}

nav ul{
        text-align: left;
        padding: 35px;
}

nav ul li a {
color: rgb(252, 252, 252);
}

nav ul li a:hover{
    color:#c3c2ba;
}


main {
    margin: 0;
    height: 70%;
    background: rgba(8, 0, 0, 0.85);
    color: white;
    margin-bottom: 30px;
    padding: 15px;
    text-align: center;
    
}



div { 
    display: inline-block;
    text-align: left;
    padding: 10px
}
    
{    }
}


div { 
    display: flex;
    object-position: right;
    
}
h1 {
    color: white;
    text-align: center;
    font-weight: 700; 
}

h2 {
    color: rgb(216, 213, 213);
    padding: 8px;
    text-align: center;
    font-weight: 500; 
}

h3 {   
    color: white;
    padding: 15px;
    font-weight: 700;
        
}

h4 {   
    color: rgba(169, 235, 210, 0.78);
    padding: 10px;
    text-align: left;
    font-weight: 600;
}

ul {
    color: rgba(157, 230, 211, 0.78);
    
}
section {
    color: rgba(169, 235, 210, 0.78);
    font-weight: 400;
}
f{
        width: 700px;
        background-color: rgba(163, 36, 19, 0.78);
        padding: 25px;
}

*
*:before,
*:after{
	box-sizing: border-box;
}


.wrapper{
  width: 100%;
  height: 40%;
  margin: 9px; 
  padding: .9%;
  
}

.button{
    width: 70px;
	height: 50px;
	color: #818181;
	background-image: linear-gradient(top, #383838 0%, #1F1F1F 5%, #161616 100%);
    background-image: -webkit-gradient(linear, right top, right bottom, from(#1F1F1F), to(#161616));
	border-radius: 7px;
	float: right;
	box-shadow: 0 0 1px 1px rgb(10,10,10);
	cursor: pointer;
	position: relative;
	font: normal 20px arial;
	padding-left: 4%;
	padding-top: 5%;
	
	transition: color .3s ease;
   
}

.button:hover{
	color: #9E9E9E;
}

.button:active{
	box-shadow: 0 0 1px 1px rgb(10,10,10),
      				inset 0 2px 2px 0px black;
}

.button:before{
	position: absolute;
	content: '';
	right: 15px;
	top: 10px;
    width: 12px;
	height: 12px;
	background: #646464;
	background-image: radial-gradient(top, #616161 0%, #616161 20%, #535353 60%);
	border-radius: 50%;
	box-shadow: 0 0 4px #1C1C17;
	transition: all .3s ease;
    object-position: left;
}

.button:hover:before{
	background: #19a58a;
	box-shadow: 0 0 4px #1C1C17,
  						0 0 5px #FF4242;
}

.button:active:before{
	box-shadow: 0 0 4px #1C1C17,
  						inset 0 2px 2px 0px #CC0000;
}

.button:nth-child(1){
	width: 150px;
    height: 50px;
	margin-right: 5%;
}

.button:nth-child(2){
	width: 150px;
    height: 50px;
}