@charset "UTF-8";
/* CSS Document */
/* Document Setup*/
        * {margin:0px; box-sizing: border-box;}
    /* Typography*/

        /*Document Fonts*/

            @font-face{font-family: arquitecta; src:url("../fonts/ArquitectaThin.otf"); font-weight:100;}
            @font-face{font-family:arquitecta; src: url("../fonts/ArquitectaLight.otf"); font-weight: 200;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBook.otf"); font-weight: 300;}
            @font-face{ font-family:arquitecta; src: url("../fonts/Arquitecta.otf"); font-weight: 400;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaMedium.otf"); font-weight: 500;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBold.otf"); font-weight: 600;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaHeavy.otf"); font-weight: 700;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBlack.otf"); font-weight: 800;}

            
            @font-face{ font-family:charlottenburg; src:url("../fonts/Charlottenburg_W-Classic.woff2")}
            @font-face{ font-family:charlottenburg-compressed; src:url("../fonts/Charlottenburg_W-Compressed.woff2")}
        /*Styles*/
            h1{font-family: "worthington-arcade", serif; font-weight: 400;font-style: normal; color:#FFFFFC; font-size: 100px;}
            h2{font-family: "charlottenburg-compressed"; font-size: 60px;  letter-spacing: 3px; color: #E6472F;}
            h3{font-family: "worthington-arcade", serif; font-weight: 100; font-style: normal; color: #FFFFFC; font-size: 5vw;}
            a{font-family: "arquitecta", sans-serif; font-weight:400;font-size: 18px; text-transform: uppercase; color: #FFFFFC; letter-spacing: 2px; text-decoration: none; padding:none;}
            p{font-family: "arquitecta", sans-serif; letter-spacing: 1.4px; font-size: 18px; text-align: justify; line-height: 21px; color: #FFFFFC; padding-bottom: 30px; hyphens: none; hanging-punctuation:allow-end;}
            p2{text-align: center;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 20px; color: #FFFFFC; font-style: italic;}
            td{color:#FFFFFC; padding: 4px; font-family: "arquitecta", sans-serif; letter-spacing: 1.4px; font-size: 18px;}

            .calltoaction{font-family:"itc-avant-garde-gothic-pro", sans-serif; font-weight:100; font-size:22px; line-height:25px; color:#E6472F; flex-wrap:nowrap; letter-spacing: 1.2px}
            .calltoaction:hover{transform: translate(12px); transition:0.2s; color: #89AEB7;}
            .calltoaction a{font:inherit; text-decoration: inherit; text-transform: inherit; color: inherit; }
/*Header*/

    /* Section Setup*/
        header{position: relative; z-index: 10;background: linear-gradient(to bottom, #030100,#1E191B);}
        .header-grid-container{display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(3,60px); gap:12px; padding: 12px; margin: 0 12px}
    /*Objects*/
            .logo{grid-area: 1/3 /span 2 /span 8; text-align: center;}
        /*Location and decorative line*/
            .line-location{grid-area:3/1 /span 1 /span 12; position:relative; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;}
            .line-location img{height:11px; width:auto; object-fit: cover; margin-left: 12px; margin-right: 12px; vertical-align: middle;}
            .line-location a{ display: inline-block; white-space: nowrap; vertical-align: middle;}
            .location-link:hover{transition: 0.15s ease; color: #E6472F;}
        /*Navigation*/
            /*Object Setup*/
                .navigation{grid-area: 1/12 /span 1 /span 1;}
            /*Typography*/
                nav{text-align: right; font-family:"itc-avant-garde-gothic-pro", sans-serif; font-weight:400; font-size:22px; line-height:32px; color:#FFFFFC;}
                li a{text-align: right;font-family:"itc-avant-garde-gothic-pro", sans-serif;font-weight:400; font-size:22px; line-height:32px; color:#FFFFFC; text-transform: none; letter-spacing: normal;}
                ul{list-style-type: none; padding: 0;}
            /*Interactive Elements*/
                .desktop-navigation li a:hover{ transition: 0.1s ease; color:#E6472F;}
                .desktop-navigation li:hover{transform: translate(-22px); transition: 0.1s ease; color:#E6472F;}
                .sidebar{ position:fixed; top: 0; right: 0; height: 100vh; width: 250px; background-color:rgba(255,255,252,0.92); box-shadow: -10px 0 10px rgba(0,0,0,0.2); flex-direction: column; align-items: flex-start; justify-content: flex-start; backdrop-filter: blur(40px); display: none; padding:12px 0px 0px 12px; text-align: left;}
                .sidebar li{color:#E6472F; width:100%; padding-left:10px; align-items: center;}
                .sidebar a{color:#E6472F; width:100%;}
                .sidebar li a{display: flex; padding: 2px}
                .sidebar li a:hover{ transition: 0.1s ease;}
                .sidebar li:hover{transition: 0.1s ease; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }
                .menu-icon li:hover{transform:translate(0); transition:none;} 
                .menu-icon{display: none;}

/*Body Section*/

    /*Section Setup*/
        body{background: #1E191b;}
        .grid-container {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(35, 120px); gap:12px; padding: 12px; margin: 0px 12px; overflow: hidden;} 
         /*Images*/
            #hero-image{grid-area: 1/1 /span 9 /span 12;}
            #hero-image img{width:100%; outline: solid; outline-width: 9px; outline-color: #F6F1E6; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, .5));}
            #ice-cream-image-background{grid-area:18/8 /span 4 /span 4;}
            .circle{background: #F6F1E2; border-radius: 250px; width:500px; height:500px; position: relative; display: flex; align-items: center; justify-content: center; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, .5));}
            #ice-cream-image{height:80%; filter:drop-shadow(5px 5px 10px rgba(30, 25, 27, 0.6)); object-fit: contain; z-index: 5;}

            #about-image-container{grid-area:12/2 /span 4 /span 4; display: flex; justify-content: center; align-items: center;}
            #old-bar{height:100%; object-fit: contain; outline: solid; outline-width: 9px; outline-color: #F6F1E6; filter: drop-shadow( 5px 5px 10px rgba(0,0,0, 1));}
            
        /*Illustrations*/
            #line-1{grid-area: 10/1 /span 1 /span 12; padding-top:30px;}
            #menu-illustration{grid-area:29/8 /span 3 /span 4; padding-top:30px; align-content: center; justify-content: center; display: flex;}
            #menu-illustration img{height:75%;}
        /*Sections*/
            .hiddenleft{opacity: 0; transform: translateX(-100%);}
            .showleft{opacity: 1; transition: ease-in-out; transform: none; transition-delay: .2s; transition-duration: .8s;}
            .hiddenright{opacity: 0; transform: translateX(100%);}
            .showright{opacity: 1; transition: ease-in-out; transform: none; transition-delay: .2s; transition-duration: .8s;}

            .aboutheader{grid-area:12/8 /span 1 /span 4; padding-top:30px;}
            .aboutbody{grid-area:13/8 /span 2 /span 4;}

            .icecreamheader{grid-area:18/2 /span 1 /span 4; padding-top:30px;}
            .icecreambody{grid-area:19/2 /span 2 /span 4;}

            .soda-header{grid-area:24/8 /span 1 /span 4; padding-top:30px;}
            .soda-body{grid-area:25/8 /span 2 /span 4;}

            .food-header{grid-area:29/2 /span 1 /span 4; padding-top:30px;}
            .food-body{grid-area:30/2 /span 2 /span 4;}
/*Footer*/

    /*Typography*/
        footer a{color:#FFFFFC;}
    /*Section Setup*/
        .footer-grid-containter{display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(4,120px); gap: 12px; padding: 12px;}
        footer{background: linear-gradient(to bottom, #1E191B, #030100);}
    /*Footer Title*/
        .footer-logo{grid-area: 1/1 /span 1 /span 12; text-align: center;}
        .footer-subhead{padding-top: 2px; text-align: center; color: #FFFFFC;}
    /*Sections*/
        #footer-hours-container{grid-area:2/1 /span 2 /span 12; display: flex; justify-content: center;}
#footer-hours-container table{width:300px; padding-top: 40px}
        td:first-child{text-align: left;}
        td:last-child{text-align: right;}
    /*copywright*/
        .line-copywright{grid-area:4/1 /span 1 /span 12; position:relative; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;}
        .line-copywright img{height:11px; width:auto; object-fit: cover; margin-left: 12px; margin-right: 12px; vertical-align: middle;}
        .line-copywright a{ display: inline-block; white-space: nowrap; vertical-align: middle;}

/*Extras*/
    .line-repeat-white{height:10px; width:auto; background-image: url("../illustrations/whiteline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}
    .line-repeat-blue{height:10px; width:auto; background-image: url("../illustrations/blueline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}
    .line-repeat-red{height:10px; width: auto; background-image: url("../illustrations/redline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}

@media (max-width:350px){
    /*Document Setup*/
        /*Typography*/
            h1{font-size: 2em;}
            h2{font-size: 3.5em;}
            h3{font-size: 2em;}
            a{font-size: 1em;}
    
    /*Header*/
            .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}
            .logo{grid-area: 1/1 /span 1 /span 5; text-align: left;}

        /*Navigation*/
            .sidebar{width:100%}
            .menu-icon{display:block;}
            .navigation-list{display: none;}
        
       /*Location and Line*/
            .line-location{display: none;}
    /*Body*/
        /*Section Setup*/
            .grid-container{padding:0px; grid-template-rows: repeat(27,120px);}
       /*Sections*/
            #hero-image{grid-area: 1/1 /span 2 /span 12;}
            .aboutheader, .icecreamheader, .soda-header, .food-header{text-align: center;}
            .aboutheader{grid-area:3/1 /span 1 /span 12;}
            .aboutbody{grid-area:4/1 /span 4 /span 12;}
            
            .icecreamheader{grid-area:8/1 /span 1 /span 12;}
            .icecreambody{grid-area:9/1 /span 4 /span 12;}
            
            .soda-header{grid-area:13/1 /span 1 /span 12;}
            .soda-body{grid-area: 14/1 /span 4 /span 12;}
            
            .food-header{grid-area:18/1 /span 1 /span 12;}
            .food-body{grid-area:19/1 /span 4 /span 12;}    
        /*Illustrations*/
            #line-1{grid-area: 2/1 /span 1 /span 12; align-self: flex-end;}
            #line-2{grid-area:27/1 /span 1 /span 12;}
            #menu-illustration{grid-area:23/1 /span 4 /span 12; padding:  0 100px 100px 100px;}
            
    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}

        /*Logo*/
            .footer-logo{grid-area: 1/1 /span 1 /span 12;}
     
        /*Copywright*/
            .line-copywright a{ white-space: normal;}
}   

@media (max-width:768px) and (min-width:351px){
    /*Document Setup*/    
    
        /*Typography*/
            h1{font-size: 2em;}
            h2{font-size: 3.5em;}
            a{font-size: 1em;}
            h3{font-size: 2em;}
    
    /*Header*/
            .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}  
            .logo{grid-area: 1/1 /span 1 /span 5; text-align: left;}
        /*Navigation*/
            .menu-icon{display:block;}
            .navigation-list{display: none;}
        /*Location and Line*/
            .line-location{display: none;}
    
    /*Body*/
            .grid-container{grid-template-rows: repeat(25, 120px);}
        /*Illustrations*/
            #line-1{grid-area: 4/1 /span 1 /span 12; align-self: flex-end}
            #line-2{grid-area: 25/1 /span 1 /span 12;}
            #menu-illustration{grid-area:21/3 /span 3 /span 8;}
        /*Sections*/
            .aboutheader, .icecreamheader, .soda-header, .food-header{text-align: center;}
            .aboutheader{grid-area:5/3 /span 1 /span 8;}
            .aboutbody{grid-area:6/3 /span 4 /span 8;}
            
            .icecreamheader{grid-area:9/3 /span 1 /span 8;}
            .icecreambody{grid-area:10/3 /span 4 /span 8;}
            
            .soda-header{grid-area:13/3 /span 1 /span 8;}
            .soda-body{grid-area: 14/3 /span 4 /span 8;}
            
            .food-header{grid-area:17/3 /span 1 /span 8;}
            .food-body{grid-area:18/3 /span 4 /span 8;}    
    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
        /*Objects*/
            /*Logo*/
                .footer-logo{grid-area: 1/1 /span 1 /span 12;}
            /*Copywright*/
}
@media (min-width:769px) and (max-width:1200px){
    header h1{font-size: 80px;}
}