html {
    height: 100%;
    background: #0a384e;
    color: white;
    font-family: monaspace-krypton;
}

*.hidden {
    display: none;
}

body {
    height: 100%;
}

.content {
    text-align: center;
    width: 65%;
    margin: 0 auto;

}

a {
  color: white;
}

.content ol {
  text-align: justify;
  width: 70%;
  font-size: 1.3em;
  margin: 0 auto;
}

#img {
    background-image: url(/assets/thumbnails/straits.webp);
    background-size: 100%;
    box-shadow: inset 0 0 10px black;
    position: relative;
    background-position: 0 100%;
}

video {
    display: block;
}

#img, video {
    width: 70%;
    aspect-ratio: 16/12;
    margin: 3em auto;
    border: 1px solid #f0be29;
    cursor: pointer;
}

#play {
    width: 15%;
    aspect-ratio: 1;
    background: #0a384e;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    border: 3px solid #f0be29;
    box-shadow: 0 0 10px black;
    color: #f0be29;
    opacity: .8;
    transition: .3s all;
}

#img:hover #play {
    box-shadow: 0 0 30px 16px white;
}

#play svg:first-child {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    position: absolute;
}

input[type=button] {
    width: 50%;
    transition: background-color .3s, box-shadow .3s;

    padding: 12px 16px 12px 16px;
    border: 1px solid #FAFAFA;
    border-radius: 3px;
    margin: .3em;

    color: #FAFAFA;
    font-size: 1.2em;
    font-weight: 500;

    background-color: #07212d;
    background-repeat: no-repeat;

    &:hover {
        background-color: #2b4e5e;
    }

    &:active {
        background-color: #eeeeee;
    }

    &:focus {
        outline: none;
    }

    &:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }

    cursor: pointer;
    font-family: monaspace-krypton;
}

input[type=email] {
    width: calc(50% - 32px);
    transition: background-color .3s, box-shadow .3s;
    display: block;
    text-align: center;

    padding: 12px 16px 12px 16px;
    border: 1px solid #FAFAFA;
    border-radius: 3px;
    margin: .3em auto;
    outline: none;

    /*color: #FAFAFA;*/
    font-size: 1.2em;
    font-weight: 500;

    /*background-color: #07212d;
    background-repeat: no-repeat;*/

    &:hover {
        /*background-color: #2b4e5e;*/
    }

    &:active {
        /*background-color: #eeeeee;*/
    }

    font-family: monaspace-krypton;
}

.login-with-google-btn {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-position: 14px 14px;
}

.login-with-github-btn {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5OCA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzczMF8yNzEzNikiPgo8cGF0aCBkPSJNNDEuNDM5NSA2OS4zODQ4QzI4LjgwNjYgNjcuODUzNSAxOS45MDYyIDU4Ljc2MTcgMTkuOTA2MiA0Ni45OTAyQzE5LjkwNjIgNDIuMjA1MSAyMS42Mjg5IDM3LjAzNzEgMjQuNSAzMy41OTE4QzIzLjI1NTkgMzAuNDMzNiAyMy40NDczIDIzLjczNDQgMjQuODgyOCAyMC45NTlDMjguNzEwOSAyMC40ODA1IDMzLjg3ODkgMjIuNDkwMiAzNi45NDE0IDI1LjI2NTZDNDAuNTc4MSAyNC4xMTcyIDQ0LjQwNjIgMjMuNTQzIDQ5LjA5NTcgMjMuNTQzQzUzLjc4NTIgMjMuNTQzIDU3LjYxMzMgMjQuMTE3MiA2MS4wNTg2IDI1LjE2OTlDNjQuMDI1NCAyMi40OTAyIDY5LjI4OTEgMjAuNDgwNSA3My4xMTcyIDIwLjk1OUM3NC40NTcgMjMuNTQzIDc0LjY0ODQgMzAuMjQyMiA3My40MDQzIDMzLjQ5NjFDNzYuNDY2OCAzNy4xMzI4IDc4LjA5MzcgNDIuMDEzNyA3OC4wOTM3IDQ2Ljk5MDJDNzguMDkzNyA1OC43NjE3IDY5LjE5MzQgNjcuNjYyMSA1Ni4zNjkxIDY5LjI4OTFDNTkuNjIzIDcxLjM5NDUgNjEuODI0MiA3NS45ODgzIDYxLjgyNDIgODEuMjUyTDYxLjgyNDIgOTEuMjA1MUM2MS44MjQyIDk0LjA3NjIgNjQuMjE2OCA5NS43MDMxIDY3LjA4NzkgOTQuNTU0N0M4NC40MTAyIDg3Ljk1MTIgOTggNzAuNjI4OSA5OCA0OS4xOTE0Qzk4IDIyLjEwNzQgNzUuOTg4MyA2LjY5NTM5ZS0wNyA0OC45MDQzIDQuMzA5ZS0wN0MyMS44MjAzIDEuOTIyNjFlLTA3IC0xLjk0NzllLTA3IDIyLjEwNzQgLTQuMzM0M2UtMDcgNDkuMTkxNEMtNi4yMDYzMWUtMDcgNzAuNDM3NSAxMy40OTQxIDg4LjA0NjkgMzEuNjc3NyA5NC42NTA0QzM0LjI2MTcgOTUuNjA3NCAzNi43NSA5My44ODQ4IDM2Ljc1IDkxLjMwMDhMMzYuNzUgODMuNjQ0NUMzNS40MTAyIDg0LjIxODggMzMuNjg3NSA4NC42MDE2IDMyLjE1NjIgODQuNjAxNkMyNS44Mzk4IDg0LjYwMTYgMjIuMTA3NCA4MS4xNTYzIDE5LjQyNzcgNzQuNzQ0MUMxOC4zNzUgNzIuMTYwMiAxNy4yMjY2IDcwLjYyODkgMTUuMDI1NCA3MC4zNDE4QzEzLjg3NyA3MC4yNDYxIDEzLjQ5NDEgNjkuNzY3NiAxMy40OTQxIDY5LjE5MzRDMTMuNDk0MSA2OC4wNDQ5IDE1LjQwODIgNjcuMTgzNiAxNy4zMjIzIDY3LjE4MzZDMjAuMDk3NyA2Ny4xODM2IDIyLjQ5MDIgNjguOTA2MyAyNC45Nzg1IDcyLjQ0NzNDMjYuODkyNiA3NS4yMjI3IDI4LjkwMjMgNzYuNDY2OCAzMS4yOTQ5IDc2LjQ2NjhDMzMuNjg3NSA3Ni40NjY4IDM1LjIxODcgNzUuNjA1NSAzNy40MTk5IDczLjQwNDNDMzkuMDQ2OSA3MS43NzczIDQwLjI5MSA3MC4zNDE4IDQxLjQzOTUgNjkuMzg0OFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNzMwXzI3MTM2Ij4KPHJlY3Qgd2lkdGg9Ijk4IiBoZWlnaHQ9Ijk2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
    background-position: 11px 11px;
    background-size: 25px;
}

header {
    height: 15%;
}

header p {
    display: inline-block;
    margin-left: 1em;
}

p {
    font-size: 1.4em;
}

.logo {
    margin-top: .55em;
    margin-left: 1em;
    color: white;
    font-family: monaspace-xenon;
    font-size: 2.4em;
    font-weight: bold;
    cursor: default;
    color: #f0be29;
}

#arena-name {
    font-size: 3em;
}

#teamName, select {
    font-size: 1.5em;
    margin: .5em;
    width: 33%;
    height: 2.5em;
    padding: .2em;
    outline: none;
    border: none;
    font-family: monaspace-xenon;
    text-align: center;
}

#joinTeamCode, #newTeamCode {
    font-size: 1.5em;
    margin: .5em;
    width: 16%;
    height: 2.5em;
    padding: .2em;
    outline: none;
    border: none;
    font-family: monaspace-xenon;
    text-align: center;
}

#start-trial-btn {
    cursor: pointer;
    font-size: 1.5em;
    margin: .5em;
    width: 52%;
    text-align: center;
    padding: .2em;
    outline: none;
    font-family: monaspace-krypton;
    height: 3.5em;
    border-radius: 3px;
    border: 1.5px solid #f0be29;
    background: transparent;
    color: #0a384e;
    position: relative;
    transition: color .4s;
}

#start-trial-btn::before {
    background-color: #FAFAFA;
    content: "";
    height: calc(100% + 3px);
    width: 100%;
    display: inline-block;
    position: absolute;
    right: -10px;
    top: -12px;
    z-index: -1;
    border-radius: 3px;
    transition: background-color .4s;
}

#start-trial-btn:hover {
    color: #f0be29;
}

#start-trial-btn:hover::before {
    background-color: #2b4e5e;
}

#start-trial-btn:active::before {
    right: -5px;
    top: -8px;
}

.loader {
    width: 100px;
    aspect-ratio: 1;
    display: grid;
    margin: 0 auto;
}
.loader::before,
.loader::after {
    content:"";
    grid-area: 1/1;
    --c:no-repeat radial-gradient(farthest-side, #FAFAFA 92%,#0000);
    background:
        var(--c) 50%  0,
        var(--c) 50%  100%,
        var(--c) 100% 50%,
        var(--c) 0    50%;
    background-size: 12px 12px;
    animation: l12 1s infinite;
}
.loader::before {
    margin: 4px;
    --c:no-repeat radial-gradient(farthest-side,#f0be29 92%,#0000);
    background-size: 8px 8px;
    animation-timing-function: linear
}

@keyframes l12 {
    100%{transform: rotate(.5turn)}
}