input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.fomycup-info {
    width: 100%;
    display: inline-flex;
}

.fomycup-image {
    width: 500px;
}

.fomycup-text {
    overflow: hidden;
    font-size: 20px;
    font-family: ExoSoftMedium;
    color: #c8d5f2;
    margin: 15px 0 10px 0px;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.5;
}

.partner-form {
  width: 700px;
  margin: 0 auto;
}

.partner-form-group {
  margin-top: 15px;
}

.partner-form-group span {
  margin-top: 5px;
}

.partner-form-group span a {
  color: rgb(8, 112, 223);
}

.partner-form-group span a:hover {
  text-decoration: underline;
}

.partner-form-group p {
  margin: 20px 0 0 20px;
  position: absolute;
  font-size: 15px;
  display: inline;
}

.partner-form-label {
  display: block;
}

.partner-form-input {
  height: 60px;
  width: 100%;
  background: #121622;
  border: 2px solid rgb(8, 112, 223);
  border-radius: 30px;
  padding: 0 30px;
  color: white;
  font-size: 16px;
  font-family: ExoSoftLight;
  margin: 5px 0;
}

.partner-form-input:focus {
  border: 2px solid rgb(255, 240, 0);
}

.form-checkbox {
  width: 25px;
  cursor: pointer;
  vertical-align: middle;
}

.form-checkbox-label {
    display: inline;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
}

.partner-form-button {
    width: 300px;
    height: 75px;
    border: 5px solid rgb(0, 0, 0);
    border-radius: 50px;
    font-size: 24px;
    font-family: ExoSoftMedium;
    background: rgb(8, 112, 223);
    cursor: pointer;
    margin: 30px 0 0 calc(50% - 150px);
    transition: 0.5s;
}

.partner-form-button:hover {
    box-shadow: 0 0 20px rgb(8, 112, 223);
    transition: 0.5s;
}

/* ===================================== */

.hero {position:relative; text-align: center; overflow: hidden; color: #fcfcfc; }
.hero h1 {font-family: 'Holtwood One SC', serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}
.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #5CCA87; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}
.hero-wrap {padding: 3.5em 10px;}
.hero p.intro {font-family: 'Holtwood One SC', serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-40px;}
.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}
.hero p.year i {font-size: 14px;vertical-align: middle;}
#bracket {overflow:hidden;padding-top: 20px;font-size: 12px;padding: 40px 0;color: black; background: rgba(0, 0, 0, 0.8);}
.container-fomycup {width: 95%;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.split {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}
.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;} 
.champion i {color: #a0a6a8; font-size: 45px;padding: 10px 0; }
.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;width:30.8333%\9;}
.split-two {}
.split-one .round {margin: 0 2.5% 0 0;}
.split-two .round {margin: 0 0 0 2.5%;}
.matchup {margin:0;width: 100%;padding: 10px 0;height:60px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.score {font-size: 11px;text-transform: uppercase;float: right;color: rgb(8, 112, 223);font-weight: bold;font-family: 'Roboto Condensed', sans-serif;position: absolute;right: 5px; font-size: 13px;}
.team {padding: 0 5px;margin: 3px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;padding-left: 10px;}
.round-two .matchup {margin:0; height: 60px;padding: 50px 0;}
.round-three .matchup {margin:0; height: 60px; padding: 130px 0;}
.round-details {font-family: 'Roboto Condensed', sans-serif; font-size: 20px; color: rgb(8, 112, 223);text-transform: uppercase;text-align: center;height: 40px; font-weight: bold;}
.champion li, .round li {background-color: #fff;box-shadow: none; opacity: 1; border-radius: 20px;}
.current li {opacity: 1; border-radius: 20px; font-size: 13px;}
.current li.team {background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1;}
.vote-options {display: block;height: 52px;}
.share .container-fomycup {margin: 0 auto; text-align: center;}
.share-icon {font-size: 24px; color: #fff;padding: 25px;}
.share-wrap {max-width: 1100px; text-align: center; margin: 60px auto;}
.final {margin: 4.5em 0;}
.winner {font-weight: bold;}
.winner-final {font-weight: bold; font-size: 19px !important;}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.share-icon {color: #fff; opacity: 0.35; }
.share-icon:hover { opacity:1;  -webkit-animation: pulse 0.5s; animation: pulse 0.5s;}
.date {font-size: 10px; letter-spacing: 2px;font-family: 'Istok Web', sans-serif;color:rgb(255, 240, 0);}



@media screen and (min-width: 981px) and (max-width: 1099px) {
  .container-fomycup {margin: 0 1%;}
  .champion {width: 14%;}
  .split {width:43%; }
  .split-one .vote-box {margin-left: 138px;}
  .hero p.intro {font-size: 28px;}
  .hero p.year {margin: 5px 0 10px;}

}

@media screen and (max-width: 980px) {
  .container-fomycup {-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;}
  .split, .champion {width: 90%;margin: 35px 5%;}
  .champion {-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;}
  .split {border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
  .hero p.intro {font-size: 24px;}
  .hero h1 {font-size: 3em; margin: 15px 0;}
  .hero p {font-size: 1em;}
}


@media screen and (max-width: 400px) {

  .split {width: 95%;margin: 25px 2.5%;}
  .round {width:21%;}
  .current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;}
  .hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; }
  .hero p.intro {font-size: 1.15em;margin-bottom: -10px;}
  .round-details {font-size: 90%;}
  .hero-wrap {padding: 2.5em;}
  .hero p.year {margin: 5px 0 10px; font-size: 18px;}

}
/* ================================== */

#teams {
    font-family: Arial, sans-serif;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    background: rgba(0, 0, 0, 0.8);
}

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}

th {
    background: #007BFF;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

th img {
    width: 50px;
    height: 50px;
}

td {
    ppadding: 10px;
    border-top: 1px solid #eee;
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}


#votes {
    font-family: Arial, sans-serif;
    padding: 20px;
    display: grid;
    gap: 20px;
    background: rgba(0, 0, 0, 0.8);
}

.container-voters {
  max-width: 600px;
  background: #fff;
  margin: auto;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-player-vote {
  margin-bottom: 15px;
}

.form-label-players {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: black;
}

.form-input-players {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: black;
}

.btn-vote {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.btn-vote:hover {
  background-color: #218838;
}