@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:#F6F1E6; font-size: 100px;}
            h2{font-family: "charlottenburg-compressed"; font-size: 60px;  letter-spacing: 3px; color: #FFFFFC;}
            h3{font-family: "worthington-arcade", serif; font-weight: 100; font-style: normal; color: #FFFFFC; font-size: 5vw;}
            a{font-family: "arquitecta", sans-serif;font-size: 20px; text-transform: uppercase; color: #F6F1E6; letter-spacing: 2px; text-decoration: none; padding:none; font-weight: 600;}
            p{font-family: "arquitecta", sans-serif; letter-spacing: 1.2px; font-size: 18px; text-align: justify; line-height: 21px; color: #FFFFFC; padding-bottom: 30px; font-weight: 500; hyphens: none;}
            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;}
            .script-heading-white{text-align: left;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 100px; color: #F6F1E6; font-style: italic;}
            .script-heading-orange{text-align: left;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 100px; color:#E6472F; font-style: italic;}

/*Header*/

    /* Section Setup*/
          .line-location{display: none;}
        header{position: relative; z-index: 10;}
        .header-grid-container{display: grid; grid-template-rows: repeat(1, 120px); grid-template-columns: repeat(12,1fr); gap:12px; padding:12px; margin-top: 0; background: #E6472F;}
    /*Objects*/
            .logo{grid-area: 1/3 /span 2 /span 8; text-align: center; z-index: 3;}
        /*Navigation*/
            /*Object Setup*/
                .navigation{grid-area: 1/12 /span 1 /span 1; z-index: 3; padding-right: 12px;}
            /*Typography*/
                nav{text-align: right; font-family:"itc-avant-garde-gothic-pro", sans-serif; font-weight:400; font-size:22px; line-height:32px; color:#F6F1E6;}
                li a{text-align: right;font-family:"itc-avant-garde-gothic-pro", sans-serif;font-weight:400; font-size:22px; line-height:32px; color:#F6F1E6; 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:#F6F1E6;}
                .desktop-navigation li:hover{transform: translate(-22px); transition: 0.1s ease; color:#F6F1E6;}
                .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:#1E191B; width:100%; align-items: center;}
                .sidebar a{color:#1E191B; 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(51, 120px); overflow: hidden;} 
    /*Sections*/
            #about-heading{grid-area: 8/1 /span 1 /span 12; text-align: center; display: none;}
            #about-paragraph{grid-area: 9/4 /span 8 /span 6; display: none;}
    
    /*Title*/
            #title-background{grid-area: 1/1 /span 8 /span 12; position:relative; background: #E6472F; display: flex; justify-content: center;}
            #title-container{width: 100%; height:200px; background:#F6F1E6; top:500px; position: relative;}
            #title{position: absolute; left:35%; top:20px}
            #established{position: absolute; left:45%; bottom:25px}
            .title-subtitle{font-family: "Inter", sans-serif; letter-spacing: 10px; font-size: 32px; font-weight: 300; color:#1E191B; text-transform: uppercase;}
            
            #title-years-container{display: flex; align-items: center; justify-content: center; height:100%; position:absolute; flex-direction: column; left: 6%}
            #year-circle{width:100px; height:100px; background: #1E191B; position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
            #year-subtitle{position: relative; padding-top: 10px}

            #year{font-family: "arquitecta", sans-serif; font-size: 80px; color: #F6F1E6; font-weight: 100; padding-top:10px}
            #fountain-head{position: absolute; z-index: 2; right:8%; height:80%; top: 60px;}

            #vertical-line{position:absolute; height: 300px; width: 3px; background: #1E191B; top:450px; z-index: 2; left: 32%}
    /* Thirty One Years Section*/
            #thirty-one-years-container{grid-area:9/1 /span 8 /span 12; background: #F6F1E6; display: flex; justify-content: center;}
            #thirty-one-circle{width: 300px; height: 300px; background: #1E191B; border-radius: 50%; display: flex; justify-content: center;}
            #thirty-one{font-size: 250px; position:absolute; font-family: "arquitecta", sans-serif; color:#E6472F; font-weight: 100; align-self: center; padding-top: 25px}
            #thirty-one-subtitle{padding:30px;}
            #thirty-one-subtitle .title-subtitle{font-size: 60px; font-weight: 200}
            #thirty-one-paragraph{width:460px;}
            #thirty-one-paragraph p{color: #1E191B;}
            #thirty-center{align-items: center; justify-content: center; display: flex; flex-direction: column; height:100%; transform: translateY(65px)}
    /*Founding Section*/
            #founding-background{background: #F6F1E6; grid-area: 16/1 /span 9 /span 12; margin: 0; display: flex; justify-content: center; align-items: center; }
            #founding-text{width:50%; position:absolute; right: 0; display: flex; align-items:center; justify-content: center; flex-direction: column;}
            #founding-container{background:#1E191B; width:100% ; height: 600px; position: relative; overflow: hidden;}
            #founding-image{width:50%; position: absolute; mix-blend-mode: multiply; height:100%; overflow: hidden; object-fit: cover;}
            #founding-heading{padding-top:60px;}
            #founding-paragraph{padding-top:40px;width: 460px;}
            #founding-paragraph p{color:#F6F1E6;}
            .image-background{background:#F6F1E6; width: 50%; height:100%; position:absolute;}
    /*Fountain Section*/
            #fountain-background{background: #F6F1E6; grid-area: 25/1 /span 9 /span 12; margin: 0; display: flex; justify-content: center; align-items: center; }
            #fountain-container{background:#E6472F; width:100% ; height: 600px; position: relative; overflow: hidden;}
            #fountain-image{width:50%; position: absolute; mix-blend-mode: multiply; height:100%; overflow: hidden; object-fit: cover; right:0}
            #fountain-text{width:50%; position:absolute; left:0; display:flex; align-items: center; justify-content: center; flex-direction: column;}
            #fountain-heading{padding-top:60px;}
            #fountain-paragraph{padding-top:40px;width: 460px;}
            #fountain-paragraph p{color: #1E191B;}
    /*Building History Section*/
            
            #building-history-background{grid-area:37/1 /span 4 /span 12; display: none;}

            #building-history{grid-area:35/1 /span 1 /span 12; position:relative; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;}
            #building-history img{height:11px; width:auto; object-fit: cover; margin-left: 12px; margin-right: 12px; vertical-align: middle;}
            .sections{font-family: "worthington-arcade", serif; font-weight: 400;font-style: normal; color:#FFFFFC; font-size: 60px; display: inline-block; white-space: nowrap; vertical-align: middle;}

            #year-info-container h2{color: #E6472F; text-align: center; letter-spacing: 5px;}
            #year-info-container{grid-area: 37/1 /span 5 /span 12; display: flex; align-items: center; justify-content: center; flex-direction: column;}
            #year-info-background{height:600px; width:460px; z-index: 8; padding:48px; position: relative;}
#paragraph-1885 p, #paragraph-1892 p, #paragraph-1899 p, #paragraph-1904 p, #paragraph-1914 p{color: #F6F1E6}

            .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;}

        /*Map*/

            #map-hover{width:350px; height: auto; border-radius: 50%; border: .2em solid #FFFFFC; z-index: 2; opacity: 0; transition: opacity 0.2s ease; mix-blend-mode: multiply; display: flex; position:absolute;left:auto; right:auto;}

            #map-container:hover #map-hover{opacity: 1;}
            #map-container{width:460px; display: flex; justify-content: center; padding-top: 140px}
            #image-1885, #image-1892, #image-1899, #image-1904, #image-1914{width:350px; height:auto; border: .2em solid #F6f1e6; z-index: 1;transition: .3 ease-in-out; border-radius: 50%; display:flex;}

            #image-1885{display: block;}
            #image-1892{display: none;}
            #image-1899{display: none;}
            #image-1904{display: none;}
            #image-1914{display: none;}

        /*Year Headers*/        

            .year{font-family:"itc-avant-garde-gothic-pro", sans-serif; font-weight:100;font-size: 30px; color:#E6472F; letter-spacing: 2px;}
            #header-1885, #header-1892, #header-1899, #header-1904, #header-1914{position: absolute; margin-left: auto; margin-right: auto; left:0; right:0; transition: .3 ease-in-out; top:60px;}

            #header-1885{display: block;}
            #header-1892{display: none;}
            #header-1899{display: none;}
            #header-1904{display: none;}
            #header-1914{display: none;}

        /*Year Paragraph*/

            #paragraph-1885 p, #paragraph-1892 p, #paragraph-1899 p, #paragraph-1904 p, #paragraph-1914 p{color: #F6F1E6;} 
            #paragraph-1885 p, #paragraph-1892, #paragraph-1899, #paragraph-1904, #paragraph-1914{position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; padding:24px; top:120px; transition: .3 ease-in-out;}

            #paragraph-1885{display: block;}
            #paragraph-1892{display: none;}
            #paragraph-1899{display: none;}
            #paragraph-1904{display: none;}
            #paragraph-1914{display: none;}
            
        /*Interactive Elements*/

            #left-arrow{position: absolute; bottom:100px; left: 20px; fill: #E6472F;}
            #left-arrow:hover{fill: #89AEB7; transition: .5 ease-in-out;}
            
            #right-arrow{position: absolute; bottom:100px; right: 20px; fill: #E6472F;}
            #right-arrow:hover{fill: #89AEB7; transition: .5 ease-in-out;}
            
            #right-year{position:absolute; right:20px; bottom:160px}
            #left-year{position:absolute; left:20px; bottom:160px}
            
            #timeline{width:50%; height:5px; position: absolute; bottom:174px; background:#F6F1E6; left:0; right:0; margin:auto; border-radius: 2.5px;}
            
            #dot-1885, #dot-1892, #dot-1899, #dot-1904, #dot-1914{width:10px; height:10px; background: #E6472F ;border-radius:5px; z-index:7;position:absolute; bottom:171px; transition: .3 ease-in-out;}

            #dot-1885{display:block; left:110px;}
            #dot-1892{display:none;left:167px;}
            #dot-1899{display:none;left:224px;}
            #dot-1904{display:none;left:281px;}
            #dot-1914{display:none;left:340px;}

        /*Merchantile, 1934, and the Fire of 2002*/

            #section-3-background{ grid-area: 42/1 /span 9 /span 12; margin: 0; display: flex; justify-content: center; align-items: center; }
            #section-3-container{background:#F6F1E6; width:100% ; height: 600px; position: relative; overflow: hidden;}
            #section-3-text-container{width: 50%; position: absolute;  display: flex; right: 0; justify-content: center; }
            #section-3-text{display: flex; flex-direction: column; align-items: left; height: 600px; position: relative;}
            #section-3-heading{position:relative; top:60px;}
            #section-3-paragraph{width:460px;position: relative; top:90px}
            #section-3-paragraph p{color: #1E191B;}
            #arrow-container{width: 460px;}
            #arrow{fill:#E6472F; position: absolute; right: 0; bottom:60px;}
            #arrow:hover{fill: #89AEB7; transition: .5 ease-in-out;}

        /*images*/
            #merchantile-image, #memorial-day-image, #livery-fire-image{width:50%; position: absolute; mix-blend-mode: multiply; height:100%; overflow: hidden; object-fit: cover;}
            #merchantile-image{display: block;}
            #memorial-day-image{display:none;}
            #livery-fire-image{display:none;}
        /*Headings*/
            #merchantile-heading{display: block;}
            #memorial-day-heading{display: none;}
            #livery-fire-heading{display: none;}
        /*Paragraphs*/
            #merchantile-paragraph{display:block;}
            #memorial-day-paragraph{display:none;}
            #livery-fire-paragraph{display:none;}

        footer a{color:#FFFFFC;}
    /*Section Setup*/
        .footer-grid-containter{display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(3,120px); gap: 12px; padding: 12px;}
        footer{background: #1E191B;}
    /*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;}

    /*copywright*/
        .line-copywright{grid-area:3/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;}
   .photo-credit{color:#E6472F;}


@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(4,120px)}

    /*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;}
    
    
        /*Document Setup*/    
    
        /*Typography*/
            h1{font-size: 2em;}
            h2{font-size: 3.5em;}
            a{font-size: 1em; }
            h3{font-size: 2em;}
    .script-heading-orange, .script-heading-white{font-size: 70px;}
    /*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;}
    
     #title-background{grid-area: 1/1 /span 6 /span 12;}
            #title-container{ height:100px; top:300px;}
            #title{left:10%; top:15px}
            #established, #year-circle, #year-subtitle{display:none;}

            #fountain{right:8%; height:300px; top: 80px;}

            #vertical-line{display:none;}
    
    #thirty-one-years-container{grid-area:6/1 /span 8 /span 12;}    
    
    /*Body*/
       #thirty-one-circle{width: 160px; height: 160px;}
            #thirty-one{font-size: 130px; font-weight: 200;}
                #thirty-one-paragraph{width:300px;}
    /*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*/
    
            #founding-background{grid-area: 15/1 /span 9 /span 12;}
            #founding-text{width:100%;}
            #founding-container{height: 900px;}
    
            #founding-image{width:100%; position:relative; height:30%;}
    
            #founding-heading{padding-top:10px;}
            #founding-paragraph{padding-top:20px;width: 300px;}
    
            .image-background{background:#F6F1E6; width: 100%; height:30%; position:absolute;}
     /*Fountain Section*/
            #fountain-background{grid-area: 23/1 /span 9 /span 12;}
            #fountain-container{width:100% ; height: 900px;}
            #fountain-image{width:100%; position: relative; height:30%;}
            #fountain-text{width:100%;}
            #fountain-heading{padding-top:10px;}
            #fountain-paragraph{padding-top:20px;width: 300px;}
    
      /*Building History Section*/
            
            #building-history-background{grid-area:34/1 /span 4 /span 12; display: none;}
            #building-history{grid-area:33/1 /span 1 /span 12; overflow: visible;}
            #building-history .script-heading-white{text-align: center;}
            #year-info-container{grid-area: 37/1 /span 5 /span 12;}
            #year-info-background{height:700px; width:300px;}
            #map-hover{width:300px;}
            #map-container{width:300px;}
            #image-1885, #image-1892, #image-1899, #image-1904, #image-1914{width:300px;}
    
        /*Interactive Elements*/

            #right-year{display: none;}
            #left-year{display: none;}
            #timeline{width:80%;}
            #dot-1885{left:30px;}
            #dot-1892{left:87px;}
            #dot-1899{left:145px;}
            #dot-1904{left:202px;}
            #dot-1914{left:260px;}
    
     /*Merchantile, 1934, and the Fire of 2002*/

            #section-3-background{ grid-area: 44/1 /span 9 /span 12;}
            #section-3-container{ width:100% ; height: 900px;}
            #section-3-text-container{width: 100%;}
            #section-3-text{display: flex; flex-direction: column; align-items: left; height: 600px; position: relative;}
            #section-3-heading{position:relative; top:60px;}
            #section-3-paragraph{width:300px;position: relative; top:90px}
            #section-3-paragraph p{color: #1E191B;}
            #arrow-container{width: 300px;}
            #arrow{fill:#E6472F; position: absolute; right: 0; bottom:60px;}
            #arrow:hover{fill: #89AEB7; transition: .5 ease-in-out;}

            #merchantile-image, #memorial-day-image, #livery-fire-image{width:100%; height:30%; position: relative;}
    
}   

@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;}
    .script-heading-orange, .script-heading-white{font-size: 70px;}

        /*Location and Line*/
            .line-location{display: none;}
    
     #title-background{grid-area: 1/1 /span 6 /span 12;}
            #title-container{ height:100px; top:300px;}
            #title{left:10%; top:15px}
            #established, #year-circle, #year-subtitle{display:none;}

            #fountain{right:8%; height:300px; top: 80px;}

            #vertical-line{display:none;}
    
    #thirty-one-years-container{grid-area:7/1 /span 8 /span 12;}
    #founding-background{grid-area: 14/1 /span 9 /span 12; margin: 0; display: flex; justify-content: center; align-items: center; }
    
    
    /*Body*/
       #thirty-one-circle{width: 160px; height: 160px;}
            #thirty-one{font-size: 130px; font-weight: 200;}
                #thirty-one-paragraph{width:300px;}
    /*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*/
    
            #founding-background{grid-area: 14/1 /span 9 /span 12;}
            #founding-text{width:100%;}
            #founding-container{height: 900px;}
    
            #founding-image{width:100%; position:relative; height:30%;}
    
            #founding-heading{padding-top:10px;}
            #founding-paragraph{padding-top:20px;width: 300px;}
    
            .image-background{background:#F6F1E6; width: 100%; height:30%; position:absolute;}
     /*Fountain Section*/
            #fountain-background{grid-area: 23/1 /span 9 /span 12;}
            #fountain-container{width:100% ; height: 900px;}
            #fountain-image{width:100%; position: relative; height:30%;}
            #fountain-text{width:100%;}
            #fountain-heading{padding-top:10px;}
            #fountain-paragraph{padding-top:20px;width: 300px;}
    
      /*Building History Section*/
            
            #building-history-background{grid-area:34/1 /span 4 /span 12; display: none;}
            #building-history{grid-area:33/1 /span 1 /span 12; overflow: visible;}
            #building-history .script-heading-white{text-align: center;}
            #year-info-container{grid-area: 37/1 /span 5 /span 12;}
            #year-info-background{height:700px; width:300px;}
            #map-hover{width:300px;}
            #map-container{width:300px;}
            #image-1885, #image-1892, #image-1899, #image-1904, #image-1914{width:300px;}
    
        /*Interactive Elements*/

            #right-year{display: none;}
            #left-year{display: none;}
            #timeline{width:80%;}
            #dot-1885{left:30px;}
            #dot-1892{left:87px;}
            #dot-1899{left:145px;}
            #dot-1904{left:202px;}
            #dot-1914{left:260px;}
    
     /*Merchantile, 1934, and the Fire of 2002*/

            #section-3-background{ grid-area: 44/1 /span 9 /span 12;}
            #section-3-container{ width:100% ; height: 900px;}
            #section-3-text-container{width: 100%;}
            #section-3-text{display: flex; flex-direction: column; align-items: left; height: 600px; position: relative;}
            #section-3-heading{position:relative; top:60px;}
            #section-3-paragraph{width:300px;position: relative; top:90px}
            #section-3-paragraph p{color: #1E191B;}
            #arrow-container{width: 300px;}
            #arrow{fill:#E6472F; position: absolute; right: 0; bottom:60px;}
            #arrow:hover{fill: #89AEB7; transition: .5 ease-in-out;}

            #merchantile-image, #memorial-day-image, #livery-fire-image{width:100%; height:30%; position: relative;}

}
@media (min-width:769px) and (max-width:1200px){
    header h1{font-size: 80px;}
    .script-heading-orange{font-size: 70px;}
    .script-heading-white{font-size: 70px;}
    p{letter-spacing: 1.2px; font-size: 16px;}

    
/*Title Section*/
    #fountain-head{right:5%}
/*Body Section*/ 
    
     /*Founding Section*/
            #founding-paragraph, #section-3-paragraph, #fountain-paragraph{width: 320px;}
                #arrow-container{width: 320px;}
     #thirty-one-circle{width: 220px; height: 220px;}
            #thirty-one{font-size: 200px;}

}