* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'HackNerdFont';
  src: url("fonts/HackNerdFont-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HackNerdFont';
  src: url("fonts/HackNerdFont-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}@font-face {
  font-family: 'HackNerdFont';
  src: url("fonts/HackNerdFont-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}@font-face {
  font-family: 'HackNerdFont';
  src: url("fonts/HackNerdFont-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}


html {
    height: 100%;
}

body {
	margin: 0;
    padding: 0;
    font-family: HackNerdFont;
    background-color: #1a1a20;
    color : beige;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


header {
  width: 100%;
  background-color: #101010;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: beige;
}
h1 a {
  text-decoration: none;
  color: beige;
}

  .liens {
    display: inline-block;
    margin-left: 10px;
  }
    .liens a {
      text-decoration: none;
      color: beige;
    }
      .contactLink {
        color : #00A0FF;
      }
      .accueilLink:hover {
        color: #00A0FF;
      }
      .aproposLink:hover {
        color: #6060FF;
      }
      .projetsLink:hover {
        color: #A060FF;
      }      
      .contactLink:hover {
        color: #A000FF;
      }


main {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  text-align: center;
}

  h2 {
    font-size: xx-large;
    margin-bottom: 30px;
  }

  .postNom {
    font-size: small;
    margin-bottom: 0;
    text-align: left;
  }
  .nom {
    font-size: 40px;
    margin-top: 0;
    text-align: left;
    color: #00A0FF;
  }
  .etudes {
    color: #A050FF;
  }

  .sisr {
    color: #FF5000;
  }

  .mainTitle {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .mainText {
    font-size: large;
    margin-bottom: 100px;
  }

  .projetsList {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .projetsLiens {
    text-decoration: none;
    color: #A050FF;
  }

  .vpsTitre:hover, .glpiTitre:hover, .nextcloudTitre:hover {
    cursor: pointer;
    font-size: x-large;
    color: #00A0FF;
    background-color: #333;
    transition: background-color 0.3s ease;
  }

  .glpiTxt, .nextcloudTxt, .vpsTxt {
    display: none;
    background-color: #333;
    color: beige;
    text-align: left;
    line-height: 30px;
    font-size: medium;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .aproposTxt {
    color: beige;
    text-align: left;
    line-height: 30px;
    font-size: medium;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .vpsFlecheBas, .glpiFlecheBas, .nextcloudFlecheBas {
    text-align: center;
    font-size: x-large;
  }

  .vpsFlecheBas:hover, .glpiFlecheBas:hover, .nextcloudFlecheBas:hover {
    color: #00A0FF;
    cursor: pointer;
  }

  .mail {
    font-size: large;
    margin-top: 20px;
    color: #FF2020;
  }
  .mail a {
    text-decoration: none;
    color: beige;
  }
  .mail a:hover {
    color: #FF2020;
  }
  .linkedin {
    font-size: large;
    margin-top: 20px;
    color: #20A0FF;
  }
  .linkedin a {
    text-decoration: none;
    color: beige;
  }
  .linkedin a:hover {
    color: #20A0FF;
  }

footer{
  width: 100%;
  background-color: #101010;
  color: beige;
  text-align: center;
	height: 50px;
}

footer a {
  align-items: center;
  text-decoration: none;
  color: beige;
}