* {
      box-sizing: border-box;
    }
    
    /* Style the body */
    body {
        font-family: Calibri Light, Calibri, sans-serif;
        margin: 0;
    }
    
    
    /* Style the top navigation bar */
    .navbar {
      display: flex;
      background-color: #0070C0;
    }
    
    /* Style the navigation bar links */
    .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
    }
    
    /* Change color on hover */
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    
    
    /* Style the footer navigation bar */
    .footbar {
      display: flex;
      background-color: #0070C0;
     }
    
    /* Style the navigation bar links */
    .footbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
    }
    
    /* Change color on hover */
    .footbar a:hover {
      background-color: #ddd;
      color: black;
    }
    
    
    .area {  
      display: flex;
      flex-direction: column;
      background-color: #F6F8FC; /* For browsers that do not support gradients */
      background-image: linear-gradient(#F6F8FC, #C7D5ED);
    }
    
    /* Column container */
    .row {  
      display: flex;
      flex-wrap: wrap;
    }
    
    
    /* Main column */
    .main {
      text-align: center;
      flex: 33%;
      padding: 20px;
    }
    
    .descr {
      flex: 100%;
      text-align: center;
    
      padding: 20px;
    }
    
    .mainblock {
        flex: 100%;
        text-align: left;
        padding: 20px;
    }
      
     
    .indeximg {
      background-color: #F6F8FC;
      background-image: linear-gradient(#F6F8FC, #E3EAF6);
      width: 280px;
      padding: 20px;
      margin: auto;
    }
    
    .fakeimg {
      width: 100%;
      padding: 20px;
    }
    
    .side {
      flex: 40%;
      padding: 20px;
    }
    
    .offerimg {
      flex: 60%;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
         
    /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
      .row, .navbar {   
        flex-direction: column;
      }
    }