/* STYLING

    * Color Sceme*
    #0054B9;
    #00164D;
    #2EBEC0;
    #0972A8;

*/

body {
  background-color: #00164D; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #2EBEC0, #00164D);
  color: #fff;
  text-shadow: 2px 2px grey;
}

a {
  color: #fff;
  text-decoration: none;
}

a:visited {
  color: #fff;
  text-decoration: none;
}

a:active {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

/* GENERAL */
.wrapper {
  position: relative;
}

/* NAV */
#maranav {
  position: absolute;
  top: 600px;
  width: 100%;
  padding-left: 40%;
  background-color: lightgrey;
  opacity: 0.5;
  height: auto;
  color: #00164D;
  background-image: linear-gradient(to right, rgba(166,168,255,0.4), rgba(255,255,255,0.1));
}

@media (max-width: 1225px) {

  #maranav {
    position: absolute;
    top: 500px;
    padding-left: 35%;
  }
}

@media (max-width: 1050px) {

  #maranav {
    position: absolute;
    top: 400px;
    padding-left: 30%;
  }
}

@media (max-width: 900px) {

  #maranav {
    position: absolute;
    top: 300px;
    padding-left: 25%;
  }
}

@media (max-width: 750px) {

  #maranav {
    position: absolute;
    top: 250px;
    padding-left: 20%;
  }
}

@media (max-width: 650px) {

  #maranav {
    position: absolute;
    top: 200px;
    padding-left: 15%;
  }
}

@media (max-width: 550px) {

  #maranav {
    position: absolute;
    top: 200px;
    padding-left: 15%;
  }
}

@media (max-width: 460px) {

  #maranav {
    position: absolute;
    top: 200px;
    padding-left: 10%;
  }
}

@media (max-width: 400px) {

  #maranav {
    position: absolute;
    top: 100px;
  }
}

@media (max-width: 300px) {

  #maranav {
    position: absolute;
    top: 100px;
  }
}

/* special button */
.sticky-button {
  /* position: sticky;
  bottom: 0;
  right: 15px; */
}

/* HEADER */
header {
  /* background-image: linear-gradient(to right, #2EBEC0, #00164D); */
}

header img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.headtext {
  position: absolute;
  top: 50px;
  left: 10%;
  font-family: 'Exo 2', sans-serif;
  color: #fff;
  text-shadow: 2px 2px grey;
  font-size: 4rem;
  font-weight: 600;
  writing-mode: vertical-lr;
}

@media (max-width: 1200px) {

  .headtext {
    left: 5%;
    font-size: 3rem;
  }
}

@media (max-width: 1100px) {

  .headtext {
    top: 25px;
    left: 2%;
  }
}

@media (max-width: 660px) {

  .headtext {
    top: 0;
    left: 0;
    font-size: 2.5rem;
  }
}

@media (max-width: 520px) {

  .headtext {
    font-size: 2rem;
  }
}

@media (max-width: 420px) {

  .headtext {
    font-size: 1.5rem;
  }
}

@media (max-width: 320px) {

  .headtext {
    font-size: 1.25rem;
  }
}

@media (max-width: 260px) {

  .headtext {
    font-size: 1rem;
  }
}

/* MAIN */
main {
  margin-top: 85px;
}

.progress {
  background-color: inherit;
}

h1 {
  font-family: 'Exo 2', sans-serif;
  text-align: center;
  padding-top: 15px;
}

#design {
  min-height: 350px;
}

#gaming {
  min-height: 350px;
}

#photo {
  min-height: 350px;
}

/* FOOTER */

#footer-content {
  height: 200px;
}