html{
    height: 100%;
}

.gap10{gap: 10px !important;}
.gap20{gap: 20px !important;}
.gap30{gap: 30px !important;}
.gap40{gap: 40px !important;}
.gap50{gap: 50px !important;}

section{margin: 40px 0;}
section.main-section{margin: 50px 0; padding: 50px 0; border-top: 1px solid var(--gray-500);}
section.main-section:first-child{margin: 0 0 100px 0; padding: 0; padding-bottom: 50px; border-top: none;}

hr{line-height: 0; height: 0; border-top: 1px solid var(--gray-80); margin: 20px 0;}

a{color: var(--primary);}

p{margin-bottom: 10px;}

body{
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: url(img/swirl.svg) no-repeat center center;
    background-size: 130%;
    background-attachment: fixed;
}

header{
    display: flex;
    align-items: center;
    padding: 20px;
    height: 80px;
    background: var(--white);
    border-bottom: 1px solid var(--gray);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

header .logo{width: 150px; position: relative;}
  header .logo:after{content: 'DEV'; position: absolute; right: -30px; bottom: 0; display: block; border: 1px solid var(--black); font-size: 10px; padding: 2px 3px; line-height: 1; font-weight: 600;}

main{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pdf_section, .figma, .jcomp{ padding: 40px 0;}

.figma{margin-bottom: 60px;}
.figma a{margin: 10px 0; display: block;}

.jcomp{margin-bottom: 60px;}

.card{
  border: 1px solid var(--gray);
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 3px 5px 15px rgba(0,0,0,0.1);
  padding: 20px;
  max-width: 900px;
  display: flex;
  gap: 20px;
  align-items: center;
  color: var(--black);
  cursor: pointer;
  margin: 20px 0;
}


  .card_i{
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    aspect-ratio: 1;
    overflow: hidden;
  }

.pdf_section{margin: 60px 0;}

.pdf_section embed{aspect-ratio: 1/1.4; height: 80vh; border: 2px solid var(--black);}
.pdf_section a{width: 200px; margin: 20px 0;}


footer{margin-top: 80px; padding: 20px;}