/*
 * ashram/res/style.css
 */

/***********************************************
 * Base
 */
* {
    margin: 0; padding: 0; border: 0;
    box-sizing: border-box;
}

body {
    background: #fbfaf8;
    //color: #0e0e0e;
    font-family: var(--sans-font-family);
    font-style: normal;
    font-feature-settings: none;
    font-variant-ligatures: none;
    overflow-x: hidden;
    text-rendering: optimizelegibility;
}

.content {
    /* canvas on which the container is drawn */
    height: 100vh; width: 100vw;
    /* positive values render a framing border */
    padding: 10px;
}

img.contact {
    vertical-align:middle;
    transform: scale(0.7);
}

/***********************************************
 * Layout
 *
 * All DIVs within a class=container DIV are arranged according to the
 * viewport width. Think in terms of boxes rather than rows and
 * columns. It is not you who determines the final layout--but the
 * reader.
 *
 * For every DIV within the container floats and is arranged by the
 * browser depending on the screen width, how the device is held, etc.
 */
.container {
    display: flex;
    flex-wrap: wrap;
}

.centered {
    /* centered in the midst of the screen
       usage: class="container centered" */
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.container div {
    /* basic appearence of box within the container */
    font-size: 16px;
    padding: 10px;
}

.container img {
    /* make sure they do not exceed the container width */
    max-width: 100%;
    /* maintain the aspect ratio of the image (elements do not specify
       height) */
    height: auto;
    /* ensures that the entire image is visible without any cropping */
	  //object-fit: contain;
}

/***********************************************
 * Content
 */
div .sample-box-1 {
    /* how much portion this box gets from the available viewport width */
    flex: 1 800px;
    background-color: red;
}

div .sample-box-2 {
    flex: 1 800px;
    background-color: green;
}

div .sample-box-3 {
    flex: 1 800px;
    background-color: yellow;
}

div .image-box-1 {
    flex: 1 800px;
}

div .single-box {
    flex: 1;
    background-color: #f1f1f1;
    border: 1px solid black;
    /* stretch and fill the available space along the container's cross
       axis (make boxes the same height) */
    align-self: stretch;
}