.app { height: 100vh; width: 100vw; background-size: 100% 100%; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; color: white; } body { /* overflow: hidden; */ /* color:black; */ max-width: 100vw; font-family: "Fira Sans", Arial, sans-serif; /* height: 100vh; */ width: 100vw; margin: 0; padding: 0; font-family: Arial, sans-serif; /* border: 1vh solide white; */ } header { width: 100%; /* background-color: #a4a4a4; */ /* padding: 20px 0; */ text-align: center; height: 15vh; /* border-bottom-width: 5px; */ /* border-bottom: 1cm; */ /* border-color: rgb(207, 0, 0); */ } .header-content { border-bottom: 4px solid; width: 100vw; height: 100%; display: flex; /* align-items: center; */ justify-content: space-between; /* padding-left: 0px; */ } .logo img{ height: 100%; /* Adjust the size as needed */ /* margin-right: 32.5vw; */ margin-left: 3vw; margin-right: 20vw; margin-bottom: 1vh; /* margin-left: 20px; */ } .pages { margin-left: 5vw; font-weight: 800; /* width: 5vw; */ /* margin-top: 5vh; */ align-self: center; /* height: 5vh; */ transition-property: transform; /* transition-duration: 200ms; */ transition: all 200ms ease; &:hover { transform: scale(1.1); border-bottom: 4px solid; } } .title { color:black; font-weight: 800; margin-left: 2vw; margin-right: 98vw; } .menu { float: right; } .language { align-items: center; display: flex; flex-direction: row; justify-content: right; width: 50vw; margin-top: 0vh; margin-left: 0vw; height: 100%; margin-right: 0vw; } /* .css-15bhy65 { /* margin-right: 20px; */ Button{ font-weight: 800; } .dark_mode { /* font-weight: 800; */ margin-right: 2vw; width: 8vw; } .hello { font-weight: 800; font-size: 6vw; } .description { font-size: 1vw; } .project { display: flex; flex-direction: column; align-items: flex-start; margin-top: 30vh; margin-right: 10vw; font-weight: 800; width: 50vh; height: 50%; align-self: start; /* margin-left: 30%; */ /* margin-left: 10%; */ /* margin-top: 15%; */ /* max-width: 60%; */ } .presentation { margin-top: 8%; margin-left: 15%; max-width: 40%; } .home { position: absolute; /* top: 50%; */ right: -100vw; /* height: 50%; */ animation: slideRight 2s ease forwards; display: flex; flex-direction: row; justify-content: space-between; } @keyframes slideRight { 0% { right: -100vh; /* Position initiale */ } 100% { right: 0; /* Position finale (tout à droite) */ } } .project_txt { font-weight: 800; font-size: 3vw; } .cv_button { font-family: 'IBM Plex Sans', sans-serif; margin-top: 10%; margin-left: 70%; } /* .css-cg7pzv { width: 20vw; } */ .project_group { font-size: 1vw; display: flex; flex-direction: row; /* width: 100vw; */ /* justify-content: center; */ /* align-self: left; */ align-items: center; } .project_list { vertical-align: baseline; margin-right: 2vw; /* justify-content: space-between; */ transition-property: transform; transition-duration: 500ms; &:hover { transform: scale(1.15); } } .project_list:hover { color: rgb(0, 127, 255); } .arrow { vertical-align: baseline; transition-property: transform; transition-duration: 700ms; transition: all 700ms ease; transform: scale(1.15); color: rgb(0, 127, 255); /* transition-property: transform; */ /* transition-duration: 700ms; */ /* padding-right: 10vh; */ opacity: 0; } .project_list:hover + .arrow { /* color: rgb(0, 127, 255); */ /* transition-property: transform; */ /* transition-duration: 700ms; */ opacity: 1; }