:root {
    --HeaderHeigth: 50px;
    --HeaderIDscroll: 50px;
  }

  *{
   box-sizing: border-box;
   overflow-wrap:anywhere;
   font-family: Arial, Helvetica, sans-serif;
   color: #c0afaf;
  }

  .CardContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .CardContainer:nth-child(2){
    transition-delay: 200ms;
  }
  .CardContainer:nth-child(3){
    transition-delay: 400ms;
  }
  .Card{
    width: 400px;
    background-color: rgb(56, 50, 50);
    border-radius: 12px;
    overflow:hidden;
    box-shadow: 0px 2px 4px rgba(0, 0,0, 0.5);
    margin: 20px;

  }

  .Card img{
    width: 100%;
    height: auto;
  }

  .CardContent{
    padding: 16px;
  }

  .CardContent h3{
    text-align: center;
  }

  .CardContent p{
  font-size: 15px;
  line-height: 1.3;
  }

body{
    margin: 0px;
    padding: 0px;
}

.BackgroundSB{
    background-color: #161b1f;
    height: var(--HeaderHeigth)
}

.BackgroundLG{
 background-color: lightgray;
 padding: 1%
}

.BackgroundMG{
    background-color:#3c3939;
}

.BackgroundDG{
   background-color: #9BB1A1;
}

.BackgroundImage{
    background-image: url("../Images/CodingGif.gif");
    padding: 300px;
}

.NoMargin{
    margin: 0px;
}

a{
    text-decoration: none;
}

html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--HeaderIDscroll)
}

.sticky{
    position: sticky;
    z-index: 10;
    padding: 10px;
    top: 0px;
}

  .Grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .WhiteText{
    color: white;
  }
  .TextCenter{
    text-align: center;
  }
  .Padding5{
    padding: 5px;
  }
  .Padding20{
    padding: 20px;
  }
  .Padding50{
    padding: 50px;
  }
  .Padding50Bottom{
    padding-bottom: 50px;
  }
  .Padding20Left{
    padding-left: 20px;
  }

  .NoPaddingBottom{
    padding-bottom: 0px;
  }
  .Flex{
    display: flex;
    justify-content: center;
    align-items: center; 
}
.HeaderButtonOne {
    
    margin: 10px;
    padding: 10px;
    font-size: 20px;
  }
.HeaderButtonTwo {
    margin: 10px;
  }
  .button-container {
    text-align: center;
    margin-top: auto; 
  }
  .my-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3d434a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    bottom: 0px;
  }
  .Hidden{
    opacity: 0;
    transition:all 1s;
    filter: blur(5);
    transform: translateY(50%);
  }
  .Hidden2{
    opacity: 0;
    transition:all 2s;
    filter: blur(5);
  }
  .Show{
    opacity: 1;
    transform: translateY(0%);
  } 
  .Top{
    top: 0px;
  }
  .Footer{
    padding-bottom: 100px;
    align-items: center;

  }
  .Footer img{
    filter: invert(100);
  }
  .FooterText{
    color: #ffffff;
  }
  @media(prefers-reduced-motion){
    .Hidden1{
      transition: none;
    }
    .Hidden2{
      transition: none;
    }
  }