body {
    background-color: black;
    color: white;
    margin: 0;
}

header {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: -1;
    font-family: "Molle", cursive;
    text-align: center;
    color: white;
    height: 100vh;
    background-image: url(img/milkywaybg.jpg);
    background-size: cover;;
}

header p {
    font-size: 2.5rem;
    text-align: left;
    backdrop-filter: blur(10px);
    padding: 3vw;
    border-radius: 30px;
    grid-row-start:1;
    grid-column-start:1;
}

.header-position {
    margin-top:20vh;
    display: flex;
    height:10vh;
    justify-content:center;
    align-items:center;
}

header form{
    margin:auto;
    border:white solid 5px;
    border-radius:15px;
    width:fit-content;
}

header input[type="search"]{
    width:40vw;
    border:none;
    background-color:transparent;
    color:white;
    height:2vh;
    padding:3vmin;
    font-size:1.25rem;
}

::placeholder {
    color:white;
    font-style:italic;
}

header input[type="submit"]{
    color:white;
    background-color:transparent;
    border:none;
    border-radius:15px;
    padding:1vmin;
    font-size:1.25rem;
    transition:all ease 0.2s;
}

header input[type="submit"]:hover{
    background-color:#FBB518;
    color:black;
}

header img{
    width:15vw;
    margin-left:20vw;
}

.down-arrow {
    position: absolute;
    top: calc(100vh - 60px);
    left: calc(50% - 14px);
    width: 0;
    height: 30px;
    border: 2px solid;
    border-radius: 2px;
    animation: float 2s infinite ease-in-out;
}

.down-arrow:after {
    content: "";
    position: absolute;
    top: 12px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-bottom: 4px solid;
    border-right: 4px solid;
    border-radius: 4px;
    transform: rotateZ(45deg);
}

@keyframes float {
    0% {
        margin-top: 0;
    }

    50% {
        margin-top: 7px;
    }

    100% {
        margin-top: 0;
    }
}

/*nav header*/
.headernav ul {
    padding: 0;
    text-align: center;
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    margin-bottom:5vh;
}

.headernav a {
    text-decoration: none;
    color: black;
    background-color: white;
    padding: 0.5vw 1vw;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 5px rgba(255, 202, 89, 0.5);
    transition: ease 0.2s background-color;
}

.headernav a:hover {
    background-color: #FBB518;
}

.headernav li:hover {
    animation: floathover 1.2s infinite ease-in-out;
}

@keyframes floathover {
    0% {
        transform: translateY(-2.5px);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(-2.5px);
    }
}

.headernav .imp0 {
    font-size:1vmax;
}

.headernav .imp1 {
    font-size: 1.5vmax;
}

.headernav .imp2 {
    font-size: 2vmax;
}

.menu {
    top: -100px;
}


/*slider*/

.slider h1{
    font-size:2.5vmax;
    margin: 0;
    padding-top: 50px;
}

.slider p{
    font-size:1vmax;
}

.slider {
   margin-bottom: 150px;
   display: grid;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-rows: 15vh 10vh auto 40vh;
}

.checkered-bg {
    grid-column: 1/2;
    grid-row: 1/5;
    background: url(img/checkered-repeat.jpg);
    background-repeat: repeat;
    background-size: 400px;
}

.column-right {
    grid-column: 3;
    grid-row: 1/5;
}

.js-slider {
    position: relative;
    width: 50vw;
    height: 30vw;
    overflow: hidden;
    margin: 2vmax;
    box-shadow: 0px 0px 30px 7px #0FA5C5;
    border-radius: 30px;
}

.js-sections {
    position: relative;
    display: flex;
    width: max-content;
    left: -50vw;
    transition: left 1s ease;
}

.js-section {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position: relative;
    text-align:center;
    width: 50vw;
    height: 30vw;
}

.js-section p, .js-section h2 {
    backdrop-filter: blur(10px);
    padding:2%;
    border-radius:15px;
}

.pso {
    background:url("img/pso.jpg");
    background-size:cover;
}

.vaisseau {
    background:url("img/ladystardust.jpg");
    background-size:cover;
}

.detente {
    background:url("img/spa.jpg");
    background-size:cover;
}

button {
    background-color:black;
    color:white;
    width: 3vw;
    padding:1vh;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    border:none;
    transition:all ease 0.2s;
    font-size:1.5vw;
}

button:hover {
    transform:translateY(-3px);
    background-color: #0FA5C5;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buttonwrap {
    display: flex;
    gap: 52vw;
    position: absolute;
}


/*main*/

.top-btn a{
    width:10px;
    height:10px;
    border-top:solid white 5px;
    border-right:solid white 5px;
    transform:rotate(-45deg);
    text-decoration:none;
    padding:10px;
    display:inline-block;
}

.top-btn {
    display:flex;
    justify-content:center;
    align-items:center;
    position:fixed;
    z-index:5;
    bottom:-100px;
    right:0;
    transition:ease 0.3s;
    margin-right:20px;
    margin-bottom:20px;
    padding:10px;
}

.top-btn:hover{
    background-color:#FBB518;
}


.skip-link{
    clip: rect(1px, 1px, 1px, 1px);
    display: block;
    height: 1px;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    text-decoration: underline;
    top: 1rem;
    left: 1rem;
    width: 1px;
    z-index: 999;
    background-color:white;
    color:black;
}
.skip-link:focus{
    clip: auto;
    height: auto;
    overflow: visible;
    width: auto;
}	

main {
    border:none;
    padding: 0;
    background-color: black;
    color: white;
    width: 100%;
    max-width:100%;
    height: 100%;
    margin-top: 120vh;
    text-align: center;
    box-shadow: 0px -10px 25px 10px rgba(0,0,0,0.5);
}

main p {
    padding-top: 10px;
}

/*sections colorées*/
.position {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 2fr 1fr 5fr;
    height:100%;
}

.position p {
    width: 50vw;
}

.left {
    padding: 75px;
    transform: skewY(10deg);
}

.right {
    padding: 75px;
    transform: skewY(-10deg);
}


.left h1 {
    margin-right: auto;
    grid-row: 1;
    grid-column: 1;
}

.right h1 {
    grid-row: 1;
    grid-column: 2;
    margin-left: auto;
}

.left p {
    grid-row: 2;
    grid-column: 1;
    text-align: left;
}

.right p {
    grid-row: 2;
    grid-column: 2;
    text-align: right;
    justify-self:end;
}

.shape {
    height: 110vh;
    box-shadow: -15px 0px 37px 1px rgb(0, 0, 0);
}

.shape img {
    width: 25vw;
    position: relative;
    border-radius:30px;
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5); 
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
}

.right img {
    grid-row: 1/3;
    grid-column: 1;
}

.left img {
    grid-row: 1/3;
    grid-column: 2;
    justify-self: end;
}

.link {
    grid-row:3;
    margin:auto;
}

.left .link {
    grid-column:1;
}

.right .link {
    grid-column:2;
}

.inline-link {
    text-decoration:none;
    color:black;
    font-size:1.5rem;
    transition: all ease 0.2s;
}

.inline-link:hover {
    transform:translateX(5px);
    text-decoration:underline;
}

.red {
    background-color: #E6262F;
    margin-top: -40vh;
}

.blue {
    background-color: #0FA5C5;
    margin-top: -40vh;
}

.yellow {
    background-color: #FBB518;
    margin-top: -40vh;
}

.black {
    background-color: #000000;
    margin-top: -30vh;
    height: 75vh;
}

.red p,.blue p,.yellow p, .red h1, .blue h1, .yellow h1 {
    color:black;
}

.left div {
    transform: skewY(-10deg);
}

.right div {
    transform: skewY(10deg);
}

/*footer*/

footer {
    position:relative;
    z-index:3;
    margin:0;
    padding-top:20vh;
}