/*  This is your css file  */
/* add your styles here */

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

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  background-color: rgb(0, 0, 0);
  border-color: white;
  color: white;
  font-family: 'franklin-gothic-urw', sans-serif;
  overflow-x: hidden;
}

.lightmode {
  background-color: white;
  color: black;
  border: black;
}


a:link {
  color: inherit;
  text-decoration: none;
}
a:visited {
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: underline;
}

a:active {
  color: inherit;

}


.nav {
  font-size: 18px;
  font-family: 'franklin-gothic-urw', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  kerning: auto;
  position: relative;
  width: 100%;
  height: 45px;
  border-bottom: 1px solid;
  z-index: 1;
}

  .header {
    text-align: left;
    position: absolute;
    left: 20px;
    top: 11px;
    width: auto;
    height: auto; 
    z-index: 99;
  }

  .button-mode {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    width: 44px;
    height: 24px;
    background-color: inherit;
    color: inherit;
    border: 1px solid;
    cursor: pointer;
    
  }

    .square {
      position: absolute;
    }

      #square-dark {
        left: 2px;
        top: 50%;
        transform:translate(0%, -50%);
        width: 18px;
        height: 18px;
        background-color: white;
        z-index: 99;
      }

      #square-light {
        right: 1.5px;
        top: 50%;
        transform:translate(0%, -50%);
        width: 19px;
        height: 19px;
        background-color: black;
      }

  .links {
    position: absolute;
    top: 10px;
    left: 100%;
    z-index: 99;
  }

  .email {
    text-align: right;
    position: absolute;
    right: 245px;
  }

    .email-adress {
      text-align: right;
      position: absolute;
      right: 245px;
      width: auto;
      height: 20px;
      display: none;
      z-index: 100;
    }

  .linkedin {
    font-style: normal;
    text-align: right;
    position: absolute;
    right: 140px;
  }

  .insta {
    font-style: normal;
    text-align: right;
    position: absolute;
    right: 20px;
  }

@media screen and (min-width: 1024px) {
  .email + .email-adress {
    display: none;
  }
  
  .email:hover {
    display: ;
  }
  
  .email:hover + .email-adress {
    display: none;
  }
}

@media screen and (max-width: 1023px) {

  .links {
    position: absolute;
    top: 10px;
    left: 100%;
    width: auto;
    z-index: 99;
  }
}


@media screen and (max-width: 680px) {

  .links{
    display: none;
  }
  
  .button-mode {
    left: 100%;
    top: 50%;
    transform: translate(-64px,-50%);
  }

}


@media screen and (max-width: 480px) {
  .nav {
    font-size: 15px;
    position: relative;
    top: 0px;
    width: 100%;
    height: 45px;
    z-index: 999;
  }

    .header {
      top: 15px;
      left: 20px;
    }
}