:root{
    --steampunk-j-red: #f02311;
    
    --montreal-canadiens-red: #AF1E2D;
    --montreal-canadiens-blue: #192168; 
    
    --boston-bruins-yellow: #FFB81C;
    --boston-bruins-black: #000000; 
    
    --toronto-maple-leafs-blue: #00205B;
    
    --detroit-red-wings-red: #CE1126;
    
    --new-york-rangers-blue: #0038A8;
    --new-york-rangers-red: #CE1126;
    
    --chicago-blackhawks-red: #CF0A2C;
    --chicago-blackhawks-orange: #FF671B;
    --chicago-blackhawks-green: #00833E;
    --chicago-blackhawks-yellow: #FFD100;
    --chicago-blackhawks-tan: #D18A00;
    --chicago-blackhawks-blue: #001970;
    
    --st-louis-blues-blue: #002F87;
    --st-louis-blues-yellow: #FCB514;
    --st-louis-blues-navy-blue: #041E42; 
    
    --pittsburgh-penguins-gold: #CFC493;
    --pittsburgh-penguins-black: #000000;
    --pittsburgh-penguins-yellow:#FCB514;
    
    --la-kings-black: #111111;
    --la-kings-silver: #A2AAAD;
    
    --philadelphia-flyers-orange: #F74902;
    --philadelphia-flyers-black: #000000;
    
    --vancouver-canucks-blue: #00205B;
    --vancouver-canucks-green:#00843D;
    --vancouver-canucks-dark-blue:#041C2C;
    --vancouver-canucks-gray:#99999A;
    
    --buffalo-sabres-blue: #003087;
    --buffalo-sabres-yellow: #FFB81C;
    
    --calgary-flames-red: #D2001C;
    --calgary-flames-yellow: #FAAF19; 
    
    --edmonton-oilers-blue: #041E42;
    --edmonton-oilers-orange: #FF4C00;
    
    --washington-capitals-blue: #041E42;
    --washington-capitals-red: #C8102E;
    
    --new-york-islanders-blue: #00539B;
    --new-york-islanders-orange: #F47D30;
    
    --new-jersey-devils-red: #CE1126;
    --new-jersey-devils-black: #000000;
    
    --san-jose-sharks-teal: #006D75;
    --san-jose-sharks-orange: #EA7200;
    --san-jose-sharks-black: #000000;
    
    --ottowa-senators-black: #000000;
    --ottowa-senators-red: #DA1A32;
    --ottowa-senators-gold: #B79257;
    
    --tampa-bay-lightning-blue: #002868;
    
    --anaheim-ducks-orange: #F47A38;
    --anaheim-ducks-gold: #B9975B;
    --anaheim-ducks-silver: #C1C6C8;
    --anaheim-ducks-black: #000; 
    
    --florida-panthers-navy: #041E42;
    --florida-panthers-red: #C8102E;
    --florida-panthers-tan: #B9975B;
    
    --dallas-stars-green: #006847;
    --dallas-stars-silver: #8F8F8C;
    --dallas-stars-black: #111111;
    
    --colorado-avalanche-burgundy: #6F263D;
    --colorado-avalanche-blue: #236192;
    --colorado-avalanche-silver: #A2AAAD;
    --colorado-avalanche-black: #000000;
    
    --arizona-coyotes-red: #8C2633;
    --arizona-coyotes-sand: #E2D6B5;
    --arizona-coyotes-black: #111111;
    
    --carolina-hurricanes-red: #CE1126;
    --carolina-hurricanes-gray: #A4A9AD;
    --carolina-hurricanes-black: #000000;
    --carolina-hurricanes-alternate-gray: #585d63;
    
    --nashville-predators-gold: #FFB81C;
    --nashville-predators-navy: #041E42;
    
    --columbus-blue-jackets-blue: #002654;
    --columbus-blue-jackets-red: #CE1126;
    --columbus-blue-jackets-silver: #A4A9AD;
    
    --minnesota-wild-red: #A6192E;
    --minnesota-wild-green: #154734;
    --minnesota-wild-sand: #DDCBA4;
    --minnesota-wild-gold: #EAAA00;
    
    --winnipeg-jets-navy: #041E42;
    --winnipeg-jets-blue: #004C97;
    --winnipeg-jets-red: #AC162C;
    --winnipeg-jets-maroon: #7B303E;
    --winnipeg-jets-darkgray: #55565A;
    --winnipeg-jets-silver: #8E9090;
    
    --vegas-golden-knights-gold: #B4975A;
    --vegas-golden-knights-gray: #333F42;
    --vegas-golden-knights-red: #C8102E;
    --vegas-golden-knights-black: #000000;
    
    --seattle-kraken-seablue: #001628;
    --seattle-kraken-iceblue: #99D9D9;    
    --seattle-kraken-boundlessblue: #355464;
    --seattle-kraken-shadowblue: #68A2B9;
    --seattle-kraken-red: #E9072B;
    
/* ---Other color pallets--- */
/* ---Other color pallets--- */
/* ---Other color pallets--- */

    --atlanta-thrashers-blue: #041E42;
    --atlanta-thrashers-iceblue: #5C88DA;
    --atlanta-thrashers-red: #862633;
    --atlanta-thrashers-copper: #B86125;
    --atlanta-thrashers-gold: #FFA300;
    
    --hartford-whalers-blue: #00205B;
    --hartford-whalers-green: #046A38;
    --hartford-whalers-gray: #A2AAAD;
    
    --minnesota-north-stars-green: #009639;
    --minnesota-north-stars-yellow: #FFD100;
    --minnesota-north-stars-black: #000000;
    
    --quebec-nordiques-red: #DA291C;
    --quebec-nordiques-blue: #005EB8;
}
    
    


*{
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
   
 }   
    
body{
        line-height: 1.5; /*this casused the ul li to separate top to bottom by 1.5*/
        font-family: arial;
        font-weight: 400;
        overflow-x: hidden;
    }   
    
   
    html{
        scroll-behavior: smooth;
    }


    
:before,:after{
        box-sizing: border-box;
}








/*===============📜⏱️ LOAD SCREEN START===============*/
/*===============📜⏱️ LOAD SCREEN START===============*/
/*===============📜⏱️ LOAD SCREEN START===============*/
    .loader{
            position: fixed;
            top: 0;
            left: 0;
            background: white;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
    
    .loader img{
        width: 250px;
        height: 250px;
    }
    
    .disappear{
        animation: vanish 1s forwards;
    }
    
    @keyframes vanish {
        100%{
            opacity: 0;
            visibility: hidden;
        }
    }
/*===============📜⏱️ LOAD SCREEN FINISH===============*/
/*===============📜⏱️ LOAD SCREEN FINISH===============*/
/*===============📜⏱️ LOAD SCREEN FINISH===============*/







/*===============📜📜 SCROLL BUTTON START===============*/
/*===============📜📜 SCROLL BUTTON START===============*/
/*===============📜📜 SCROLL BUTTON START===============*/
    #progress{
        
        position: fixed;
        bottom: 20px;
        right: 10px;
        height: 70px;
        width: 70px;
        display: none;
        place-items: center;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        cursor: pointer;
        z-index: 10;
    }
    
    #progress-value{
        display: block;
        height: calc(100% - 15px);
        width: calc(100% - 15px);
        background-color: #ffffff;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #001a2e;
        font-size: 35px;
        
    }
/*===============📜📜 SCROLL BUTTON FINISH===============*/
/*===============📜📜 SCROLL BUTTON FINISH===============*/
/*===============📜📜 SCROLL BUTTON FINISH===============*/









/*------------ 🔴NAVBAR START ------------*/
/*------------ 🔴NAVBAR START ------------*/
/*------------ 🔴NAVBAR START ------------*/
.logo {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: ;
transform: translateY(-8px);




}


#logo1 {
width: 40px;
background-color: ;
margin-right: 5px;
display: flex;


}

     
     
#logo1 img{
    width: 100%;
    height: 100%;  

}     
     
     
#logo2 {
    width: 200px; 
    background-color: ;
    color: red;
    font-size: 40px;
    font-weight: 100;

}
     
    


nav{
    height: 80px;
    background: white;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

}

nav .logo{
    position: absolute;
    top: 18px;
    left: 5%;
}

nav ul{
    float: right;
    margin-right: 25px;
}

nav ul li{
    display: inline-block; /* this causes the stacked li's to become lined up next to each other */
    line-height: 80px; /* this causes the li's to go from hanging out in the ceiling to being in the middle of nav */
    background-color: ;
    
}
nav ul li a{
    position: relative;
    padding: 5px 12px; /* this causes the text and red animated underlines to separate more */
    color: red;
    font-size: .9rem;
    text-transform: uppercase;
    text-decoration: none;
}

nav ul .active{
    background: red;
    color: white;
    padding: 5px;
}

nav ul li a:before{ /* this creates the red underline under the letters */
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: red; /* this the last time you see the red underlines */
    transform: scaleX(0); /* this causes the line to disappear */
    transform-origin: right; /* in the future the red lines will apear from the right */
    transition: transform .4s linear;
}

nav ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
}



.checkbtn{
    font-size: 30px;
    color: red;
    float: right;
    line-height: 40px;
    margin: 30px;
    margin-top: 22px;
    cursor: pointer;
    display: none;
}

#check{
    display: none;
}
      
     

/*------------ 🔴NAVBAR FINISH ------------*/
/*------------ 🔴NAVBAR FINISH ------------*/
/*------------ 🔴NAVBAR FINISH ------------*/


     
     
 
     






    
     
/*=============================Title-Card-Work-START=============================*/
/*=============================Title-Card-Work-START=============================*/   
/*=============================Title-Card-Work-START=============================*/
     
     
     
     .main-background-for-regular-use{
         background-image: url(images/banner.jpg);
         width: auto;
         height: 400px;
         background-size: cover;
         background-position: center;
         
         
         justify-content: center; /*this centers at top*/
         margin: auto;
         display: flex; 
     }
     
     
     

    
    .whole-title-container-main-size{
        display: flex;
        transform: translateY(110px);
        
    }

    
    .whole-title-container-main-size .center-title-bin{
        background-color: none; /*-rgb(127, 255, 212, .5)-*/
        width: 500px;
        height: 300px;
        text-align: center;
        margin: auto;
        position: relative;
        transform: rotate(-4deg)
        
    } 
    
    .text-center-info{
       position: relative;
    }
     
     
    .text-center-info img{
        width: 400px;
    }
     
     
    .text-center-info h1{
      
        position: absolute;
        font-family: marker felt;
        font-weight: 100;
        font-size: 55px;
        width: 100%;
        height: 100%;
        align-content: center;
        background: linear-gradient(#f2e03e, #c49731);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
     
        
    }
     
     
     
@media (max-width: 479px){
    
    .whole-title-container-main-size{
        transform: translateY(130px); }



    .text-center-info img{
        width: 330px;  }
     
     
    .text-center-info h1{
        font-size: 50px;  }

    
    }
     
     










/*=================HIDE PICTURES - ⚪️ART GALLERY - START=================*/
/*=================HIDE PICTURES - ⚪️ART GALLERY - START=================*/
/*=================HIDE PICTURES - ⚪️ART GALLERY - START=================*/


    .hidden-drawing {
        display: none;
    }



/*=================HIDE PICTURES - ⚪️ART GALLERY - FINISH=================*/
/*=================HIDE PICTURES - ⚪️ART GALLERY - FINISH=================*/
/*=================HIDE PICTURES - ⚪️ART GALLERY - FINISH=================*/










        
        
        


/*------------ 🔵FOOTER START ------------*/
/*------------ 🔵FOOTER START ------------*/
/*------------ 🔵FOOTER START ------------*/
    .footer{
        position: relative;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 -5px 15px rgba(100,0,0,0.06);
        min-height: 100px;
        padding: 10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .footer-social-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 5px 5px;
        flex-wrap: wrap;
        padding-right: 40px

        
        
        
    }
    
    .footer-icon-elem{
        list-style: none;
        margin: auto;
        
       
        
    }
    
    .icon{
        color: var(--steampunk-j-red);
        font-size: 30px;
        display: inline-block;
        margin: 0 10px;
        transition: 0.5s;
    }
    
    .icon:hover{
        transform: translateY(-10px);
    }
    
    .footer-menu{
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        margin: 5px 0;
        flex-wrap: wrap;
        padding-right: 40px
    }
    
    .footer-menu-elem{
        list-style: none;
    }
    
    .menu-icon{
        color: var(--steampunk-j-red);
        font-size: 15px;
        display: inline-block;
        text-decoration: none;
        margin: 5px 10px;
        opacity: 0.5;
        transition: 0.3s;
    }
         
    .menu-icon:hover{
        opacity: 1;
    }
    
    .text{
        color: var(--steampunk-j-red);
        text-align: center;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 15px;
        
    }
/*------------ 🔵FOOTER FINISH ------------*/
/*------------ 🔵FOOTER FINISH ------------*/
/*------------ 🔵FOOTER FINISH ------------*/ 
        
        
























/*=====================⛑️⛑️⛑️ ALL RESPONSIVE START=====================*/
/*=====================⛑️⛑️⛑️ ALL RESPONSIVE START=====================*/
/*=====================⛑️⛑️⛑️ ALL RESPONSIVE START=====================*/






@media (max-width: 850px){
/*------------ 🔴NAVBAR START ------------*/  
/* nav .logo {top: 18px;}
   
    
    nav ul li a{
        padding: 5px 2px; 
        font-size: .7rem;}
/*------------ 🔴NAVBAR FINISH ------------*/    
    
    }




@media (max-width: 600px){
/*------------ 🔴NAVBAR START ------------*/   
    nav .logo{ left: 10%; /*- bottom: 10px;-*/} 
     

    
    nav ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: white;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;}
    
    nav ul li{
        display: block;
        margin: 50px 0; 
        line-height: 30px;
    padding-right: 40px;}
        
    
    nav ul li a{
        font-size: 1rem;}
    
    #check:checked ~ ul{
        left: 0;}
    
     .checkbtn{
        display: block;}
/*------------ 🔴NAVBAR FINISH ------------*/
    








    
    
    
/*=====================⛑️⛑️⛑️ ALL RESPONSIVE FINISH=====================*/
/*=====================⛑️⛑️⛑️ ALL RESPONSIVE FINISH=====================*/
/*=====================⛑️⛑️⛑️ ALL RESPONSIVE FINISH=====================*/