@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@700&display=swap');

:root {
--fg: #f5edc4;
--bg: #4e75a2;

--primary-color: var(--bg);
--secondary-color: #00201f;
--accent-color: #435443;
--text-color: var(--fg);
--dark-color: #353535;
text-shadow: 2px 2px grey;
}

* {
font-family: 'Courier Prime', monospace;
background-color: #4e75a2;
color: #f5edc4;
}

body {
line-height: 1.6;
font-size: 20px;
background-color: var(--bg);
color: var(--fg);
letter-spacing: 1px;
}

input {background-color: var(--accent-color);}

.name_div {padding-top: 5px;}

table {align-items: center;}

.tableWrapper {
    width: 90vw;
    overflow-x: auto;
    margin: auto;
}

.holeTable {
    border:1px solid black;
    border-collapse:collapse;
    width: min-content;
    margin: auto;
}

.resultsTable {
    border:1px solid black;
    border-collapse:collapse;
    width: min-content;
    margin: auto;
}

tr, td {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
}

.button {
display: inline-block;
line-height: 1;
text-decoration: none;
border-radius: 2em;
user-select: none;
min-width: 22ch;
text-align: center;
font-weight: 500;
text-shadow: 1px 1px grey;
background-color: rgb(163, 33, 96);
text-align: center;
color: var(--fg);
padding: 14px 20px;
margin: 8px 0;
cursor: pointer;
font-size: 25px;
}

.button.accent {
background-color: var(--accent-color);
color: var(--fg);
}

.breaker{
    background-color : var(--accent-color);
    height: 1px;
}
  

.img_fit {
max-width: 90vw;
max-height: 90vw;
}

.center-parent {
    display: grid;
    grid-template-areas: 
    "left mid right";
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 100vw;
}
.left {max-width: 100vw;}
.mid {
    max-width: 100vw;
    text-align: center;
}
.right {max-width: 100vw;}

.input-wrapper {width: 10vw;}

.input-scorecard {width: -webkit-fill-available;}