:root {
      --Red: hsl(0, 78%, 62%);
      --Cyan: hsl(180, 62%, 55%);
      --Orange: hsl(34, 97%, 64%);
      --Blue: hsl(212, 86%, 64%);
      --Grey1: hsl(234, 12%, 34%);
      --Grey2: hsl(212, 6%, 44%);
      --White: hsl(0, 0%, 100%);
    }
    .attribution { 
      font-size: 0.9rem; 
      text-align: center; 
      margin-top: 1rem;
    }
    .attribution a { 
      color: var(--Orange);
      font-weight: 800; 
    }
    *,
    *::after,
    *::before {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      overflow-x: hidden;
    }
    body{
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: "Poppins", sans-serif;
    }
    .container{
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: 1fr  1fr;
      gap: 35px;
      width: 100%;
      max-width: 1500px;
      padding: 0 1rem;
      box-sizing: border-box;
    }
    .card{
      width: 100%;
      max-width: 450px;
      height: auto;
    }
    .red{
      border-top: 5px var(--Red) solid;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.3rem;
      grid-column: 2;
      grid-row: 1;
      
    }
    .cyan{
      border-top: 5px var(--Cyan) solid;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.3rem;
       grid-column: 1;
       grid-row: 1/3;
      align-self: center;
    }
    .orange{
      border-top: 5px var(--Orange) solid;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.3rem;
      grid-column: 2;
      grid-row: 2;
      
    }
    .blue{
      border-top: 5px var(--Blue) solid;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.3rem;
       grid-column: 3;
       grid-row: 1/3;
       align-self: center;
    }
    .card p {
      margin: 1rem 3.5rem 0 2rem;
      color: var(--Grey2);
    }
    .capture{
      margin: 2rem 0 0.5rem 2rem;
      color: var(--Grey2);
      font-size: 1.3rem;
    }
    .entry{
      text-align: center;
      margin-bottom: 6rem;
    }
    .entry p {
      width: auto;
      max-width: 650px;    
      margin: 0 auto; /*önemli*/
      padding: 0 2rem;  
      font-size: 1.1rem;
      color: var(--Grey1);
    }
    .entry h1 {
      font-size: 2.8rem;
    }
    .entry-1 {
      font-weight: 200;
      color: var(--Grey2);
    }
    .entry-2{
      color: var(--Grey1);
    }
    img{
      margin: 3rem 2rem 3rem auto;
      display: block;
      width: 5rem;
    }
    
    @media screen and (max-width:1440px) {
    body{
      display: flex;
      height: 100vh;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: "Poppins", sans-serif;
    }
    .container{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 35px;
    }
    .card{
      width: 100%;
      max-width: 450px;
      height: auto;
    }
    .card p {
      margin: 1rem 1rem 0 2rem;
      font-size: 1.1rem;
    }
    .capture{
      margin: 2rem 0 0.5rem 2rem;
      font-size: 1.5rem;
    }
    .entry{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 6rem;
    max-width: 590px;
    padding: 0 1rem;
    }
    .entry p {
    margin: 1rem 0 0 0;
    padding: 0 1rem;
    font-size: 1.3rem;
    }
    .entry h1 {
    font-size: 2.4rem;
    }
}
@media screen and (max-width: 768px) {
  .entry {
    width: 100%;
    padding: 0 1rem;
  }

  .entry p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .entry h1 {
    font-size: 2rem;
  }
}