:root{
  --White: hsl(0, 0%, 100%);
  --Ligh-gray: hsl(212, 45%, 89%);
  --Grayish-blue: hsl(220, 15%, 55%);
  --Dark-blue: hsl(218, 44%, 22%);
  font-family: Outfit, sans-serif;
  font-size: 15px;
  
}
body{
  background-color: var(--Ligh-gray);
}
.qr > img{
  height: 285px;
  width: 285px;
  border-radius: 10px;
  margin-top: 25px;

  
}
section{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color:var(--White);
  width: 320px;
  height: 500px;
  margin: 0 auto;
  padding: 0 auto;
  margin-top: 185px;
  border-radius: 15px;

}
.baslik,
.aciklama{
  height: 200px;
  width: 260px;
  text-align: center;
  
  
}
.aciklama{
  color: var(--Grayish-blue);
}
.baslik{
  color: var(--Dark-blue)
}
@media (max-width: 375px) {
  body{
    background-color: var(--Ligh-gray);
  }
  .qr > img{
    height: 285px;
    width: 285px;
    border-radius: 10px;
    margin-top: 17px;
  
    
  }
  section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color:var(--White);
    width: 320px;
    height: 500px;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 80px;
    border-radius: 15px;
  
  }
  .baslik,
  .aciklama{
    height: 200px;
    width: 260px;
    text-align: center;
    
    
  }
  .aciklama{
    color: var(--Grayish-blue);
  }
  .baslik{
    color: var(--Dark-blue)
  }
}


/* # Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

- White: hsl(0, 0%, 100%)
- Light gray: hsl(212, 45%, 89%)
- Grayish blue: hsl(220, 15%, 55%)
- Dark blue: hsl(218, 44%, 22%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 700
 */