@import 'theme.css';
 * {
     box-sizing: border-box;
     margin: 0;
     font-family: var(--ff-monteserrat);
     font-weight: 500;
 }

 body {
     background-color: var(--mavi-3);
     color: var(--siyah);
     margin: 1rem;
     /* width: 100%; */
 }

 h1 {
     background-color: var(--koyu-kırmızı);
    width: 20rem;
    padding: 0.3rem;
    border: 1px solid black;
    border-radius: 4rem;
    text-align: center;
    margin: 3rem auto;
    }

    .header {
        background-color: var(--koyu-yeşil);
        padding:1rem;
        font-size: 32px;
        margin-bottom: 1rem;
    }

    .navbar {
        background-color: var(--gri-3);
        display: flex;
        justify-content: flex-start;
    }

    .navbar a {
        display: inline-block;
        text-decoration: none;
        color:white;
        padding: 1rem 1.2rem;

    }

    .navbar a:hover {
        background-color: var(--gri-5);
        color: var(--gri-7);
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .col {
        padding: 1rem;

    }

    .fs{
        width: 35%;
        background-color: var(--gri-5);

    }
    
    .ds {
        width: 30%;
        background-color: var(--gri-7);

    }
    .aws {
        width:20%;
        background-color: var(--gri-6);

    }

    .cms {
        width: 15%;
           background-color: var(--gri-8);
    }


    @media screen and (max-width: 992px){
         body {
             background-color: var(--açık-kırmızı);
             color: var(--beyaz);

         }
         .col {
             width: 50%;
             margin: 0.5rem 0;
         }
                 
    }

    @media screen and (max-width:600px){
        body {
            background-color: var(--mor-1);
            color: var(--beyaz);

        }
        .header {
            display: none;
        }
        .navbar {
              flex-direction: column;
              align-items: center;
        }

        .col {
            width: 100%;
            margin: 0.5rem 0;
        }
        
        
        
        .navbar a {
            width: 100%;
            text-align: center;
        }
    }