@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

body {
    /* Margin bottom by footer height */
    font-family: 'Roboto', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    color: #717271;
}

.outer-container {
    position: relative;
    margin: 0 auto;
    width: 98vw;
    max-width: 1200px;
    height: 45vw;
    max-height: 550px;
    border: 1px solid #0081c9;
}

    .outer-container span {
        position: absolute;
        top: 4vw;
        font-size: 16vw;
        padding: 4vw;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 50%;
    }

.navbar-brand-image {
    width: 100%;
}
.btn-primary {
    color: #3e3935;
    background-color: #ffc828;
    border-color: #ffc828;
    font-weight: bold;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:active:hover,
    .btn-primary:active:focus {
        background-color: #717271;
        border-color: #717271;
    }

.app-name {
    text-align: center;
}
    .app-name h1 {
        margin-bottom: 30px;
        font-size: 70px;
        line-height: 60px;
        font-weight: 300;
        text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.5);
    }
    .app-name .gray { color: #717271; }
    .app-name .yellow { color: #ffc828; }

h2 { color: #717271; margin-bottom: 30px; margin-top: 10px; }
.site-header { text-align: center; }
.site-footer { text-align: center; }
    .site-header .img-responsive {display: inline-block }

/* Helper Classes */
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }


.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }

/*
    Extra small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap
*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .site-header { text-align: left; }
    .site-footer { text-align: right; }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    
}