* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background: black;
    color: white;
    font-family: Georgia, serif;
    overflow-x: hidden;
}



/* ==========================
   BACKGROUND IMAGE
========================== */


.background {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background-image: url("evets.jpg");

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    background-color: black;

    z-index: -2;
}



.overlay {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;


    background: rgba(0,0,0,0.25);


    z-index: -1;

}



/* ==========================
   MAIN PAGE
========================== */


.events-page {

    width: 70%;

    margin-left: 8%;

    padding-top: 80px;

    padding-bottom: 100px;

}



h1 {

    font-size: 4rem;

    font-weight: normal;

    margin-bottom: 70px;

}



.year {

    margin-bottom: 90px;

}



.year h2 {

    font-size: 2rem;

    font-weight: normal;


    padding-bottom: 15px;

    margin-bottom: 35px;


    border-bottom: 1px solid rgba(255,255,255,0.35);

}



/* ==========================
   EVENTS
========================== */


.event {

    padding: 20px 0;


    border-bottom: 1px solid rgba(255,255,255,0.18);


    transition: transform 0.3s ease;

}



.event:hover {

    transform: translateX(10px);

}



.date {

    font-size: 0.85rem;

    letter-spacing: 1px;

    opacity: 0.65;

    margin-bottom: 8px;

}



.title {

    font-size: 1.35rem;

    margin-bottom: 6px;

}



.venue {

    font-size: 1rem;

    opacity: 0.85;

}



.city {

    font-size: 0.95rem;

    opacity: 0.6;

    font-style: italic;

}



/* ==========================
   LINKS (future videos/photos)
========================== */


.event a {

    color: white;

    margin-right: 15px;

    text-decoration: underline;

}


.event a:hover {

    opacity: 0.6;

}



/* ==========================
   MOBILE
========================== */


@media (max-width: 800px) {


    .events-page {

        width: 88%;

        margin-left: 6%;

        padding-top: 40px;

    }


    h1 {

        font-size: 2.8rem;

    }


    .year h2 {

        font-size: 1.5rem;

    }


    .title {

        font-size: 1.15rem;

    }


}