* {
    box-sizing: border-box;
}

body {
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: repeating-linear-gradient(#d2e9bc,rgb(203, 255, 155));
}

header {
    font-family: monospace;
    font-size:28px;
    padding-top: .25em;
    padding-bottom: .25em;
    letter-spacing: 1.1em;
    margin: 0;
    text-align:center;
    color: white;
    background-color: #d2e9bc;

}

header a {
    text-decoration: none;
    color: black;
}

header a:link {
    color: black;
}

header a:visited {
    color: black;
}

header a:hover {
    color: darkgrey;
}

h2 {
    font-size: 30px;
}

h3 {
    padding-left: 3em;
}

nav {
    padding: 1em;
    text-align: center; 
    background-color: rgb(111, 134, 67);
    
}

nav ul {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width:100%;
    display: inline;
    padding-left: 180px;
    padding-right: 180px;
    position: sticky;
    margin: 0;
    font-size: 1.25em;
}

nav a {
    text-decoration: none;
    color: black;
}

nav a:visited {
    color: black;
}

nav a:hover {
    color: darkgrey;
}

footer {
    font-size: 75%;
    font-style:italic;
    text-align: center;
    padding-top: 10em;
}

#golfview {
    background-image: url("View.jpg");
    height: 450px;
    padding-bottom: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#basicsview {
    background-image: url("basicsphoto.jpg");
    background-position: right;
    height: 450px;
    padding-bottom: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#intro {
    text-indent: 1.5em;
    text-align: left;
    font-size: 20px;
}

#intro-2 {
    text-indent: 1.5em;
    text-align: left;
    font-size: 20px;
}

ul {
    display: inline-block;
    font-size: 20px;
    padding-top: 2em;
    padding-left: 2em;
    padding-right: 2em;
    list-style:circle;
}
li {
    font-size: 20px;
    padding-top: 1em;
    list-style:circle;
}


.header-logo {
    height: 18%;
    width: 8%;
    display:block;
    float: left;
    position: absolute;
}

#rule {
    list-style-type:decimal;
    padding-bottom: .5em;
    font-size: 25px;
    font-weight:bold;
}

#ruletext {
    font-size: 14pt;
}

#rules {
    margin-right: 20em;
    padding-bottom: 1em;
}

#terms {
    margin-bottom: 5em;
    margin-left: 2em;
    background-image: url(holelayout.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 42% 100%;
}

#etiquette {
    margin-right: 20em;
}

#etipoints {
    padding-right: 6em;
    padding-left: 7em;
    font-weight: bold;
}

#etitext {
    padding-left: 10em;
    padding-right: 5em;
    font-size: 14pt;
}


table {
    border-spacing:0;
    border: 2px solid rgb(51, 70, 18);
    border-collapse:collapse;
}

#clubs {
    padding-left: 5em;
    padding-bottom: 1em;
}

.clubtext {
    position: absolute;
    top: 71em;
    left: 40em;
    right: 15em;
    border-top: double black 4.5px;
    border-bottom: double black 4.5px;
    font-size: 16pt;

    
}

th, td {
    border: 2px solid rgb(51, 70, 18);
    padding: .5em;
}

td {
    text-align: center;
}

.swingvid {
  position: absolute;
  top: 20em;
  left: 68em;   
}

.swing {
    margin-right: 52em;
    margin-left: 12em;
    margin-top: 2em;
    font-size: 15pt;
    text-align:center;
    border-top: 2px dotted black;
    border-bottom: 2px dotted black;
}

.swingtitle {
    position: relative;
    margin-left:13em;
    margin-top: 3em;
}

.swingaspects {
    margin-left: 6em;
    margin-top: 8em;
}

#aspects {
    font-size: 18pt;
    margin-left: 2em;
}

#asptext {
    font-size: 15pt;
    margin-left: 6em;
    margin-right: 15em;
}

.shotshapes {
    margin-left: 3em;
    margin-top: 5em;
}

#shapes {
    border: 4px dotted black;
    text-align:center;
    font-size: 16pt;
    display: inline-block;
    margin: 2em;
    width: 20%;
}

#equipmentpic {
    background-image: url(equipmentpic.jpeg);
    background-repeat: no-repeat;
    height: 500px;
    width: 700px;
    position: absolute;
    top: 23em;
    left: 70em;
}

#equip {
    text-align: center;
    font-size: 17pt;
    margin-right: 45em;
    margin-left: 8em;
    margin-top: 4em;
}

#equipclubs {
    margin-top: 10em;
}

#equiptitle {
    margin-left: .5em;
}

a:visited {
    color: blue;
}

#starterclubs {
    font-size: 18pt;
    margin-left: 2em;
    font-weight: bold;
    list-style:square;
}

#starttext {
    font-size: 15pt;
    margin-right: 10em;
    margin-left: 2em;
}

#golfballs {
    margin-top: 5em;
    margin-left: 13em;
}

#balltitle {
    margin-left: 4.5em;
}


#balldetails {
    margin-right: 55em;
    font-size: 15pt;
    text-align:center;
}

#other {
    position: absolute;
    left: 52em;
    right: 2em;
    top: 132.5em;
}

#othertitle {
    text-align:center;
}

#otherdetails {
    text-align: center;
    font-size: 15pt;
    margin-right:6em;
    margin-left:6em;
}


@media(max-width: 600px)
{
    nav ul {
        display:block;
        flex-flow: column;
        padding: .25em;
    }

    .header-logo {
        display: none;
    }

    #terms {
        background-image: none;
    }

    .clubtext {
      display: none;
    }

    #rules {
        margin: 2em;
    }

    #etiquette {
        margin: 1em;
    }

    #etipoints {
        padding-left: 1em;
    }

    #etitext {
        padding-right: 1em;
        padding-left: 1em;
    }
    
    .swingtitle {
        margin-left: 1em;
        margin-right: 1em;
        text-align:center;
    }

    .swing {
        margin-left: 1em;
        margin-right: 1em;
    }

    .swingvid {
        position: relative;
        left: 0em;
        top: 5em;
    }

    .swingaspects {
        margin-left: 1em;
        margin-right: 1em;
    }

    #aspects {
        margin-left: 1em;
        margin-right: 1em;
    }

    #asptext {
        margin-left: 1em;
        margin-right: 1em;
    }

    .shotshapes {
        margin-left: 1em;
        margin-right: 1em;
    }

    #shapes {
        margin-left: 1em;
        margin-right: 1em;
        display: block;
        width: 100%;
    }

    #equipmentpic {
        display: none;
    }

    #equip {
        margin-left: 1em;
        margin-right: 1em;
    }

    #equipclubs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #equiptitle {
        text-align: center;
    }

    #starterclubs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #starttext {
        margin-left: 1em;
        margin-right: 1em;
    }

    #golfballs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #balltitle {
        margin-left: 1em;
        margin-right: 1em;
        text-align:center;
    }

    #balldetails {
        margin-left: 1em;
        margin-right: 1em;
        font-size: 15pt;
    }

    #othertitle {
        margin-left: 1em;
        margin-right: 1em;
    }

    #otherdetails {
        margin-left: 1em;
        margin-right: 1em;
    }

    #other {
        position: relative;
        left: 1em;
        top: 5em;
    }
}

@media(max-width: 1500px)
{
    nav ul {
        display:block;
        flex-flow: column;
        padding: .25em;
    }


    #terms {
        background-image: none;
    }

    .clubtext {
      position: absolute;
      right: 1em;
      top: 115em;
      font-size: 11pt;
    }

    #rules {
        margin: 2em;
    }

    #etiquette {
        margin: 1em;
    }

    #etipoints {
        padding-left: 1em;
    }

    #etitext {
        padding-right: 1em;
        padding-left: 1em;
    }
    
    .swingtitle {
        margin-left: 1em;
        margin-right: 1em;
        text-align:center;
    }

    .swing {
        margin-left: 1em;
        margin-right: 1em;
    }

    .swingvid {
        position: relative;
        left: 0em;
        top: 5em;
    }

    .swingaspects {
        margin-left: 1em;
        margin-right: 1em;
    }

    #aspects {
        margin-left: 1em;
        margin-right: 1em;
    }

    #asptext {
        margin-left: 1em;
        margin-right: 1em;
    }

    .shotshapes {
        margin-left: 1em;
        margin-right: 1em;
    }

    #shapes {
        margin-left: 1em;
        margin-right: 1em;
        display: block;
        width: 100%;
    }

    #equipmentpic {
        display: none;
    }

    #equip {
        margin-left: 1em;
        margin-right: 1em;
    }

    #equipclubs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #equiptitle {
        text-align: center;
    }

    #starterclubs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #starttext {
        margin-left: 1em;
        margin-right: 1em;
    }

    #golfballs {
        margin-left: 1em;
        margin-right: 1em;
    }

    #balltitle {
        margin-left: 1em;
        margin-right: 1em;
        text-align:center;
    }

    #balldetails {
        margin-left: 1em;
        margin-right: 1em;
        font-size: 15pt;
    }

    #othertitle {
        margin-left: 1em;
        margin-right: 1em;
    }

    #otherdetails {
        margin-left: 1em;
        margin-right: 1em;
    }

    #other {
        position: relative;
        left: 1em;
        top: 5em;
    }


}