<template>
  <div style="background-color: #f4f4f4;">
    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>

    <!-- "Mobile -->
    <v-row class="fluid hidden-md-and-up social-mobile-container"
      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
      </v-col>
    </v-row>

    <!-- "PurpleLine" -->
    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
    </v-row>

    <!-- "Mobile-Profile" -->
    <!-- "Profile picture" -->
    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
    </v-row>

    <!-- User Social Network Links -->
    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
      hidden-md-and-down>

      <!-- Facebook -->
      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
          <a href="https://www.facebook.com/GuillaumeMousseau222">
            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
              alt="Facebook"></v-img>
          </a>
        </v-col>
        <!-- Instagram -->
        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
          <a href="https://www.instagram.com/guillaumeaime/">
            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
              alt="Instagram"></v-img>
          </a>
        </v-col>
        <!-- Profile picture - Small -->
        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
          <v-row class="d-flex justify-center align-center">
            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
          </v-row>
        </v-col>

        <!-- TikTok -->
        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
          <a href="https://www.tiktok.com/@guillaumeaime">
            <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
              alt="TikTok"></v-img>
          </a>
        </v-col>




        <v-spacer class="hidden-xs"> </v-spacer>


      </v-row>

      <!-- User informations Name title and description  -->
      <v-row class="social-container-mobile">
        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
          <v-row class="d-flex justify-center">
            {{ name }}
          </v-row>
        </v-col>
        <v-spacer xs="12" sm="4"></v-spacer>
        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
          <v-row class="d-flex justify-center">
            {{ title }}
          </v-row>
        </v-col>
      </v-row>
      <v-row>
        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
          class="social-icon-group-mobile">
          <v-expansion-panels style="min-width: 320px;">
            <v-col cols="12" offset="-1">
              <v-expansion-panel class="background-pink text-justify" style="color: white;"
                text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                title="À propos : Ma mission est claire :">


              </v-expansion-panel>
            </v-col>
          </v-expansion-panels>
        </v-container>
      </v-row>
    </v-container>

    <!-- Bannière Pc -->
    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
      hidden-sm-and-up>
      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
      </v-col>
    </v-row>
    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
      hidden-sm-and-up>
    </v-row>

    <!-- "Core (Menu / Center / Donation)" -->
    <v-row>
      <!-- "Menu" -->
      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
        <v-col style="margin: 0;">
          <v-row class="Hutopy-menu-sticky-mobile">
            <v-spacer></v-spacer>
            <v-col>
              <v-container style=" overflow-y: hidden;">
                <!-- Nav-Btn -->
                <v-col cols="12" class="px-0">
                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
                  <v-list dense class="main-background">
                    <v-list-item v-for="item in navigationItems" :key="item.link">
                      <router-link :to="item.link">
                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
                          outlined="false">
                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
                          {{ item.text }}
                        </v-btn>
                      </router-link>
                    </v-list-item>
                  </v-list>
                </v-col>
              </v-container>
            </v-col>
          </v-row>
          <v-row style="height: 3000px;"></v-row>
        </v-col>
      </v-col>

      <!-- Profile Info Picture name title & description -->
      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
          <v-container>
            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
            <!-- User informations Name & title  -->
            <v-container class="background-profile-container" style="margin-top: -8%;">
              <v-row>
                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
                  <h1 class="name-info">{{ name }}</h1>
                </v-col>
                <v-col></v-col>
              </v-row>
              <v-row>
                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
                  <h1 class="occupation-info">{{ title }}</h1>
                </v-col>
                <v-col></v-col>
              </v-row>

              <!-- User Social Network Links -->
              <v-row>
                <v-spacer></v-spacer>
                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
                  <v-row>
                    <a href="https://www.facebook.com/GuillaumeMousseau222">
                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
                        alt="Description image 2">
                    </a>
                    <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
                        alt="Description image 2">
                    </a>

                    <a href="https://www.tiktok.com/@guillaumeaime">
                      <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
                        alt="Description image 2">
                    </a>
                  </v-row>
                </v-col>
                <v-col background-color="primary"></v-col>
              </v-row>

              <!-- Description  -->
              <v-row>
                <v-container
                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
                  <v-expansion-panels style="min-width: 320px;">
                    <v-col cols="12" offset="-1">
                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
                        text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                        title="À propos : Ma mission est claire :">
                      </v-expansion-panel>
                    </v-col>
                  </v-expansion-panels>
                </v-container>
              </v-row>
            </v-container>
          </v-container>
        </v-container>


        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu> -->


        <!-- Card youtube balado -->
        <v-container>
          <v-card class="flow-menu m-0 youtube-card">
            <!-- Title, date and btn -->
            <v-col>
              <v-row>
                <v-col class="text-center">
                  <h1 class="card-title">
                    MON PREMIER BALADO</h1>
                </v-col>

                <!--<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                  </v-btn>          (a intégrer)
                </v-col> -->
              </v-row>

            </v-col>

            <!-- Card core Video/image & text -->
            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
              <v-container>
                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowfullscreen></iframe>

                <!-- Date -->
                <v-row class="text-right">
                  <v-col>
                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
                      24-04-2024
                    </h1>
                  </v-col>
                </v-row>


                <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
                  présenter
                  mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
                  particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
                  partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
                  le
                  Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
                  agence
                  créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
                  personnelle,
                  "Guillaume aime", où je partage tout ce qui me passionne.</p>


                <!-- Like dislike commment Section -->
                <div style="height: 20px;"></div>
                <div
                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>
                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <!-- Comments -->
                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
              </v-container>
            </div>
          </v-card>
        </v-container>


        <!-- Card nouvelle boutique -->
        <v-container>
          <v-card class="flow-menu m-0 youtube-card">
            <!-- Title, date and btn -->
            <v-col>
              <v-row>
                <v-col class="text-center">
                  <h1 class="card-title">
                    NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
                </v-col>

                <!--<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                  </v-btn>          (a intégrer)
                </v-col> -->
              </v-row>

            </v-col>

            <!-- Card core Video/image & text -->
            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
              <v-container>
                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
                  title="Guillaumem"></v-img>

                <!-- Date -->
                <v-row class="text-right">
                  <v-col>
                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
                      24-04-2024
                    </h1>
                  </v-col>
                </v-row>


                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
                  boutique
                  à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
                  le
                  savoir-faire québécois !

                  J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
                  Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.

                  Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
                  Carl
                  pour ce projet!</p>


                <!-- Like dislike commment Section -->
                <div style="height: 20px;"></div>
                <div
                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>
                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <!-- Comments -->
                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
              </v-container>
            </div>
          </v-card>
        </v-container>

        <!-- Card nouvelle boutique -->
        <v-container>
          <v-card class="flow-menu m-0 youtube-card">
            <!-- Title, date and btn -->
            <v-col>
              <v-row>
                <v-col class="text-center">
                  <h1 class="card-title">
                    C'EST PARTI POUR 2024!</h1>
                </v-col>
                <!--
                <v-col class="text-right">
                 <v-btn class="btn-card-options" flat tile elevation="0">
                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                  </v-btn>          (a intégrer)
                </v-col>  -->
              </v-row>

            </v-col>

            <!-- Card core Video/image & text -->
            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
              <v-container>
                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
                  title="Guillaumem"></v-img>

                <!-- Date -->
                <v-row class="text-right">
                  <v-col>
                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
                      22-04-2024
                    </h1>
                  </v-col>
                </v-row>

                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
                  retour au
                  travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
                  lumière les
                  entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
                  n'hésite
                  pas à me contacter.</p>

                <!-- Like dislike commment Section -->
                <div style="height: 20px;"></div>
                <div
                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>
                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <!-- Comments -->
                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
              </v-container>
            </div>
          </v-card>
        </v-container>


      </v-col>

      <!-- "Large-Monitor-RightCol" Donation -->
      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
        <v-row>
          <v-col>
            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
              <!-- Donnation -->
              <v-card style="border-radius: 20px;">
                <v-container>
                  <v-row class="mb-0"
                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
                      JE SOUTIENS!
                    </v-card-title>
                  </v-row>
                  <StripePayment creator-id="d022276f-0865-4d01-8100-c088f9bf85ab"></StripePayment>
                </v-container>
              </v-card>
            </v-container>
            <v-container style="height: 3000px;">
            </v-container>
          </v-col>
          <v-spacer>
          </v-spacer>
        </v-row>
      </v-col>
    </v-row>

    <!-- "Mobile" Donation -->
    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
      style="background-color: #6b0065; margin-top: 30px; text-align: center;">

      <!-- Barre cliquable pour ouvrir le drawer -->
      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
        JE SOUTIENS
      </v-btn>
    </v-col>

    <!-- Drawer du bas -->
    <template>
      <div>
        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
            <h1 class="text-soutiens">JE SOUTIENS</h1>
            <StripePayment creator-id="d022276f-0865-4d01-8100-c088f9bf85ab"></StripePayment>
          </v-container>
        </v-bottom-sheet>

      </div>
    </template>

    <FooterLayout></FooterLayout>
  </div>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import StripePayment from '../StripePayment.vue';
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
let name = 'Guillaume Mousseau'
let title = 'Créateur de contenus'
let drawerbottom = ref(false)

let navigationItems = [
  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
];
</script>

<style scoped>
.invert-color {
  filter: invert(1);
}


.Hutopy-menu-sticky-mobile {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-top: -40px;
}

.sticky-bottom-label {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-top: 20px;
}

.sticky-top-label {
  position: sticky;
  bottom: 0;
  right: 10%;
  width: 100%;
  z-index: 1000;
}

.text-soutiens {
  margin-bottom: 15px;
  color: white;
  font-size: 1.5rem;
  letter-spacing: 7px;
  text-align: center;
}

.name-info {
  margin-top: -10px;
  margin-left: 15%;
}

.occupation-info {
  margin-left: 15%;
  font-size: large;
}

.name-info-mobile {
  margin-left: 22px;
  font-size: 1.3rem
}

.main-background {
  background-color: #f4f4f4;
}

.profile-container {
  margin-top: -16%;
}

.btn-custom {
  width: 100%;
  background-color: transparent;
}

.background-profile-container {
  background-color: #ececec;
  color: white;
  border-top: 3px solid #a30e79;
  border-right: 3px solid #a30e79;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
}

.background-pink {
  background-color: #cc6f91;
  color: white;
  font-weight: 400;
}

.label-text {
  font-weight: 400;
  margin-left: 3%;
  font-size: 1rem;
}

.profile-name {
  margin-top: -15%;
}

.socialicons {
  width: 35px;
  max-width: 100px;
  margin-top: 3px;
  margin-left: 40px;
}

.socialicons-mobile {
  width: 35px;
  max-width: 100px;
  margin-top: 27px;
  margin-left: 20px;
}

.youtube-card {
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 15px;
  background-color: #f4f4f4;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
}

.card-title {
  font-size: 1.4rem;
  margin-top: 10px;
}

.card-date {
  margin-left: 10px;
  margin-top: -18px;
  margin-bottom: -20px;
  font-size: .8rem;
}



.social-container {
  background-color: #006d77;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  font-size: 1.7rem;
  font-weight: 600;
  color: white;
}

.social-container2 {
  background-color: #0baab2;
  border-bottom-right-radius: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  color: white;
}

.social-container-mobile {
  background-color: #006d77;
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  z-index: 1000;
  margin: auto;
  text-align: center;
}

.social-container2-mobile {
  background-color: #0baab2;
  z-index: 1000;
  font-size: 1.2rem;
  font-weight: 500;
  color: white;
}

.social-icon-group-mobile {
  background-color: #0baab2;
}

.mini-profile-picture {
  border-radius: 100px;
}

.btn-card-options {
  background-color: #f4f4f4;
  width: 50px;
  margin-left: -12px;
  margin-top: 10px;
}

.mobile-profile-picture-creator {
  border-radius: 100px;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  max-width: 150px;
  border: 4px solid white;
  z-index: 1000;
}

.mobile-header {
  height: 50px;
  margin-left: -13%;
  margin-top: 6%;
}

.h1-navigation {
  text-align: center;
  font-weight: 600;
  margin-bottom: 10%;
}

.mobile-profile-picture {
  height: 40px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #a30e79;
  margin-right: 10px
}

.profile-banner {
  margin-top: 25px;
  min-height: 200px
}

.v-navigation-drawer {
  max-height: 100vh;
}

@media (min-width: 150px) and (max-width: 474px) {
  .mobile-profile-picture-creator {
    transform: scale(1.5) translateY(-30%) translateX(0%);
  }

  .socialicons-mobile {
    width: 35px;
    max-width: 100px;
    margin-top: 0px;
    margin-left: 20px;
  }
}


@media (min-width: 475px) and (max-width: 599px) {
  .socialicons-mobile {
    width: 35px;
    max-width: 100px;
    margin-top: 0px;
    margin-left: px;
  }

  .mobile-profile-picture-creator {
    transform: scale(1.5) translateY(-30%) translateX(0%);
  }

  .profile-container-mobile {
    width: 110%;
    margin-left: -3%;
    margin-top: -112px;
  }

  .occupation-info {
    font-size: 1rem;
  }

  .card-youtube {
    min-height: 250px;
  }

  .name-info-mobile {
    font-size: 1.6rem;
  }
}

@media (min-width: 599px) and (max-width: 749px) {
  .mobile-profile-picture-creator {
    transform: scale(1.5) translateY(25%) translateX(0%);
  }

  .profile-container {

    width: 110%;
    margin-left: -3%;
  }

  .profile-container-mobile {

    width: 110%;
    margin-left: -3%;
    margin-top: -110px;
  }

  .name-info {
    font-size: 1.2rem;
  }

  .occupation-info {
    font-size: 1rem;
  }

  .card-youtube {
    min-height: 330px;
  }
}

@media (min-width: 750px) and (max-width: 960px) {
  .mobile-profile-picture-creator {
    transform: scale(1.8) translateY(25%) translateX(0%);
  }

  .profile-container {
    width: 110%;
    margin-left: -3%;
  }

  .profile-container-mobile {
    width: 110%;
    margin-left: -3%;
    margin-top: -110px;
  }

  .name-info {
    font-size: 1.2rem;
  }

  .occupation-info {
    font-size: 1rem;
  }

  .card-youtube {
    min-height: 425px;
  }
}

@media (min-width: 960px) and (max-width: 1280px) {
  .middle-col {
    margin-left: -30px;
  }

  .text-soutiens {
    font-size: 1.2rem;
    letter-spacing: 5px;
  }

  .profile-container {
    margin-top: -185px;
    min-width: 480px
  }

  .card-youtube {
    min-height: 270px;
  }

  .Je-soutien-container {
    min-width: 325px;
    margin-left: -35px;
  }

  .mobile-profile-picture-creator {
    transform: scale(1.3) translateY(25%) translateX(-50px);
  }

  .name-info {
    font-size: 1.2rem;
    margin-left: 20px;
    margin-top: -6px
  }

  .occupation-info {
    margin-left: 40px;
    margin-top: -8px
  }

  .social-container {
    margin-left: 80px;
    min-width: 270px;
    max-height: 40px
  }

  .social-container2 {
    margin-left: 50px;
    min-width: 250px;
    max-height: 35px
  }

  .socialicons {
    width: 34px;
    max-width: 100px;
    margin-top: 15px;
    margin-left: 25px;
  }
}

@media (min-width: 1280px) and (max-width: 1600px) {
  .text-soutiens {
    font-size: 1.3rem;
    letter-spacing: 8px;
  }

  .mobile-profile-picture-creator {
    transform: scale(1.3) translateY(25%) translateX(-50px);
  }

  .profile-container {
    margin-top: -180px;
  }

  .card-youtube {
    min-height: 290px;
  }

  .menu-col {
    margin-left: -4%;
  }

  .Je-soutien-container {
    min-width: 350px;
  }

  .name-info {
    font-size: 1.2rem;
    margin-left: 20px;
    margin-top: -6px
  }

  .social-container {
    margin-left: 90px;
    min-width: 350;
    max-height: 40px
  }

  .occupation-info {
    margin-left: 70px;
    margin-top: -8px
  }

  .social-container2 {

    margin-left: 40px;
    min-width: 290px;
    max-height: 35px
  }

  .socialicons {
    width: 34px;
    max-width: 100px;
    margin-top: 15px;
    margin-left: 25px;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  .text-soutiens {
    font-size: 1.3rem;

  }

  .mobile-profile-picture-creator {
    transform: scale(1.4) translateY(25%) translateX(-40px);
  }

  .profile-container {
    margin-top: -171px;
  }

  .card-youtube {
    min-height: 355px;
  }

  .menu-col {
    margin-left: -4%;
  }

  .Je-soutien-container {
    min-width: 400px;
  }

  .name-info {
    font-size: 1.5rem;
    margin-top: -4px;
    margin-left: 35px;
  }

  .occupation-info {
    font-size: 1.3rem;
    margin-left: 75px;
    margin-top: -2px
  }

  .social-container2 {
    margin-left: 70px;
    min-width: 300px;
  }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  .text-soutiens {
    font-size: 1.3rem;
  }

  .profile-container {
    margin-top: -160px;
  }

  .card-youtube {
    min-height: 380px;
  }

  .Je-soutien-container {
    min-width: 400px;
  }

  .mobile-profile-picture-creator {
    transform: scale(1.4) translateY(25%) translateX(-40px);
  }

  .name-info {
    font-size: 1.5rem;
    margin-left: 35px;
    margin-top: -4px;
  }

  .social-container {
    margin-left: 100px;
  }

  .occupation-info {
    font-size: 1.3rem;
    margin-left: 110px;
    margin-top: -4px
  }

  .social-container2 {
    margin-left: 30px;
    min-width: 360px;
  }

  .socialicons {
    width: 38px;
    max-width: 100px;
    margin-top: 13px;
    margin-left: 40px;
  }
}

@media (min-width: 2560px) {



  .mobile-profile-picture-creator {
    transform: scale(1.5) translateY(25%) translateX(-20px);
  }

  .card-youtube {
    min-height: 380px;
  }

  .text-soutiens {
    font-size: 1.5rem;
  }

  .name-info {
    font-size: 2rem;

  }

  .social-container {
    margin-left: 140px;
  }

  .social-container2 {
    margin-left: 130px;
  }

  .occupation-info {
    font-size: 1.5rem;
    margin-left: 65px;
    margin-top: -6px
  }

  .socialicons {
    width: 45px;
    max-width: 100px;
    margin-top: 15px;
    margin-left: 40px;
  }
}
</style>