* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    width: 100%;
}

body {
    display: grid;
    justify-content: center;
}

.center {
    display: grid;
    justify-content: center;
    width: 100%;
}

.full {
    height: 80vh;
}

.height {
    height: 100vh;
}

button {
    cursor: pointer;

    border: 2px solid gray;
    border-radius: 10px;

    font-size: 1.3em;

    background-color: white;
}

.info {
    color: gray
}

.game-bg {
    width: 100vw;
    background-color: wheat;
}

.game-box:nth-child(2n-1) button:hover {
    transform: scale(0.98) rotate(1deg);
}
.game-box:nth-child(2n) button:hover {
    transform: scale(0.98) rotate(-1deg);
}

button:active {
    transform: scale(0.95) !important;
}

h1, h2, h3, h4, h5, .game-tagline, button, b, a, button p {
  font-family: "Walter Turncoat", cursive;
  font-style: normal;
}

button * {
    text-decoration: none !important;
}

* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.movie {
    width: 100%;
    aspect-ratio: 1.3;

    border: 2px solid gray;
}

.showreel {
    width: 700px !important;
    aspect-ratio: 1.5 !important;
}

.game-box {
    border: 2px solid gray;
    border-radius: 5px;

    padding: 15px;
    padding-left: 25px;
    padding-right: 25px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    margin-bottom: 20px;
    margin-top: 20px;
    
    background-color: white;
    width: 900px;
}

.game-box-left,
.game-box-right {
    display: grid;
    align-items: center;
}

.game-bg:nth-child(2n+1) .game-box-left {
    order: 2;
    padding-left: 20px;
    padding-right: 0;
}

.game-title {
    text-align: center;
}

.game-tagline {
    text-align: center;
    padding-bottom: 10px;
}

.game-info-box {
    padding-bottom: 20px;
}

.game-see-more {
    width: 200px;
    height: 50px;
}