/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
background-color: #F0F0F0; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }

h1 { font-size: 3.6rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 1.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.2rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.1rem; line-height: 1.6;  letter-spacing: 0; }

.content {
    margin: auto;
    margin-top: 40px;
    min-width: 200px;
    max-width: 660px;
    display: flex;
    flex-wrap: wrap;
}

.pairgrid {
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    height: 420px;
    width: 220px;
}

.eventgrid {
    display: flex;
    flex-wrap: wrap;
}

.event-div {
    background-size: 100%;
    width: 80%;
    height: 200px;
    width: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin:10px;
}

.event-link {
    opacity: 90%;
    border-radius: 20px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    min-width: 100px;
    font-size: 3.5rem;
}

a {
    text-decoration: none;
}

a:link {
    color: #505050;
}

a:visited {
    color: darkblue;
}

.y2021 {
    background-image: url("../images/2021.png");
    background-size: 400px;
}

.y2020 {
    background-image: url("../images/2020.png");
    background-size: 400px;
}

.y2019 {
    background-image: url("../images/2019.png");
    background-size: 400px;
}

.y2018 {
    background-image: url("../images/2018.png");
    background-size: 400px;
}

.footer {
    border-top: solid 1px black;
    margin-top: 10px;
}