/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
* A better looking default horizontal rule
*/

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
  resize: vertical;
}


/* ==========================================================================
Author's custom styles
========================================================================== */

html, body{
  height:100vh;
  position:relative;
}

body{
  font-family: 'Inconsolata', monospace;
  font-size: 15px;
  color: #015940;
}

.bgimg-banner{
  background-image: url('../img/background-banner.webp');
}
.bgimg-web{
  background: url(../img/background-web.png);
}
.bgimg-win{
  background: url(../img/background-win.jpg);
}
.bgimg-pra{
  background: url(../img/background-pra.jpg);
}
.bgimg-pro{
  background: url(../img/background-pro.png);
}
.bgimg-digit{
  background: url(../img/background-digit.jpg);
}
.bgimg-footer{
  background-image: url('../img/background-footer.jpg');
}

.parallex{
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
}
.opacity{    
  background-color: rgba(255, 255, 255, 0.65);
}
.ph100 {
  min-height: 100vh;
}
.ph30 {
  min-height: 30vh;
}
.ph15 {
  min-height: 20vh;
  padding: 0 0 15px 0;
}
.pcenter{
    display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.pcenter1{
    display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper {
  margin: 0 auto;
  width: 70%;
}

h1, h2, h3{
  text-transform: uppercase;
}
h2, h3{
  margin: 0;
  font-family: 'Big Shoulders Stencil Display', cursive;
  font-size: 2rem;
  letter-spacing: 6px;
}
h3{
  padding: 0 0 20px 0;
  font-size: 1.5rem;
}
h4{
  text-align: center;
  margin: 0;
  font-family: 'Big Shoulders Stencil Display', cursive;
  font-size: 1.2rem;
  letter-spacing: 6px;
}

/*================header=======================*/
header{
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  top:0;
  z-index: 10;
  width: 100%;
}
header .wrapper{
  display: flex;
  justify-content: space-between;
}
.logo {
  /*padding: 5px;*/
  display: flex;
  align-items: center;
}
.logo img{
  height: 40px;
}
nav{
  display: flex;
  justify-content: space-around;
  width: 70%;
  align-items: center;
}
nav a{
  padding: 5px 10px;
  background: #02E6A5;
  border-radius: 8px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 6px;
}
nav a:hover{
  background-color: #fff;
  color: black;
}

/*================banner=======================*/
.banner-text{
  text-align: center;
}
.banner-text h2{
  text-align: center;
  font-size: 4rem;
}
article{
  width: 70%;
  padding: 10px 0 10px 0;
}
article img{
  float: left;
  margin: 0 10px 10px 0;
}
.right-align{
  margin: 0 0 0 auto;
}

/*================PRO=======================*/
#readmore-text{
  display: none;
}

/*================team=======================*/
.webdev h3{
  text-align: center;
  }
.team{
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.collega img{
  height: 60px;
  border: 4px solid #015940;;
  border-radius: 50%;
}

/*==================footer=========================*/
footer h3{
  padding-top: 20px;
  text-align: center;
}

footer .pcenter{
  justify-content: space-between;
}

.adres, .social{
  width: 30%;
}

footer ul{
  list-style: none;
  font-size: 1.3rem;
}

footer .social{
  display: flex;
  justify-content: flex-end;
  font-size: 2rem;
}

footer .social a{
  padding: 10px;
  color: #015940;
}