@font-face {
  font-family: 'orbitron-variablefont_wght';
  src: url('fonts/orbitron/orbitron-variablefont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'lato-regular';
  src: url('fonts/lato/lato-regular.ttf') format('truetype');
}

:root{
--skauto-color: #DE5328;
--schneiderauto-color: #5DA2D7;
--elsassloc-color: #D90134;
--sklavage-color: #2EAADC;
--skevasion-color: #22B406;
--primary-color: rgba(255, 255, 255);
--background-color: rgba(0, 0, 0);
--start-color: rgba(46, 46, 46, 1);
--end-color: rgba(0, 0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: var(--primary-color);
  font-family: "Lato", sans-serif;
}

body, html {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  width: 100%;
  
}

.responsPC{
  display: flex;
}
.contentCard .responsPhone{
  display: none;
}


.navbar{
  background: linear-gradient(180deg, var(--start-color) 20%, var(--end-color) 100%);
  width: 100%;
  height: 5.5em;
  text-align: center;
}
.navbar h1{
  margin: 1em;
}

h1, .initiale, h2{
  font-family: "Orbitron", sans-serif;
}

h2{
  font-size: 19px;
  padding:  .5em 0;
}

.initiale{
  font: 700;
  font-size: 40px;
}

.card-group{
  display: flex;
  align-items: center;
  gap: 2em;
}

.contentLogo{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 20%;
}

.contentImg{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 280px;
  height: 200px;
}

.contentImg img{
  width: 280px;
}

.contentImg p{
  font-style: italic;
position: absolute;
bottom: 60px;
}

.cardMap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 280px;
}
.card{
  width: 280px;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: 0.5s;
  /* cursor: pointer; */
  z-index: 2;
}

.card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* pointer-events: none; */
  transition: 0.5s;
}

.card .layer{
  background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 75%;
  opacity: 0;
  transition: 0.3s;
}

.card .info{

  position: absolute;
  bottom: -50%;
  padding: 15px;
  transition: 0.5s bottom, 1.75s opacity;
}

.contentLink{
  padding: 0.5em 0;
}

.contentIcons{
  display: flex;
  align-items: center;
}

.contentIcons img{
  padding-right: 5px;
}


.contentLink .icons{
  width: 16px;
  height: 16px;
}

.info{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.info p{
  font-size: 14px;
  margin-top: 3px;
  pointer-events: none;
}

.info button{
  border: none;
  
  font-weight: bold;
  border-radius: 8px;
  margin-top: 8px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

button a{
 display: flex;
 padding: 8px 12px;
  align-items: center;
  justify-content: center;
}

#schneiderBtn{
  background-color: var(--schneiderauto-color);
  border: solid 1px var(--schneiderauto-color);
  transition: background-color 0.5s;
}
#skautoRoeschBtn ,#skautoSoufflBtn{
  background-color: var(--skauto-color);
  border: solid 1px var(--skauto-color);
  transition: background-color 0.5s;
}
#skLavageBtn{
  background-color: var(--sklavage-color);
  border: solid 1px var(--sklavage-color);
  transition: background-color 0.5s;
}
#skEvasionBtn{
  background-color: var(--skevasion-color);
  border: solid 1px var(--skevasion-color);
  transition: background-color 0.5s;
}
#elsassLocBtn{
  background-color: var(--elsassloc-color);
  border: solid 1px var(--elsassloc-color);
  transition: background-color 0.5s;
}
#schneiderBtn:hover, #skautoRoeschBtn:hover, #skautoSoufflBtn:hover, #skLavageBtn:hover, #skEvasionBtn:hover, #elsassLocBtn:hover{
  background-color: transparent;
}

.card:hover ,
.card:hover img
.card:hover .layer{
transform: scale(1.1);
}
.card:hover >  .layer{
  opacity: 1;
}
.card:hover >  .info{
  bottom: 0;
}


.card-group:hover .cardMap .card:not(:hover){
  filter: blur(5px);
}



.hoverLink{
  text-align: center;
  width: 100%;
  padding: .2em;
  box-sizing: border-box;
}

.sparkle {
  color: var(--primary-color);
  margin: auto auto;
  &:hover {
    cursor: pointer;
  }
}

.u-hover--sparkle {
  box-sizing: border-box;
  position: relative;
  padding: 0.5em;
  &::before,
  &::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center;
  }

  &::before {
    border-top: 0.2em solid var(--primary-color);
    border-bottom: 0.2em solid var(--primary-color);
    transform: scale3d(0,1,1);
  }

  &::after {
    border-left: 0.2em solid var(--primary-color);
    border-right: 0.2em solid var(--primary-color);
    transform: scale3d(1,0,1);
  }

  &:hover::before,
  &:hover::after {
    transform: scale3d(1,1,1);
    transition: transform 900ms;
  }
}
.marginLavage{
  margin: 0;
  padding: 0;
}

.paddingLavage{
  padding: 5px;
}
.contentMapLavage{
  font-size: 14px;
}

.paddingLavage{
  padding: .3em;
}

.marginTop{
  margin-top: 2em;
}

.footer{
  background: linear-gradient(0deg, var(--start-color) 0%, var(--end-color) 100%);
  width: 100%;
  height: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

@media only screen and (max-width: 1850px) and (min-width: 1001px){

  
  .card-group {
    gap: .5em;
  }

  .cardMap,.contentImg,  .contentImg img {
    width: 250px;
  }
  .card {
    width: 250px;
  
  }
  .card .info{
    bottom: -60%;
  }

}


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

  .contentCard .responsPhone{
    display: flex;
  }

  .responsPC{
    display: none;
  }

  .navbar h1{
    margin: 0;
    margin-top: .4em;
    font-size: 20px;
  }
  .card-group{
    flex-direction: column;
  }
  .card-group:hover > .cardMap .card:not(:hover) {
    filter: none;
  }

  .card .layer{
    opacity: 1;
  }

  .card >  .info{
    bottom: 0;
  }

  .card:hover{
    transform: none;
  }

 

 
}