body {
    background-color: black;
    color: white;
}

.yellow {
    color: yellow;
}

h1 {
    font-size: 48pt;
}

.s14 {
    font-size: 14pt;
}

.inline {
    display: inline;
}

.pad-medium {
    padding: 10px;
}

.center {
    text-align: center;
}

.script {
    font-family: 'Mr Dafoe', sans-serif;
}

.sans {
    font-family: 'Lato', 'Arial', sans-serif;
}

.spacer-v {
    margin: 30px 0px;
}

.container {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    height: 100vh;
}

.img-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.connect-button {
    height: 46px;
    width: 46px;
    border: none;
    background-color: #222233;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    margin: 0px 5px;
    transition-duration: 200ms;
}

.connect-button-container {
    margin: 15px 0px;
}

.connect-button:hover {
    cursor: pointer;
    background-color: #444466;
}

.connect-button-interior {
    height: 18px;
    width: 18px;
    margin: auto;
    vertical-align: middle;
}

.photo-2 {
    margin: 3px;
    width: max(28vw, 225px);
    height: max(28vw, 225px);
    object-fit: cover;
}

.photo-3 {
    margin: 3px;
    width: max(18vw, 150px);
    height: max(18vw, 150px);
    object-fit: cover;
}

.photo-4 {
    margin: 3px;
    width: max(13vw, 112px);
    height: max(13vw, 112px);
    object-fit: cover;
}

.photo-5 {
    margin: 3px;
    width: max(11vw, 90px);
    height: max(11vw, 90px);
    object-fit: cover;
}

.photo-6 {
    margin: 3px;
    width: max(9vw, 75px);
    height: max(9vw, 75px);
    object-fit: cover;
}

.info-container {
    flex-grow: 2;
    width: max(40vw, 300px);
    padding: 10px;
}

.img-container {
    flex-grow: 3;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
    height: 95%;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .info-container {
        flex-grow: 2;
        width: 100vw;
        padding: 10px;
    }
}
