body {
    font-family: Helvetica;
}

a {
    text-decoration: none;
    color: green;
    font-weight: bold;
    font-size: 2em;
}

.lang-select {
    color: rgb(153, 127, 12);
    text-align: right;
    padding: 20px;
    font-weight: bold;

}
.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.hero-container {
    height: 92vh;
    background-image: url("img/logo-large-2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-title h1{
    display: flex;
    text-align: right;
    padding: 2em 3em;
    font-size: 6em;
    color: green;
}

.play-link {
    width: 26%;
    height: 13%;
    float: bottom;
}

.main {
    width: 90%;
    margin: auto;
}
.nav {
    display: flex;
    flex-wrap: wrap;
}
.nav-item {
    flex: 1;
    padding: 1em;
    text-align: center;
}

.game {
    display: flex;
}

.game h2 {
    text-align: right;
    padding: 1em;
}

.game-text {
    flex: 1;
    padding: 1em;
}

.game-img {
    flex: 1;
}
.team-header {
    display: flex;
}

.team-header-content {
    flex: 1;
    text-align: center;
    padding: 1em;
}
.team {
    display: flex;
}

.team-card {
    flex: 1;
    width: 25%;
    padding: 1em;
    text-align: center;
}

.card-img {
    display: block;
    width: 20vh;
    height: 20vh;
    margin: 0 auto;
    border-radius: 10px;
}

.project {
    display: flex;
}

.project h2 {
    text-align: left;
    padding: 1em;
}

.project-text {
    flex: 1;
    padding: 1em;
}

.project-img {
    flex: 1;
}

.msml-link {
    text-decoration: none;
    font-size: 1em;
    color: blue;
}

.msml-img {
    max-width: 80%;
}

.back-to-top {
    display: flex;
}

.back-to-top-content {
    flex: 1;
}

.portal {
    display: flex;
}

.portal-link {
    flex: 1;
    width: 100vh;
    margin: auto;

}
.footer {
    display: flex;
}

.footer-content {
    flex: 1;
}

.footer-img {
    flex: 1;
    padding: 10px;
    max-width: 260px;
    margin: auto;
}

.footer-content > a {
    text-align: right;
    padding: 1em;
}

@media all and (max-width: 800px) {
    .main { flex-flow: row wrap; }
    a { font-size: 1.4em; }
    iframe { width: 400px; height: 225px; }
    .game-img { margin: auto; padding: 5px;}
    .team-card { width: 50%; }
    .project-img { display: none; }
    .hero-container { background-image: url("img/logo-large.png"); max-width: auto; }
    .play-link { display: block; }
}