html {
    height: 100%;
  }

  body {
    
    font-family: 'Open Sans', 'Poppins', sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
    
    padding: 0;
    margin: 0;
    
    height: 100%;

    display: flex;
    flex-direction: column;

    background-image: url("background.png");
    background-size: 100% auto;
}


main {
    display: flex;
    flex-direction: row;
    flex: 1 0 auto;

    justify-content: flex-start;
    align-items: center;

    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-top: 2em;
    

    background-image: url("background.png");
    background-size: 100% auto;
}

.left-col{
    height: 100%;
    min-width: 25em;
    
    display: flex;
    /* align-items: center; */
    justify-content: center;
}
.right-col{
    
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    row-gap: 2em;

    z-index: 1;
}


@media only screen and (max-width: 412px) {
    .left-col{
        display: none;        
    }

    .right-col{
        
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        z-index: 1;
    }
}