/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Globale CSS elements */
* {font-family: "Radio Canada Big", sans-serif;}

body{
    background-color: #161b22;
}

h1,h2,p{
    color: #fff;
    margin: 0;
}

/* -CSS Classes- */
/* Header */
.logo-header{
    width: 6rem;
    padding: 1rem;
    transition: all 0.5s;
    text-decoration: none;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

header .navbar{
  padding-right: 3rem;
  gap: 3rem;
  display: flex;
}

header .navbar a{
  text-decoration: none;
}

/* Landingpage */
.name{
    font-weight: 30px;
    font-size: 75px;
}

.function{
    color: #848d97;
    font-size: 30px;
    font-weight: 600;
}

.aboutme{
    color: #848d97;
    padding-top: 1rem;
    font-size: 20px;
}

/* ImageCV */
.person-image{
    width: 32rem;
    left: 76rem;
    top: 7rem;
    position: absolute;
    border-radius: 8px;
    border-style: solid;
    border-color: #101318;
    border-width: 7px;
}

.content{
    padding: 4rem;
    padding-left: 3rem;
}

/* Both Buttons */
.buttons{
  display: flex;
}

/* Aboutmebutton */
.aboutmebutton-wrapper{
    padding-top: 3rem;
}

.aboutmebutton {
    background: #fff;
    border: none;
    padding: 10px 20px;
    display: inline-block;
    font-size: 25px;
    font-weight: 600;
    width: 290px;
    font-family: "Ubuntu", sans-serif;
    cursor: pointer;
    transform: skew(-21deg);
    color: #161b22;
  }
  
  span {
    display: inline-block;
    transform: skew(21deg);
  }
  
  .aboutmebutton::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    background: rgb(20, 20, 20);
    font-family: "Ubuntu", sans-serif;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s;
  }
  
  .aboutmebutton:hover {
    color: #fff;
  }
  
  .aboutmebutton:hover::before {
    left: 0;
    right: 0;
    opacity: 1;
  }