@font-face {
  font-family: 'Excon';
  src: url('../font/Excon-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Ranade';
  src: url('../font/Ranade-Light.ttf') format('truetype');
}

body, .link, h1, h2, .bio {
  transition: background-color 0.3s, color 0.3s;
}

body{
    background-color: #181B1E;
    font-family: 'Ranade', sans-serif;
}

body.dark-mode{
    background-color: #F3F7F8;
}

header{
    position: relative
}

.presentation {
    padding-top: 5vw;
}

.profilPicture{
    max-width: 60vw;
    display: block;
    margin: auto;
    box-shadow: 0 1vw 5vw #7A154B;
    border-radius: 50%;
}

.profilPicture:hover {
  transform: scale(1.025);
  transition: transform 0.15s ease-in-out;
}

button {
    position: absolute;
    right: 0vw;
    margin: 2.5vw;
    padding: 1.5vw;
    border: none;
    color: #F3F7F8;
    border-radius: 0.625rem;
    background-color: #2e3134;
    z-index: 100;
    cursor: pointer;
}

h1 {
    padding: 2vw;
    text-align: center;
    font-family: 'Excon', sans-serif;
    color: #F3F7F8;
    font-size: 1.25rem;
}

body.dark-mode h1 {
    color : #181B1E;
}

.bio {
    color: #F3F7F8;
    text-align: left;
    align-items: center;
    margin: 0 7.5vw ;
    font-size: 0.875rem;
}

body.dark-mode .bio{
    color : #181B1E;
}

ul{
    list-style: none;
    padding: 2.5vw 0;
    display: flex;
    flex-direction: column;
    gap: 4vw;
}

h2 {
    color: #181B1E;
    font-size: 0.938rem;
    white-space: nowrap;
}

body.dark-mode h2 {
    color: #F3F7F8;
}

.link {
    background-color: #F3F7F8;
    border-radius: 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 60vw;
    padding: 1vw;
}

body.dark-mode .link {
    background-color: #181B1E;
}

.link:hover, body.dark-mode .link:hover,
.link:active, body.dark-mode .link:active{
    background-color: #7A154B;
    box-shadow: 0 1vw 3vw #7A154B;
    width: 65vw;
}



.link a {
    display: flex;
    align-items: center;
    gap: 5vw;
    text-decoration: none;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.link:hover a h2, .link:active a h2 {
    color: #F3F7F8;
}

.logo {
    max-width: 7.5vw;
}

footer {
    color: #7A154B;
    text-align: center;
    font-family: 'Excon', sans-serif;
    font-size: 0.938rem;
}

.hidden {
    display: none;
}

@media screen and (min-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 5vw;
        row-gap: 1vw;
        align-items: center;
        margin: 0 5vw;
        height: 100%;
    }

    button {
        right: -50vw;
    }

    .presentation {
        grid-column: 1;
        width: 45vw;
    }

    .profilPicture{
        max-width: 20vw;
    }

    .bio {
        color: #F3F7F8;
        text-align: left;
        align-items: center;
        margin: 0 7.5vw ;
    }

    main {
        grid-column: 2;
        width: 45vw;
        padding-top: 3vw;
        justify-items: flex-start;
    }

    ul {
        padding: 1.5vw 0;
        gap : 1.5vw;
        width: 30vw;
    }

    .link {
        border-radius: 0.625rem;
        max-width: 25vw;
    }
    
    .link:hover, body.dark-mode .link:hover,
    .link:active, body.dark-mode .link:active{
        max-width: 26vw;
    }


    .logo {
        max-width: 2.5vw;
    }

    footer {
        grid-column: 1 / 3;
    }
}