@charset "utf-8";
/* CSS Document */

.intro {
background-color:#A9C3D5;
padding:10px 30px;
height: 550px;
}

@media (min-width: 400px) {
   .intro {width: 400px; height: 750px; }
   }
@media (min-width: 600px) {
   .intro {width: 500px; height: 610px; }
   }
@media (min-width: 800px) {
   .intro {width: 740px; height: 450px;}
   }
@media (min-width: 1000px) {
   .intro {width: 900px; height: 350px;}
      }
@media (min-width: 1200px) {
   .intro {width: 1150px; height: 300px;}
      }
@media (min-width: 1400px) {
   .intro {width: 1350px; height: 250px;}
      }
@media (min-width: 1700px) {
   .intro {width: 1600px; height: 230px;}
      }
@media (min-width: 1800px) {
   .intro {width: 1827px; height: 200px;}
      }

table {
border:8px solid #A9C3D5;
border-collapse: collapse;
}
td {
border:2px;
font-size:45px;
}
tr {
background-color: #A9C3D5}

.boldfont {
font-family: 'Kalam', cursive;
font-weight: 700;
}
.regularfont {
font-family: 'Kalam', cursive;
font-weight: 400;
}

.basic-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 }
 

.column-layout {
max-width: 1900px;
background-color: #A9C3D5
margin: 20px auto 0 auto;
line-height: 1.65;
padding: 20px 50px;
display: flex;
}

.main-column {
margin: 2px;
flex: 2.5;
order: 3;
}
.sidebar-one {
flex: 1;
order: 3;
}
.sidebar-two {
flex: 1;
order: 1;}