/*COLORS*/
:root {
    --red: #c92a2a;
    --text-red: #f03e3e;
    --orange: #ee8730;
  }


/*FONTS*/

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

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

@font-face {
    font-family: font_body;
    src: url(fonts/forgotten-futurist.rg-regular.otf);
}
.font-body{
    font-family: bodytext;
}

.sm-text {
    font-size: 1em;
}

.md-text {
    font-size: 1.5em;
}

.lg-text {
    font-size: 2.5em;
}

.centered-text {
    text-align: center;
}

.white {
    color: #f8f9fa;
}

.content-columns {
    display: flex;
    flex-direction: column;

    gap: 0.5em;
}

.centered-row {
    justify-content: center;
    align-items: center;
}

.infocard {
    padding: 1em;

    background-color: #1f1f27;

    display: flex;
    flex-direction: column;

    gap: 0.5em;

    color: #f8f9fa;

    font-size: 1.5em;

    box-sizing: border-box;
}

.infocard span {
    text-align: center;

    color: #f8f9fa;
}

.column-spacer {
    margin: 0.25em;
}

.full-width-infocard {
    width: 100%;
}

.infocard-row {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 2em;

    flex-wrap: wrap;
    background-color: #1f1f27;
}

.infocard-row-img {
    max-width: 100%;

    flex-grow: 1;
}

.infocard-row-text {
    max-width: 50%;
}

html { scroll-behavior: smooth; background-color: #121215}

.title{
    font-size: 2em;
    color:white;
}

.caps
{
    text-transform: uppercase;
}

nav{margin: 0; background-color: red;}

.nav-item {
    font-size: 120%;
    margin: 5px;
    border-radius: 10px 0 10px 0;
    background-color: #c92a2a;
    transition: background-color .2s;
    transform: skewX(-20deg) translateX(-0.55em);
    text-decoration: none;
    color: white;
    text-align: center;
}

.nav-item:hover{
    background-color: #ee8730;
    transition: background-color .2s;
}

.dropdown-menu
{
    transform: skew(20deg) translateX(.75em);
}

.dropdown-item
{
    color: black; 
}
.dropdown-item:hover{
    transition: background-color 2s;
    background-color: #ee8730; 
    color:blue;
}

@media screen and (max-width: 430px) {
  .title{
    display:none;
  }
  }







/*CUSTOM SCROLLBAR*/

/* width */
::-webkit-scrollbar {
    width: 10px;
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #171717; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #2e2e2e; 
    border-radius: 1em;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #494949; 
  }




body {
    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    background-color: #242424;

    font-family: font_body, sans-serif;

    scrollbar-width: none;
    overflow-x: hidden;
}



.button {
    padding: 0.75em;

    color: #f8f9fa;
    background-color: #e03131;

    border-radius: 0.75em 0 0.75em 0;

    /* 2.5em per 90 degrees of skew, so for 20, its (20/90, 0.222)% of 2.5 */

    transform: skewX(-20deg);

    user-select: none;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    transition: .3s;

    cursor: pointer;
}

/* .button:visited{
    color: #f1f3f5;
} */


.button:hover{
    background-color:#ee8730;
    text-decoration: none;

    border: 0;

    transform: scale(1.05) skewX(-20deg);
    transition: 0.4s;
}

.navbar-button {
    padding: 0.75em;

    color: #f8f9fa;
    background-color: #e03131;

    border-radius: 0.75em 0 0.75em 0;

    /* 2.5em per 90 degrees of skew, so for 20, its (20/90, 0.222)% of 2.5 */

    transform: skewX(-20deg);

    user-select: none;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    text-align: center;

    transition: .3s;

    cursor: pointer;
}

/* .button:visited{
    color: #f1f3f5;
} */


.navbar-button:hover{
    background-color:#ee8730;
    text-decoration: none;

    border: 0;

    transition: 0.4s;
}

.Cards{
    /* margin-top: 1em;
    margin-bottom: 1em; */
    margin: 1em;
    display: flex;
    justify-content: space-around;
    gap: 1em;
}

.Cards .card{
    height: 15em;
    width: 29em;
    border-radius: 1em;
    background-image: url(imgs/wood.webp);
    text-align: center;
    text-decoration: none;
    color: white;
    background-size: cover;
    transition: 0.6s;
}
.Cards .card p{
    position: relative;
    top: 1em;
    font-family: font_body;
    font-size: 4em;
    opacity: 100%;
    z-index: 5;
}

.card:hover { 
    transform: scale(1.05);
    transition: 0.4s;
    
    transition: background-color 0.4s;
}

.centered { width: 80%; margin: auto; text-align: center;} 

.centered-title {
    font-family: font_sports_title; 
    color: white;
    margin: auto;
    width: 80%;
    text-align: center;
    padding: .5em 0;
    font-size: 5em;
    
 }

 .centered-subtitle {
    font-family: font_body;
    color: #ffffff;
    margin: auto;
    margin-top: 0;
    width: 50%;
    text-align: center;
    padding: .5em 0;
    font-size: 2.5em;
    
 }

 .contact {  color: white; font-family: font_body;}

 footer {
    background-color: #c92a2a;
    color: white;
    margin: auto;
    width: 100vw;
    font-size: .35em;
    height: 40vh;
    
}

.footer-grid {
    display: grid;
    grid-template-rows: repeat(1, 3fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0em;
    /* margin-left: 3em;
    margin-right: 3em; */
  }
  .footer-grid > div {
    background-color: #c92a2a;
    color: white;
    font-size: 4em;
    padding: .5em;
    grid-column: span 1;
    width: 45vw;
    height: 30vh; 
  }

footer h1 { margin-top: 0; margin-bottom: 0;}

footer img { height: 30vh; 
    margin-top: 0; margin-bottom: 0;
float: left;}

.Cinfo{
    display:block;
    }

@media screen and (max-width: 820px) {
.Cinfo{
display: none;
}
.footer-grid {
    grid-template-columns: repeat(1, 1fr);
    margin-left: auto;
}
.footer-grid > div{
    width: 90%;
}
}

.grow {
    flex-grow: 1;
}

header {
    width: 100%;
    height: 6em;

    box-sizing: border-box;

    /* padding: 0.5em 3em; */

    padding: 0.75em 0.75em;

    display: flex;

    position: fixed;
     
    background-color: #1f1f27;
    z-index: 100; /* TODO: please change this */

    box-shadow: 0 0 1em #111111;

    user-select: none;
}

header div {
    height: 100%;

    display: flex;
    align-items:center;

}



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

/*Inline lists for footer links*/
.inline { margin-top: .5em; margin-bottom: .5em;}
.inline li {display: inline-block; font-family: font_body; text-decoration: none;}
.inline a { color: white;}
.inline img {height: 1.5em; margin: .25em;} 

.lg {
    font-size: 4em;
font-family: font_sports_title;
}


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

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

.lg, .sm { color: white; }


.logo { height: 5em; width: 5em; margin: 0;}
#logoB{padding: 0; background: none;border: none;}

main {
    padding-top: 5em;
    background-color: #121215;
    font-family: font_body;
}


.margin-top {
    margin-top: 1em;
}

p {
    margin: 0.25em 0;

    padding: 0em;
}


.presented {
    height: 40em;
    /*background-color: #ced4da;*/
    background-image: url("imgs/main/bacon-burger.webp");
    /* background-size: contain; */
    background-size: cover;
    /* background-position: 100% 80%; */
    background-position: 100% 80%;
    background-repeat: no-repeat;
    background-color: #1f1f27;
    overflow: hidden;

    max-width: 100%;

    /* margin-bottom: 1em; */
}

.presented-text {
    width: 30em;
}


.sm {
    font-size: 1.5em;
}
 
.spaced-row {
    display: flex;

    gap: 1em;

    /* transform: skewX(-20deg); */
}

nav { margin: 0;}





























/* footer {
    background-color: #c92a2a;
    color: white;
    margin: 0;
}
footer ul { list-style-type: none;}
footer li {margin: .5em;}
footer .footer-list { font-size: 2em; text-align: center;}

.footer-logo { width: 15em; align-content: center;}


#footer-grid {
    display: grid;
    grid-template-rows: repeat(3, 3fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.75em;
    text-align: center;
    
     
    
  }

  #footer-grid div { grid-column: span 2;}
  #footer-grid > div {
    color: white;
    font-size: 1vw;
    padding: 0em;
    text-decoration: none;
    grid-row: span 2;
    margin: 1.5em 1em;
    background-color: green;
    
  }
.inline li {display: inline;}
.inline img {height: 3em; display: flex; justify-content: space-evenly; flex-direction: row;} */

#hamburger-button {
    display: none;

    height: 100%;
    padding: 1em 0.5em;

    box-sizing: border-box;
}

#hamburger-menu {
    width: 100%;
    padding: 1em 2em;

    box-sizing: border-box;

    background-color: #1f1f27;

    /* display: flex; */
    display: none;
    flex-direction: column;

    gap: 1em;

    position: fixed;
    z-index: 5;

    top: 6em;
}

.full-width {
    width: 100%;
}

.navbar-buttons {
    margin-right: 1em;
}

@media only screen and (max-width: 1080px) {
    .header-text {
        font-size: 1.5em;
    }

    .navbar-buttons {
        display: none;
    }

    #hamburger-button {
        display: block;
    }

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

        box-sizing: border-box;

        padding: 2em;

        background-color: rgba(0, 0, 0, 0.3);
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}