@font-face {
    font-family: Sports;
    src: url(fonts/supers-sports.combined.otf);
}

@font-face {
    font-family: font_sports_title;
    src: url(fonts/azn-unified.oblique.otf);
}

@font-face {
    font-family: font_body;
    src: url(fonts/forgotten-futurist.rg-regular.otf);
}
@media (max-width: 767px) {
    .picturefour {
        width: calc(50% - 10px);
    }
    .picturethree {
        width: calc(50% - 10px);
    }
    .picturefive {
        width: calc(50% - 10px);
    }
    .picturesix {
        width: calc(50% - 10px);
    }
    .picture {
        width: calc(50% - 10px);
    }
    .picturetwo {
        width: calc(50% - 10px);
    }
    .pictureseven {
        width: calc(50% - 10px);
    }
    .pictureeight {
        width: calc(50% - 10px);
    }
}

body {
    width: 100vw;

    margin: 0;
    padding: 0;

    background-color: #242424;

    scrollbar-width: none;
}

p {
    margin: 0.25em 0;

    padding: 0em;
}

.lg {
    font-size: 2.5em;
}

.sm {
    font-size: 1.25em;
}
container {
    display:flex;
    flex-wrap: wrap;
}
header {
    width: 100%;
    height: 5em;

    box-sizing: border-box;

    padding: 0.5em 3em;

    display: flex;

    position: fixed;

    background-color: #332E2E;
    z-index: 100;
}

header div {
    height: 100%;

    display: flex;
    align-items:center;
}

.button {
    padding: 0.75em;

    color: #f8f9fa;
    background-color: #c92a2a;

    border-radius: 0.75em 0 0.75em 0;

    user-select: none;
    cursor: pointer;
}

.header-text {
    padding: 0;
    margin: 0.25em;
    font-size: 3em;
    font-family: font_sports_title; 
    color: white;
    white-space: nowrap;
    text-align: center;
}

.grow {
    flex-grow: 1;
}

.spaced-row {
    display: flex;

    gap: 1em;
}

main {
    padding-top: 5em;
}

.presented {
    height: 40em;

    background-color: #ced4da;
}

.left-half-center {
    width: 50%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.presented-text {
    width: 25em;
}

.margin-top {
    margin-top: 1em;
}
.head1 { /* this is for the "pick a sports team" */
    margin-top: 2em;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 2em;
}
.color-change-button { /* all the buttons for calendars */
    background-color:#c92a2a;
    color:white;
    padding: 10px 10px 10px 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 20px;
    margin: auto;
    width: 225px;
    display: block;
    transform: skewX(-20deg);
    border-radius: 0.75em 0 0.75em 0;
}

.color-change-button:hover { /* hover button transition */
    background-color:#c97a2a;
}
.michigan-state { /* michigan state picture */
    border-style: solid;
   border-color:  #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.picture:hover .michigan-state { /* keep bg black while in div */
    background-color: #A9A9A9;
}
.picture { /* first div for michigan state */
    display: inline-block;
    /* padding: 25px 0px 50px 50px; */
    margin-left: 5em;
    transition: transform 0.5s ease;
    margin-bottom: 5em;
}
.picture:hover { /* div transtions and scaling MSU */
    width:275;
    height: 250; 
    transform: scale(1.1);
}
.picturetwo { /* div for michigan team */
    display: inline-block; 
    margin-left: 5em;
    transition: transform 0.5s ease;
    margin-bottom: 5em;
}
.picturetwo:hover { /* div transitions and scaling michigan*/
    width:275;
    height: 250;
    transform: scale(1.1);
}
.picturetwo:hover .michigan { /* keep bg color same while in div */
    background-color:#A9A9A9;
}
.michigan { /*michigan picture */
    align-items: center;
    border-style: solid;
    border-color: #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    transition: background-color 0.5s ease;
}

.picturethree { /* lions picture */
    display: inline-block;
    margin-left: 5em;
    transition: transform 0.5s ease;
    margin-bottom: 5em;
}
.picturethree:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.picturethree:hover .red-wings {
    background-color:#A9A9A9;
}
.red-wings { /* red wings picture */
    border-style: solid;
    border-color:  #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.picturefour { /* lions */
    display: inline-block;
    /* padding: 50px 0px 50px 50px;  */
    margin-left: 5em;
    transition: transform 0.5s ease;
    margin-bottom: 5em;
}
.picturefour:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.picturefour:hover .lions {
    background-color:#A9A9A9;
}
.lions { /* lions picture */
    border-style: solid;
    border-color: #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.picturefive {
    display: inline-block;
    flex-direction: column;
    margin-left: 5em;
    transition: transform 0.5s ease;
    width:250;
    height:400;
    margin-bottom: 5em;
}
.picturefive:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.picturefive:hover .pistons {
    background-color:#A9A9A9;
}
.pistons {
    border-style: solid;
    border-color: #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.picturesix {
    display: inline-block;
    flex-direction: column;
    margin-left: 5em;
    transition: transform 0.5s ease;
    width:250;
    height:400;
    margin-bottom: 5em;
}
.picturesix:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.picturesix:hover .detroit-tigers {
    background-color:#A9A9A9;
}
.detroit-tigers { /* tigers picture */
    border-style: solid;
    border-color:  #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.pictureseven {
    display: inline-block;
    flex-direction: column;
    margin-left: 5em;
    transition: transform 0.5s ease;
    width:250;
    height:400;
    margin-left: 5em;
    margin-bottom: 5em;
}
.pictureseven:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.pictureseven:hover .eastern {
    background-color:#A9A9A9;
}
.eastern { /* eastern picture */
    border-style: solid;
    border-color: #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}
.pictureeight {
    display: inline-block;
    flex-direction: column;
    margin-left: 5em;
    transition: transform 0.5s ease;
    width:250;
    height:400;
    margin-left: 5em;
    margin-bottom: 5em;
}
.pictureeight:hover {
    width:275;
    height: 250;
    transform: scale(1.1);
}
.pictureeight:hover .western {
    background-color:#A9A9A9;
}
.western { /*western picture */
    border-style: solid;
    border-color: #BEC0C2;
    border-width: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    object-fit: cover;
    transition: background-color 0.5s ease;
}