@import './auth.css';

:root {
    --yellow-color:#ffbc35;
    --yellow-color-darker:#ffad10;
    --yellow-color-badge: #ffde9c;
    --yellow-color-badge-text: #d69209;
    --green-color:#14d58f;
    --green-color-darker:#1abe82;
    --green-color-badge: #a1f6da;
    --green-color-badge-text: #0faa7c;
    --red-color:#f45373;
    --red-color-darker:#e24564;
    --red-color-badge: #ffbac8;
    --red-color-badge-text: #ce6177;
    --blue-color:#18daf4;
    --blue-color-darker:#14c8e0;
    --blue-color-badge: #aaecf4;
    --blue-color-badge-text: #1ea6b8;
}

body, html {
    background: #eaeaea;
    font-family: 'helvetica', arial;
}

button, p, h1, h2, h3, h4, h5, h6, span, td {
    font-family: 'helvetica', arial;
}

.block-scroll {
    height: 100%;
    overflow-y: hidden;
}

.container {
    width: 600px;
    margin: 80px auto 20px;
}

.card {
    padding: 10px;
    background: white;
    border-radius: 10px;
    margin: 10px 0 10px;
}

.card h2 {
    font-size: 16px;
    padding: 0 10px 0;
}

/** Guess Area **/

.success-container {
    text-align: center;
    background: #fff;
    padding: 20px;
}

.guess-container {
    width: 600px;
    left: calc(50% - 300px);
    padding: 16px 0 16px;
    margin:0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    top: 0px;
    background: #eaeaea
}

.guess-input {
    width: 76%;
}

.guess-submit,
.guess-score {
    width: 12%;
}

.guess-submit button {
    margin: 0 10px 0;
    padding: 5px 10px 5px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    background: #f45473;
    border: 3px solid white;
    margin-left: 14px;
}

.guess-submit button:hover {
    cursor: pointer;
    border: 3px solid #f45473;
}

.guess-score {
    text-align: right;
}

.guess-score span {
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 20px;
    border: none;
    width: 38px;
    height: 38px;
    font-size: 14px;
    background: white;
    color: #f45473;
    display: inline-block;
}

/** table **/

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    color: white;
}

table thead {
   font-size: 14px;
}

table thead th {
    padding: 10px 14px 10px;
    text-align: left;
    color: white;
    opacity: 0.65;
}

table thead tr th:nth-child(1) {
    padding-left: 24px;
} 

table tbody tr td {
    font-size: 14px;
    padding: 10px 14px 10px;
}

table tbody tr td.no-data {
    text-align: center;
}

table tbody tr td:nth-child(1) {
    width: 28%;
    font-weight:bold;
}

table tbody tr td:nth-child(3),
table tbody tr td:nth-child(4) {
    width: 10%;
    font-weight:bold;
}

table tbody tr td.button {
    width: 30px;
    padding: 0 10px 0 0;
}

table tbody tr td:nth-child(1) span {
    margin-bottom: 4px;
    display: inline-block;
    padding: 6px 10px 6px;
    border-radius: 6px;
    font-weight: bold;
}

table tbody tr.strike td b {
    text-indent: -1000px;
    background: #fff;
    display: inline-block;
    height: 16px;
    width: 100%;
    margin-top: 15px;
    opacity: 0.25;
}

table button {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    padding: 6px;
    font-weight: bold;
    background: #fff;
    border: none;
}

table button.active {
    opacity: 0.5;
}

table button.show_number {
    opacity: 1;
}

/** Clubs **/

.clubs {
    background: var(--green-color-darker);
}

.clubs.card {
    background: var(--green-color);
}

.clubs table tbody tr td:nth-child(1) span {
    background: var(--green-color-badge);
    color: var(--green-color-badge-text);
}

.clubs table tbody tr:nth-child(even) td {
    background: var(--green-color-darker);
}

.clubs table button {
    color: var(--green-color-darker);
}

/** Position **/

.position {
    background: var(--yellow-color-darker);
}

.position.card {
    background: var(--yellow-color)
}

.position table tbody tr td:nth-child(1) span {
    background: var(--yellow-color-badge);
    color: var(--yellow-color-badge-text);
}

.position table tbody tr:nth-child(even) td {
    background: var(--yellow-color-darker);
}

.position table tbody tr td:nth-child(2) {
    width: 40%;
}

.position table tbody tr td:nth-child(3) {
    width: 30%;
}

.position table button {
    color: var(--yellow-color-darker);
}

/** Internationals **/

.international {
    background: var(--red-color-darker);
}

.international.card {
    background: var(--red-color)
}

.international table tbody tr td:nth-child(1) span {
    background: var(--red-color-badge);
    color: var(--red-color-badge-text);
}

.international table tbody tr:nth-child(even) td {
    background: var(--red-color-darker);
}

.international table button {
    color: var(--red-color-darker);
}

/** Awards **/

.awards {
    background: var(--blue-color-darker);
}

.awards.card {
    background: var(--blue-color)
}

.awards table tbody tr td:nth-child(1) span {
    background: var(--blue-color-badge);
    color: var(--blue-color-badge-text);
}

.awards table tbody tr:nth-child(even) td {
    background: var(--blue-color-darker);
}

.awards table tbody tr td:nth-child(2) {
    width: 70%;
}

.awards table button {
    color: var(--blue-color-darker);
}

/** Bonus Select **/

.bonus-header {
    text-align: center;
    margin: 19px;
    opacity: 0.5;
    font-weight: 600;
}

.bonus-select {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.bonus-select button {
    margin: 10px;
    padding: 10px 30px 10px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 30px;
    border: none;
    font-size: 14px;
    border: 3px solid white;
}

.bonus-select button:hover,
.bonus-select button:active,
.bonus-select button:focus {
    cursor: pointer;
}

/** Finish Modal **/

.modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background:#00000050;
    z-index: 10000;
}

.modal-content {
    width: 300px;
    left: calc(50% - 150px);
    height: 200px;
    top: calc(50% - 100px);
    background: #fff;
    border-radius: 20px;
    position: absolute;
}

.modal-content.success {
    background: var(--green-color);
    text-align: center;
    color: white;
    border: 3px solid var(--green-color-darker);
}

.modal-content.failure {
    background: var(--red-color);
    text-align: center;
    color: white;
    border: 3px solid var(--red-color-darker);
}

/* animate text */

.modal-content > p {
    cursor: default; /* to keep the cursor the same */
    opacity: 0;
	animation: fadeInText 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.modal-content p.heavy {
    font-weight: 900;
    font-size: 30px;
  }
  
.modal-content p.medium {
    font-weight: 500;
    font-size: 22px;
}

.modal-content p.light {
    font-weight: 300;
    font-size: 14px;
}

/* animate button */

.modal-content button {
    animation: fadeInButton 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	animation-delay: 0.3s;
}

.modal-content button {
    font-weight: 400;
    font-size: 1em;
    color: #FFF;
    background: transparent; 
    border: 2px solid #FFF; 
    border-radius: 4px; 
    text-decoration: none;
    text-transform: uppercase;
    padding: 4px 8px 4px;
    text-align: center;
    display: inline-block;
    margin: 10px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.modal-content button:hover {
    background-color: #FFF;
}

.modal-content.success button:hover {
    color: var(--green-color-darker)
}

.modal-content.failure button:hover {
    color: var(--red-color-darker)
}

/* animate each sentence individually */

.modal-content p:first-child {
	animation-delay: 0s;
    margin-top: 30px;
}
.modal-content p:nth-child(2) {
	animation-delay: 0.1s;
}
.modal-content p:nth-child(3) {
	animation-delay: 0.2s;
}

/* Keyframe for animation  */

@keyframes fadeInText {
 0% {
		opacity: 0;
		transform: translate3d(0, -30%, 0);
	}
100% {
        text-shadow: none;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInButton {
 0% {
		opacity: 0;
        transform: scale(0.95);
	}
100% {
        transform: scale(1);
		opacity: 1;
	}
}

/** Mobile **/

@media (max-width: 620px) {
    body {
        min-height: 100vh;
    }

    .container,
    .guess-container { 
        width: 100%;
    }

    .container {
        margin-bottom: 0;
        margin-top: 70px;
    }

    .guess-container {
        left: auto;
        margin: 0px;
    }

    .guess-input {
        padding-left: 10px;
        width: calc(100% - 148px);
    }

    .guess-submit {
        width: 88px;
    }

    .guess-score {
        width: 60px;
        text-align:center;
    }

    .card {
        padding: 0 0 10px 0;
        border-radius: 0;
        margin: 0;
        border-bottom: 1px solid #00000050;
    }

    table thead tr th:first-child {
        padding-left: 14px;
    }

    table tbody tr td:nth-child(1) span {
        padding: 2px;
    }

}