@import url('https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@400;900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');




@font-face {
    font-family: 'Cagke';
    src: url('../fonts/Cagke-Extrabold.eot');
    src: url('../fonts/Cagke-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Cagke-Extrabold.woff2') format('woff2'),
        url('../fonts/Cagke-Extrabold.woff') format('woff'),
        url('../fonts/Cagke-Extrabold.ttf') format('truetype'),
        url('../fonts/cagkeextrabold-8mpja.otf') format('opentype'),
        url('../fonts/Cagke-Extrabold.svg#Cagke-Extrabold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../ptmono/PTMono-Regular.eot');
    src: url('../ptmono/PTMono-Regular.eot?#iefix') format('embedded-opentype'),
        url('../ptmono/PTMono-Regular.woff2') format('woff2'),
        url('../ptmono/PTMono-Regular.woff') format('woff'),
        url('../ptmono/PTMono-Regular.ttf') format('truetype'),
        url('../ptmono/PTMono-Regular.svg#PTMono-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueKabelW01-Regular';
    src: url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.eot');
    src: url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.eot?#iefix') format('embedded-opentype'),
         url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.woff2') format('woff2'),
         url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.woff') format('woff'),
         url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.ttf') format('truetype'),
         url('./fonts/neue/02408ccd8efcf169db4e41d6e0551118.svg#NeueKabelW01-Regular') format('svg');
}

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');





:root {
  /* Dark Mode (Default) */
  --main-bg-color: #1E1E1E;
  --secondary-bg-color: #424242;
  --light-color: #E6E6E6;
  --text-color: #E6E6E6;
  --special-color: #11CC5C;

  --title-font-family: 'Cagke', serif;
  --passage-font-family:"Raleway", sans-serif;
  --passage-font-weight: 100;
  --coding-font-style: 'PT Mono', monospace;

  --sections-margin: 6rem;

  /* Light Mode (Optional) */
 /*  --light-mode-main-bg-color: #E6E6E6;
  --light-mode-secondary-bg-color: #FFFFFF;
  --light-mode-dark-color: #1E1E1E;
  --light-mode-text-color: #1E1E1E;
  --light-mode-special-color: #11CC5C; */
}

.social-btn-container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
padding: 0 2rem 0 2rem;
  
}

.social-btn-container a{
  display: flex;
  flex-direction: column;
  background-color: rgb(63, 63, 63);
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.3rem 0.6rem 0.3rem;
  font-family: var(--passage-font-family);
  color: var(--light-color);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-size: 0.8rem;

}

.social-btn-container a:hover{
  background-color: rgb(83, 83, 83);
  transform: translateY(-5px);
  transition: all 0.2s ease-in-out;
}

.social-btn-container a :nth-child(1){
  width: 3rem;
  height: 3rem;
 fill: rgb(196, 196, 196);
 padding: 0;
 margin: 0;
 margin-bottom: 0.3rem;

 
}



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

  .social-btn-container{
    
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    
  }

  .social-btn-container :nth-child(8){
    display: none;
  }
  
}