body {
    margin: 0px;
    padding: 0px 10px 0px 10px;
    align-content:center;
    background-color:rgba(0, 0, 0, 0.87);
    font-family: 'Helvetica';
    line-height: 1.45;
}

header {
  color: #868686;
  background-color: #141414;
  padding:0;
  position: sticky;
  text-align: left;
  font-size: 12px;
}

a {
	text-decoration: none;
	color:#1DA1F2;
}
a:hover {
    color: #1DA1F2;
    font-weight:lighter;
}
b, strong {
  color: #1DA1F2;
}
.sticky {
  position:-webkit-sticky;
  position: sticky;
}

/*NAVIGATION*/
ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow:hidden;
  background-color: #141414e5;
  position:sticky;
  top: 0;
  width: 100%;
  z-index:5;
}
li {
  float: left;
}
li a {
  display:inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #141414;
}
/*END NAVIGATION*/




/*---------
BODY
----------*/
section {
    padding: 0;
    text-align: center;
}

.features {
    background:#141414;
    padding:10px 0px 30px 0px;
    color: #FFFFFF;
}


.bg-banner {
  background-image: url("/banner.jpg");
  z-index:1;
  -webkit-filter: blur(3px);
  filter:blur(3px);
  height: 300px; 
  background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:20%;
}
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -70%);
  z-index: 4;
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-languages {
  background-image: url("public/images/computer.jpg");
  -webkit-filter: blur(8px);
  filter:blur(8px);
  height: 450px; 
  background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:50%;
}
.languages-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.7); /* Black w/opacity/see-through */
  color: white;
  font-weight:lighter;
  border: 1px dashed #f1f1f1;
  position:absolute;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 80%;
  z-index:5;
  text-align: center;
}

.description {
  background-color:#1d1d1d;
  padding:5px 20px 20px 20px;
  color: #FFFFFF;
  font-weight:lighter;
  font-family:Cambria;
  text-align:left;
}

/*-----COLUMNS-----*/

.prefooter {
  background-color:#1d1d1d;
  padding:5px 20px 20px 20px;
  color: #FFFFFF;
  font-weight:lighter;
  font-family:Cambria;
  text-align:left;
}

.column {
  float: left;
  width: 25%;
  padding: 25px 5px 25px 25px;
  color:white;
  text-align:center;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}


button{
  margin:0;
  width:auto;  
  display:inherit;
  border-radius:25%;
  text-align:center;
  background-color:#868686;
   }

footer {
    background-color: #353535;
    padding: 10px 0 10px 10px;
    text-align: left;
    font-weight:lighter;
    font-size:12px;
    color: white;
}