html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #f1f1f1;
}

body {
    min-height:100%;
}

#backbutton {
    display:flex;
    width:90%;
    height:auto;
    padding:15px 5%;
    border-bottom:2px solid #fff;
}

#backbutton a {
    text-decoration: none;
    color:#51766b;
    font-size:1.2em;
    font-weight:bold;
    margin:0px 0px 0px 0px;
}

#backbutton a i {
    color:#2d3142;
}

header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    flex-wrap: wrap;
}

#logo {
    text-align: center;
    flex:1;
    height:auto;
    padding:0px 5px;
    margin:50px 0px 0px 0px;
}

#logo img{
    height:100px;
    width:auto;
}

#page_title {
    flex:1;
    height:auto;
    padding:0px 5px;
    margin:100px 0px 0px 0px;
    text-align: center;
    font-size: 2em;
    color: #51766b;
}

#page_title h1 {
    color:#ef8354;
    font-weight: bold;
    margin-left:20px;
    font-size:1.2em;
    padding:0px;
}

main {
    margin:50px 0px 0px 0px;
    width:70%;
    display:flex;
    padding:30px 15% 80px 15%;
    background-color: #fff;
    /* min-height:70%; */
    line-height: 1.7em;
    flex-direction: column;
}

main code {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #ef8354;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}


#interest {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:30px 0px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:#2d3142;
    color:#fff;
    text-align:center;
    font-size:0.8em;
}

#interest .interest_title {
    font-size:1.7em;
    line-height:2em;
    padding:10px 0px 10px 0px;
    flex:1;
}

#interest .interest_text {
    font-size:1.4em;
    line-height:1.7em;
    padding:10px 0px 10px 0px;
    flex:1;
}

#interest .interest_button {
    padding:20px 30px 20px 30px;
    margin:10px 0px 10px 0px;
    border:1px solid #fff;
    background-color:#ef8354;
    border-radius:5px;
    font-weight:bold;
    font-size:1.1em;
}

#interest .interest_button a {
    text-decoration: none;
    color:#fff;
    font-weight:bold;
    font-size:1.1em;
}

footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top:70px;
    padding:10px 0px 10px 0px;
    position:relative;
    bottom:0px;
    background-color:#51766b;
    color:#fff;
    text-align:center;
    font-size:0.8em;
}


.footer_column {
    text-align:left;
    margin:0px 5% 0px 5%;
}

.footer_column img {
    height:75px;
}

.footer_column a {
    color:#fff;
}

@media only screen and (max-width: 768px) {

    #backbutton {
        display:flex;
        width:94%;
        height:auto;
        padding:25px 3%;
        border-bottom:1px solid #fff;
    }
    
    #backbutton a {
        text-decoration: none;
        color:#51766b;
        font-size:1em;
        font-weight:bold;
        margin:0px 0px 0px 0px;
    }
    
    header {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        flex-wrap: wrap;
    }
    
    #logo {
        height:auto;
        padding:0px 5px;
        margin:50px 0px 0px 0px;
    }
    
    #logo img{
        height:60px;
    }
    
    #page_title {
        flex:1;
        height:auto;
        padding:0px 5px;
        margin:50px 0px 0px 0px;
        text-align: center;
        font-size: 1.5em;
        line-height:1.8em;
    }
    
    main {
        margin:50px 0px 0px 0px;
        width:90%;
        display:flex;
        padding:10px 5% 70px 5%;
        background-color: #fff;
        line-height: 1.7em;
        min-height:0px;
    }
    
    #interest {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:96%;
        padding:30px 2%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        background-color:#2d3142;
        color:#fff;
        text-align:center;
        font-size:0.8em;
    }
    
    #interest .interest_title {
        font-size:1.3em;
        line-height:1.7em;
        padding:10px 0px 10px 0px;
        flex:1;
    }
    
    #interest .interest_text {
        font-size:1.1em;
        line-height:1.5em;
        padding:10px 0px 10px 0px;
        flex:1;
    }
    
    #interest .interest_button {
        padding:20px 30px 20px 30px;
        margin:10px 0px 10px 0px;
        border:1px solid #fff;
        background-color:#ef8354;
        border-radius:5px;
        font-weight:bold;
        font-size:1.1em;
    }
    
    #interest .interest_button a {
        text-decoration: none;
        color:#fff;
        font-weight:bold;
        font-size:1.1em;
    }

    footer {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    
        padding:10px 0px 10px 0px;
        position:relative;
        bottom:0px;
        background-color:#51766b;
        color:#fff;
        text-align:center;
        font-size:0.8em;
    }

    .footer_column {
        text-align:left;
        flex: 0 0 calc(50% - 40px); /* Adjust width here, subtracting margin */
        margin: 20px 10px 20px 10px; /* Adjust margin to create space between children */
        padding: 10px 10px 10px 10px;
    }
    
    .footer_column img {
        height:75px;
    }
    
    .footer_column a {
        color:#fff;
    }
}