body {
    margin: auto;
    margin-top: 27px;
    width:75%;
    max-width: 380px;
    text-align: center;
    background-color: #dfdfe3;
}

h1 {
    font-size: 1em;
    color: #616573;
    letter-spacing: .2em;
    font-family: 'Work Sans', sans-serif;
}

h2 {
    font-size: 7em;
    color: black;
    font-family: 'Work Sans', sans-serif;
}

.republican {
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    margin: .1em;
    display: inline-block;
    transition: 2s;
}

.independent {
    height: 15px;
    width: 15px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    margin: .1em;
    transition: 2s;
}

.democrat {
    height: 15px;
    width: 15px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block;
    margin: .1em;
    transition: 2s;

}

.year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
    transition: 1s;
}


@media (max-height: 325px) { /* year 2022 */
    .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 326px) and (max-height: 350px) {  /* year 2021 */
    .year-2022, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 351px) and (max-height: 375px) { /* year 2020 */
    .year-2022, .year-2021, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 376px) and (max-height: 400px) { /* year 2019 */
    .year-2022, .year-2021, .year-2020, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 401px) and (max-height: 425px) { /* year 2018 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 426px) and (max-height: 450px) { /* year 2017 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 451px) and (max-height: 475px) { /* year 2016 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 476px) and (max-height: 500px) { /* year 2015 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 501px) and (max-height: 525px) { /* year 2014 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006,  .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 526px) and (max-height: 550px) { /* year 2013 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 551px) and (max-height: 575px) { /* year 2012 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 576px) and (max-height: 600px) { /* year 2011 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}
@media (min-height: 601px) and (max-height: 625px) { /* year 2010 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 626px) and (max-height: 650px) { /* year 2009 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2008, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 651px) and (max-height: 675px) { /* year 2008 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2007, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 676px) and (max-height: 700px) { /* year 2007 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2006, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 701px) and (max-height: 725px) { /* year 2006 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2005, .year-2004 {
        display: none;
    }
}

@media (min-height: 726px) and (max-height: 750px) { /* year 2005 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2004 {
        display: none;
    }
}

@media (min-height: 751px) { /* year 2005 */
    .year-2022, .year-2021, .year-2020, .year-2019, .year-2018, .year-2017, .year-2016, .year-2015, .year-2014, .year-2013, .year-2012, .year-2011, .year-2010, .year-2009, .year-2008, .year-2007, .year-2006, .year-2005 {
        display: none;
    }
}