/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap'); 
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap'); */
/* 
@media only screen and (max-width: 600px) {
    .homepage-vinyl {
       height: 130px;
        w idth: 130px;
     
    }
} */

@media (max-width: 430.98px) {
    .homepage-vinyl {
        height: 130px;
        width: 130px;
     }
     
    .footer-pad span,
    .footer-pad p,
    .social-medias {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 22.33%;
      display: flex;
      align-items: center;
      margin-bottom: 37px;
      margin-bottom: 30px;
}

.footer-pad p {
    justify-content: center;
    font-size: 5px;
}


.social-medias img {
    display: block;
    filter: invert(1);
    margin: auto 0;
    transition: ease-in .05s;
    width: 20px;
    margin-bottom: 12px;
}

.footer p {
    order: 2;
    padding-bottom: 90px;
    font-size: 10px;
}
      
 }



.navbar ul {
    padding: 0px 2rem;
    display: flex;
    gap: 2.1rem;
    font-size: 13px;
}

.hero h3 {
	font-size: 26.2px;
	letter-spacing: 2px;
}


}


@font-face {
    font-family: "Data Trash";
    src: url("./fonts/data_trash.otf");
}

:root {
    --main-black: #2c2c2c;
    --main-white: #e5e6e5;
}

.--appear {
    opacity: 0;
    animation: fadeIn ease-in .3s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

.--disappear {
    opacity: 1;
    animation: fadeOut ease-in .15s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* //////////// CSS RESET //////////// */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: #252525;
    min-height: 100vh;
}

ol,
ul {
    list-style: none;
}

a,
a:hover{
    color: inherit;
    text-decoration: none;
}  

/* //////////// END CSS RESET //////////// */


p,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span,
button {
    color: var(--main-white);
}


.navbar-boite {
    justify-content: space-between !important;
}

.navbar {
    position: absolute;
    right: 0;
    width: 100%;
    display: flex;
    justify-content:flex-end;
    padding: 2rem;
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    z-index: 2;
}
.navbar ul {
    padding: 0px 2rem;
    display: flex;
    gap: 2.1rem;
}

.navbar ul li a {
    text-transform: uppercase;
    position: relative;
}

.navbar ul li a:after {
    bottom: -4px;
    content: "";
    display: block;
    height: 2.2px;
    left: 0;
    position: absolute;
    background: #fff;
    opacity: 0.6;
    transition: width 0.3s ease-out 0s, opacity 0.3s ease-out 0s;
    width: 0;
}

.navbar ul li a:hover:after {
    width: 100%;
    opacity: 0.9;
}

.is-active{
    pointer-events: none;
    border-bottom: solid 2.2px #e5e6e5;
    padding-bottom: 2px;   
}

.is-disable{
    pointer-events: none;
}

.footer {
    opacity: 0;
    font-family: 'Anonymous Pro', monospace;
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: absolute;
    bottom: -135px;
    animation: fadeIn ease-in 1s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    padding: 2.3rem 4rem;
    z-index: 999;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.footer span,
.footer p, 
.social-medias {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 33.33%;
    display: flex;
    align-items: center;
}

.footer p {
    justify-content: center;
}

.social-medias {
    display: flex;
    justify-content: flex-end;
}

.social-medias ul {
    display: flex;
    gap: 1rem;
}


.social-medias img {
    display: block;
    filter: invert(1);
    margin: auto 0;
    transition: ease-in .05s;
    width: 20px;
}

.social-medias img:hover {
    filter: invert(0.5);
    transition: ease-in .05s;
}


@media screen and (max-width: 1280px) {

    .footer span {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 0%;
        display: flex;
        align-items: center;
    }


    .footer p,
    .social-medias {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
        display: flex;
        align-items: center;
    }

    .footer p {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 660px) {

    nav {
        width: 100%;
        justify-content: center;
    }
    
    nav ul {
        width: 100%;
        justify-content: space-between;
    }
    

    .footer {
        flex-direction: column;
        gap: 1rem;
    }

    .footer p,
    .social-medias {
        justify-content: center;
    }

    .footer p {
        order: 2
    }

}

@media (min-width: 475px) {

 
}

.body-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}



.--fadeInDown {
    animation: fadeInDown ease 1.5s forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0,50px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.--slideInRight {
    animation: slideInRight 2s ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    } 

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.--slideInLeft {
    display: block;
    animation: slideInLeft 1.5s ease forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-5rem);
        opacity: 0;
    } 

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.--slideInTop {
    animation: slideInTop 1.5s ease forwards;
}

@keyframes slideInTop {
    from {
        transform: translateY(-5rem);
        opacity: 0;
    } 

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.--slideInBottom {
    animation: slideInBottom 1.5s ease forwards;
    display: block;
}

@keyframes slideInBottom {
    from {
        transform: translateY(5rem);
        opacity: 0;
    } 

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.save{
    background-color: transparent;
    color:#eee;
    border: none;
}

.--slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInRight {
    0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    @keyframes slideInRight {
    0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    } 



    .--fadeOutDown {
        animation: fadeOutDown 1s ease .5s forwards;
      }
      
      @keyframes fadeOutDown {
        0% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(20px);
        }
      }


      .--fadeOutUp {
        animation: fadeOutUp 1s ease .5s forwards;
      }
      

      @keyframes fadeOutUp {
        0% {
           opacity: 1;
           transform: translateY(0);
        }
        100% {
           opacity: 0;
           transform: translateY(-20px);
        }
     } 

     .--fadeOutLeft {
        animation: fadeOutLeft 1s ease .5s forwards;
      }
      

      @keyframes fadeOutLeft {
        0% {
           opacity: 1;
           transform: translateX(0);
        }
        100% {
           opacity: 0;
           transform: translateX(-20px);
        }
     } 

     .--fadeOutRight {
        animation: fadeOutRight 1s ease .5s forwards;
      }
      

      @keyframes fadeOutRight {
        0% {
           opacity: 1;
           transform: translateX(0);
        }
        100% {
           opacity: 0;
           transform: translateX(20px);
        }
     } 

     .--fadeOut {
        animation: fadeOut 1s ease .5s forwards;
        opacity: 1;
     }


     @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
           opacity: 0;
        }
     } 
/* 
     @media (min-width: 100px) {
        .homepage-vinyl {
            height: 130px;
            width: 130px;
          
         }
     } */