/* Loader Animation*/
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #282d33;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}
/* Font */
@font-face {
	font-family: "Bebas Neue";
	src: url('../police/BebasNeue-Regular.ttf');
	font-display: swap;
}
* {
    font-family: 'Bebas Neue', cursive;
}
/* cursor */
.wrapper {
  cursor: url('../img/custom-cursor.png'), auto;
}
.wrapper header:hover {
  cursor: url('../img/custom-cursorb.png'), auto;
}
.wrapper header h1:hover {
  cursor: url('../img/custom-cursor.png'), auto;
}
.wrapper a:hover {
  cursor: url('../img/custom-cursor.png'), auto;
}
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #eee;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 1000ms, height 1000ms;
}
.cursor.large {
  height: 80px;
  width: 80px;
}
/*CSS*/
*, ::before, ::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
}
body {
    background: url("../img/bg.webp") no-repeat center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}
p {
    font-size: inherit;
    color: #FFF;
    font-size: 2rem;
}
/* header */
header {
  background: #FFF;
  height: 20vh;
  display: grid;
  justify-content: center;
  align-items: center;
}
header div h1 {
  font-size: 5rem;
  text-transform : capitalize;
}
/* Grid */
.container {
  padding: 2rem;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-areas:  "Youtube"
                        "Twitch"
                        "Kick"
                        "Discord"
                        "TikTok"
                        "Twitter"
                        "Instagram"
                        "Throne"
                        "Lightroom"
                        "Behance";
}
.fade-in-1 {
  grid-area: Youtube;
}
.fade-in-2 {
  grid-area: Twitch;
}
.fade-in-3 {
  grid-area: TikTok;
}
.fade-in-4 {
  grid-area: Twitter;
}
.fade-in-5 {
  grid-area: Behance;
}
.fade-in-6 {
  grid-area: Throne;
}
.fade-in-7 {
  grid-area: Discord;
}
.fade-in-8 {
  grid-area: Kick;
}
.fade-in-9 {
  grid-area: Instagram;
}
.fade-in-10 {
  grid-area: Lightroom;
}
.container a {
  display: grid;
  justify-content: center;
  align-items: center;
  min-height: 10rem;
  border-radius: 2rem;
  background: #363636;
  box-shadow: inset 2rem 2rem 50px #262626,
              inset -2rem -2rem 50px #464646;
} 
.container  a div {
  display: grid;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
}
.imageYtb{
  max-height: none;
  height: 80%;
  margin:auto;
  max-width: 80%;
}
.imageTwitch{
  max-height: none;
  height: 80%;
  margin:auto;
}
.imageKick{
  max-height: none;
  height: 60%;
  margin:auto;
}
.imageDiscord{
  max-height: none;
  height: 70%;
  width: auto;
  margin:auto;
}
.imageTikTok{
  filter: contrast(0%) brightness(10) ;
  max-height: none;
  height: 7rem;
  width: auto;
  margin:auto;
}
.imageTwitter{
  max-height: 5rem;
  margin:auto;
}
.imageInstagram{
  max-height: none;
  height: 5rem;
  margin:auto;
}
.imageLightroom{
  filter: contrast(0%) brightness(10) ;
  max-height: none;
  height: 5rem;
  margin:auto;
}
.imageBehance{
  filter: contrast(0%) brightness(10) ;
  max-height: none;
  height: 4rem;
  margin:auto;
}
.imageThrone{
  filter: contrast(0%) brightness(10) ;
  max-height: none;
  height: 5rem;
  margin:auto;
}
/* Computer  mettre 1100*/ 
@media screen and (min-width: 1100px) {
.wrapper{
  height: 100dvh;
  overflow: hidden;
}  
header {
    height: 30vh;
} 
header div h1 {
  font-size: 10rem;
}
.square {
  aspect-ratio: 1/1;
}
.container {
  padding: 6rem;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:  "Youtube Youtube Twitch Twitch TikTok Twitter Behance"
                        "Throne Discord Discord Kick Instagram Instagram Lightroom";
}
.imageYtb{
  height: none;
  width: 100%;
}
.imageTwitch{
  height: none;
  width: 100%;
}
.imageKick{
  height: auto;
  width: 70%;
}
.imageDiscord{
  height: 100%;
  width: auto;
}
.imageTikTok{
  height: auto;
  width: 50%;
}
.imageTwitter{
  max-height: none;
  height: auto;
  width: 40%;
}
.imageInstagram{
  height: 100%;
  width: auto;
}
.imageLightroom{
  height: auto;
  width: 50%;
}
.imageBehance{
  height: auto;
  width: 60%;
}
.imageThrone{
  height: 100%;
}
/*Animation Fade-In*/
.container a {
  opacity: 0;
  animation: fadeIn 3s ease-out forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.fade-in-1 {
  animation-delay: 2.2s;
}
.fade-in-2 {
  animation-delay: 2.4s;
}
.fade-in-3 {
  animation-delay: 2.6s;
}
.fade-in-4 {
  animation-delay: 2.8s;
}
.fade-in-5 {
  animation-delay: 3.0s;
}
.fade-in-6 {
  animation-delay: 3.2s;
}
.fade-in-7 {
  animation-delay: 3.4s;
}
.fade-in-8 {
  animation-delay: 3.6s;
}
.fade-in-9 {
  animation-delay: 3.8s;
}
.fade-in-10 {
  animation-delay: 4.0s;
}
}