*{
    color: #555555;
    font: normal 16px Arial, Helvetica, sans-serif; 
    line-height: 1.6em;

}

@font-face {
    font-family: "esport";
    src: url("Fonts/gravtrac/gravtrac compressed bd.ttf");
}

@font-face {
    font-family: "slab";
    src: url("Fonts/Corki/TD-Corki-Regular.otf");
}
    
html, body{
    margin: 0;
    padding: 0;

}

body {
    background-image: url("Images/background-pdf.png");
    background-attachment: scroll;
    background-size: 100% auto;
    background-repeat: repeat;
    background-position: center top;
    text-align: center;
    margin-bottom: 50px;
}

.clr{
    clear:both;
}

.headerimg {
    padding: 0%;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding-bottom: 50px;
}

.buttonimg {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}

#winnings {
    background-color: rgba(255,255,255,0.95);
    border-radius: 1.2rem;
    width: 70%;
    max-width: 850px;
    margin: auto;
    display: grid;
    grid-gap: 5px;
    grid-auto-flow: row;
    grid-template-columns: repeat(6,1fr);
    place-items: center;
    place-content: center;
    padding: 10px;
}

.win-title {
    grid-area: 1 / 1 / 2 / 7;
    text-align: center;
    font-size: 2.5em;
    font-weight: bolder;
    color: #222;
}

.first-place {
    grid-area: 2 / 1 / 3 / 7;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #897129;
}

.second-place {
    grid-area: 3 / 1 / 4 / 4;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    color: #75757a;
}

.third-place {
    grid-area: 3 / 4 / 4 / 7;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    color: #67381a;
}

.fourth-place {
    grid-area: 4 / 1 / 5 / 4;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #222;
}

.fifth-place {
    grid-area: 4 / 4 / 5 / 7;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #222;
}
.sixth-place {
    grid-area: 5 / 1 / 6 / 3;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}
.seventh-place {
    grid-area: 5 / 3 / 6 / 5;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}
.eighth-place {
    grid-area: 5 / 5 / 6 / 7;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}
.ninth-place {
    grid-area: 6 / 1 / 7 / 3;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}
.tenth-place {
    grid-area: 6 / 3 / 7 / 5;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}
.last-place {
    grid-area: 6 / 5 / 7 / 7;
    text-align: center;
    font-size: 1.05em;
    font-weight: bold;
    color: #222;
}

#leaderboard-container {
    background-image: url("Images/leaderboard-topper.png");
    max-width: 1000px;
    width: 90%;
    margin: auto;
    background-attachment: scroll;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 10.5%;
    text-align: center;
}

#leaderboard-container input {
    background-color: rgba(255,255,255,0.95);
    max-width: 1000px;
    width: 90%;
    margin: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 3rem;
    font-size: 1.25rem;
    border: none;
    text-align: center;
    font-family: "esport";
}
.leaderboard-slot {
    background-color: rgba(255,255,255,0.95); 
    max-width: 1000px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-gap: 0px;
    grid-auto-flow: row;
    grid-template-columns: repeat(13, 7.69%);
    place-items: center;
    place-content: center;
    padding-bottom: 10px;
    border-bottom: 0.5px dotted #222;
}

.rank {
    grid-area: 1 / 1 / 5 / 2;
    text-align: center;
    text-justify: center;
    font-weight: bolder;
    font-size: 1.6em;
    color: #222;
    font-family: "esport";
}

.team {
    grid-area: 1 / 2 / 2 / 10;
    text-align: center;
    text-justify: center;
    font-weight: bolder;
    font-size: 1.8em;
    color: #222;
    font-family: "esport";
    padding: 4px 0px;
}

.proj-money {
    grid-area: 1 / 10 / 2 / 14;
    text-align: center;
    text-justify: center;
    font-weight: bolder;
    font-size: 1.5em;
    color: #222;
    font-family: "esport";
}

.first-golfer {
    grid-area: 2 / 2 / 3 / 4;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.second-golfer {
    grid-area: 2 / 4 / 3 / 6;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.third-golfer {
    grid-area: 2 / 6 / 3 / 8;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.fourth-golfer {
    grid-area: 2 / 8 / 3 / 10;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.fifth-golfer {
    grid-area: 2 / 10 / 3 / 12;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.sixth-golfer {
    grid-area: 2 / 12 / 3 / 14;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.seventh-golfer {
    grid-area: 3 / 2 / 4 / 4;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.eigth-golfer {
    grid-area: 3 / 4 / 4 / 6;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.ninth-golfer {
    grid-area: 3 / 6 / 4 / 8;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.tenth-golfer {
    grid-area: 3 / 8 / 4 / 10;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.eleventh-golfer {
    grid-area: 3 / 10 / 4 / 12;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

.twelvth-golfer {
    grid-area: 3 / 12 / 4 / 14;
    text-align: center;
    text-justify: center;
    font-size: 0.95em;
    color: #222;
    font-family: "slab";
}

@media screen and (max-device-width: 1280px) {
    .rank { grid-area: 1 / 1 / 5 / 2; }
    .team { grid-area: 1 / 2 / 2 / 11; }
    .proj-money { font-weight: bold; grid-area: 1 / 11 / 2 / 14; }
    .first-golfer { grid-area: 2 / 2 / 3 / 5; }
    .second-golfer { grid-area: 2 / 5 / 3 / 8; }
    .third-golfer { grid-area: 2 / 8 / 3 / 11; }
    .fourth-golfer { grid-area: 2 / 11 / 3 / 14; }
    .fifth-golfer { grid-area: 3 / 2 / 4 / 5; }
    .sixth-golfer { grid-area: 3 / 5 / 4 / 8; }
    .seventh-golfer { grid-area: 3 / 8 / 4 / 11; }
    .eigth-golfer { grid-area: 3 / 11 / 4 / 14; }
    .ninth-golfer { grid-area: 4 / 2 / 5 / 5; }
    .tenth-golfer { grid-area: 4 / 5 / 5 / 8; }
    .eleventh-golfer { grid-area: 4 / 8 / 5 / 11; }
    .twelvth-golfer { grid-area: 4 / 11 / 5 / 14; }
    .win-title {font-size: 1.35em;}    
    .first-place {font-size: 1.2em;}    
    .second-place {font-size: 1em;}    
    .third-place {font-size: 1em;}    
    .fourth-place {font-size: 0.85em;}    
    .fifth-place {font-size: 0.85em;}
    .sixth-place {font-size: 0.75em;}
    .seventh-place {font-size: 0.75em;}
    .eighth-place {font-size: 0.75em;}
    .ninth-place {font-size: 0.75em;}
    .tenth-place {font-size: 0.75em;}
    .last-place {font-size: 0.75em;}
}


@media screen and (min-width: 1120px) {
    #leaderboard-container {padding-top:117px}
}

@media screen and (min-width: 700px) {
    .buttonimg { width: 75% }
}
@media screen and (min-width: 900px) {
    .buttonimg { width: 45% }
}