@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,300;0,500;0,700;1,100;1,300;1,500;1,700&display=swap');

html {
    /* background-color: #c8c1a8; */
    background-color: #dcd9cf;
    font-family: 'IBM Plex Serif', serif;
    color: #102a30;
}

body {
    max-width: 1200px;
    height: calc(100vh - 100px);
    margin: 50px auto;
    display: flex;
    align-items: center;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 18px;
}

h3, h4 {
    font-size: 18px;
}

h1, h2, .company-details p{
    margin: 0;
}

a {
    text-decoration: none;
    color: #7c1e01;
    font-weight: 500;
}

a:hover {
    color: #3f1103;
}

.italic {
    font-style: italic;
}

.row {
    display: flex;
}

.row-welcome {
    align-items: center;
}

.company, .description, .footer {
    flex: 1;
    margin: 50px;
}

.company {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-right: 25px;
}

.company-christian img{
    width: 100px;
}

.company-details div {
    /* font-weight: 300; */
    margin-top: 12.5px;
}

.description {
    margin-left: 25px;
}

.row-images {
    justify-content: space-between;
}

.row-images img{
    width: 290px;
}

.footer {
    display: flex;
    justify-content: center;
}

.footer p {
    font-weight: 300;
    margin: 0 12.5px;
}

.show {
    display: none;
}

::selection {
    background: #bcb1a4; /* WebKit/Blink Browsers */
  }

::-moz-selection {
background: #bcb1a4; /* Gecko Browsers */
}

@media only screen and (max-width: 1200px) {
    body {
        max-width: 600px;
        height: initial;
        margin: 100px auto;
        display: block;
    }

    h1{
        font-size: 24px;
    }

    .row, .company {
        flex-direction: column;
        text-align: center;
    }

    .company, .description, .footer {
        margin: 25px;
    }

    .description {
        margin-top: 0;
    }

    .hide {
        display: none;
    }

    .show {
        display: initial;
    }

    .row-images {
        align-items: center;
    }

    .row-images img{
        max-width: 350px;
        width: 350px;
    }

    .footer {
        display: flex;
        flex-direction: column;
    }

    .footer p {
        font-weight: 300;
        margin: 0 5px;
    }

    .h-divider {
        margin: auto;
        margin-top: 20px;
        width: 80%;
        position: relative;
      }

      .h-divider .shadow {
        overflow: hidden;
        height: 20px;
      }

      .h-divider .shadow:after {
        content: '';
        display: block;
        margin: -25px auto 0;
        width: 100%;
        height: 25px;
        border-radius: 125px/12px;
        box-shadow: 0 0 2px #102a30;
        ;
      }

  }