@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic styling for the body portion of the website. Sets the default font and the background image and its properties. Background image is fixed to help enhance user performance and re-rendering.  */
body {
    font-family: "Solway", serif;
    font-weight: 400;
    /* IMAGE FROM ADOBE STOCK. PLEASE MENTION THIS IN TEH WEBSITE THAT IT IS LICENSED  */
    background-image: url("../assets/AdobeStock_41916191.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    
}

/* Basic padding on the navigation bar present at the top of the page. */
nav {
    padding-left: 3vw;
    padding-right: 3vw;
}

/* Unordered list for the navigation bar at the top of the page. Sets the width of the navbar and its display type with how the items will be arranged. */
nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-start;
}

/* Specific navigation list items, though not the links. Sets the height of each box and again sets it to a flex display type. */
nav li {
    height: 9.7vh;
    display: flex;
    align-items: center;
}

/* Properties for the actual navigation items on the page. Adjusts the font size, position, removes link decoration, and other things present in the block below. */
nav a {
    position: relative;
    height: 100%;
    padding: 0 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    color: white;
    font-size: clamp(16px, 1.667vw, 24px)
}

/* Moves the sign in button to the far right of the screen. */
nav li:last-child {
    margin-left: auto;
}

/* Moves the logo to the far left of the screen. */
.navbar li:first-child {
    margin-right: 10vw;
}

/* Adds an effect for any link with the ".activepage" class. changes background color, height, width, etc. */
.activepage {
    background-color: rgba(0, 0, 0, 0.4);
    height: 50px;
    border-radius: 13px;
    height: 5.7vh;
    width: 7.2vw;
    padding: 0;
    display: flex;
    justify-content: center;
}

/* CTA button, call-to-action. In this case the sign in button. Changes it to have a yellow background color with a black font color. Also changes the boldness of the item. */
.cta {
    height: 5.8vh;
    background-color: #E9CE00;
    border-radius: 10px;
    padding: 0;
    width: clamp(130px, 10vw, 180px);
    text-align: center;
    font-family: "Solway", serif;
    font-weight: 600;
    display: flex;
    justify-content: center;
    color: black;
}

/* "Logo" at the far left of the navbar. In reality it is text of the website name, LAFBox. */
.logo {
    padding: 0;
    font-size: clamp(24px, 2.25em, 48px);
    font-weight: 700;
}

/* A horizontal rule, separates the navbar from the rest of the page. The styling affects the height of it and the fill color. */
hr {
    height: 3px;
    background-color: white;
}

/* "Hero" section of a page. First thing that a person sees when they visit the website. IN this case it is changing the margins and the display type. */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    margin-top: 10%;
    margin-bottom: 10%;
}

/* Main text block of the hero section. Changes the display type, color of text, and the width of it.
Width is done in VW (view width), which is proportional to the screen size (in width) of the user. This allows for better responsitivity. When VW is used in the subsequent lines of code, it is used for responsitivity*/
.text {
    display: inline-block;
    color: white;
    width: 27vw;
}

/* Header of the text block of the hero section. Text is saying our the name of our product, LAFBox. Styling is changing the font size, boldness, and margins. */
.text h1 {
    font-size: clamp(68px, 5vw, 500px);
    font-weight: 700;
    margin-bottom: 2.5vh;
}

/* Subheading under the main heading. Text has our "slogan", what we are trying to do with our product. Styling affects font size & weight, and the margins of the page. */
.text h2 {
    margin-top: 2.5vh;
    font-size: clamp(24px, 1.667vw, 64px);
    font-weight: 400;
    margin-bottom: 5vh;
}

/* Secondary CTA. We want users to click on the "Learn More" button (this object) and read more about our product, hopefully making a purchase. Styling affects display type, alignment, background, etc.  */
.text a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: clamp(24px, 1.667vw, 64px);;
    font-weight: 500;
    background-color: #D9D9D9;
    border-radius: 8px;
    height: 8.1vh;
    width: 15.3vw;
    margin-top: 5%;
}

/* Our "image" for the hero section. Though in this case its not a traditional image but something built with CSS & HTML */
.image {
    background-color: #434343;
    width: 36vw;
    height: 47vh;
    border-radius: 29px;
    border: 5px solid #121212;
}

/* Styling for the red button in the hero image section. */
.redbutton {
    color: red;
    display: inline;
}

/* Styling for the yellow button in the hero image section. */
.yellowbutton {
    color: yellow;
    display: inline;
}

/* Styling for the green button in the hero image section. */
.greenbutton {
    color: rgb(0, 152, 0);
    display: inline;
}

/* Genearl styling for the buttons. Includes changing the size of the button, margin, selectability, etc. */
.buttons {
    margin-left: 15px;
    font-size: 3em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* "Blocks" of text in the text section of the hero image. Styling is affecting the display and direction of the items. */
.blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Specific styling for the first block of text. Almost the exact same as the second one except that the second one has a different margin-top value. Overall, styling affects display, font size, background, etc. */
.block1 {
    display: flex;
    background-color: #262626;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    width: 32vw;
    height: 15.7vh;
    margin-top: 2.5%;
    border-radius: 22px;
    font-size:  clamp(16px, 1.2vw, 32px);
    text-align: center;
    padding-right: 10%;
    padding-left: 10%;
}

/* Same as block 1 of styling for the text in the hero image except the margin-top is slightly higher to allow for more space between the two items. */
.block2 {
    display: flex;
    background-color: #262626;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    width: 32vw;
    height: 15.7vh;
    margin-top: 5%;
    border-radius: 22px;
    font-size: clamp(16px, 1.2vw, 32px);
    text-align: center;
    padding-right: 10%;
    padding-left: 10%;
    
}

/* InfoBlock CSS */

/* First block of information past the hero section. Border-radius affect gives the affect that this is a circle being cut off the screen, but without using SVGs or other objects that could affect user performance. Z-index of 2 with position relative ensures that it will be on top. The rest is normal styling. */
.info1 {
    background: white;
    width: 100%;
    padding: 27vw 0;
    border-radius: 50% 50% 50% 50% / 18% 18% 18% 18%;
    height: 55vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 2;
    position: relative;
}

/* Main header for the block of text. Stlying affects boldness, size, and margin. This gives clear hierarchy when users see the page and they know what to look at first. */
.blockh1 {
    font-weight: 700;
    font-size: clamp(24px, 3.333vw, 72px);
    margin-bottom: 5%;
}

/* Mainblock of text for this information block. Styling brings it to a normal boldness and changes the size and margin-bottom.  */
.blockh2 {
    font-weight: 400;
    font-size: clamp(12px, 1.667vw, 56px);
    margin-bottom: -0.2vw;
}

/* Subclass of the text, changing the width so that the text fits fully in the space. */
.textblock {
    width: 27vw;
}

/* Another "subcta", "Learn More". Styling on this one affects the boldness, a semi-bold/medium affect on this one, and removes link decoration and other styling aspects. */
.blocklink {
    font-weight: 500;
    text-decoration: none;
    background-color: #D9D9D9;
    color: black;
    font-size: clamp(12px, 1.667vw, 56px);
    border-radius: 16px;
    height: 100%;
    width: 100%;
    padding: 2.5% 2.5% 2.5% 2.5%;
}

/* A span in the sentence encompassing "LAFBox". Changes the color and weight so that users are drawn to the name.  */
.blockh2 span {
    font-weight: 700;
    color: #01367C;
}

/* Styling for the underline underneath the LAFBox text. */
.svgunderline {
    margin-bottom: 2vw;
    width: 6.875vw; 
}

/* Second info block. Mostly the same styling as the first one, but a different z-index and background color is utilized.  */
.info2 {
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-top: -30vw;
    padding-top: 35vw;
    padding-bottom: 8vw;
    height: 70vw;
    
}

/* Styling for both info-block images. Affects border-radius and the height to give the images a clean look. */
.image2 img {
    border-radius: 21px;
    height: 32vw;
}

/* Styling for the info block 2's text block. Font weight and size and margin changed. One thing to note, in the font sizes, most of the time VW is used (vertical width). This is becasue VW allows for more responsitivity before the media queries. */
.blockh2-2 {
    font-weight: 400;
    font-size: clamp(12px, 1.667vw, 56px);
    margin-bottom: 4vh;
}

/* Second block's CTA link. Mostly the same as the previous one other than the background color, font color, and a few other factors being different. */
.blocklink2 {
    font-weight: 500;
    text-decoration: none;
    background-color: #ffffff;
    color: black;
    font-size: clamp(12px, 1.667vw, 56px);
    border-radius: 16px;
    padding: 2.5% 2.5% 2.5% 2.5%;
}
/* Hides the hamburger menu when viewed on PC. Navbar. */
.hideonpc {
    display: none;
}

/* Hides everything except the hamburger menu and logo when viewed on mobile. Navbar. */
.hideonmobile {
    display: flex;
}

/* Styling for the hamburger menu. Puts it at the far right of the navbar and removes the background color. */
.hamburger {
    margin-left: auto;
    background-color: none;
}

/* Removes the background color and border for the button encompassing the SVG. */
button {
    background-color: rgba(255, 255, 255, 0);
    border: none;
}

/* Styling for the sidebar that can be opened when a user is on mobile. Styling makes the position fixed allowing it with the JS to be transformed and translated onto the screen. Styling also affects transitions, background, etc. */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    align-items: flex-start;
    justify-content: flex-start;
    
}

/* Centers everything in the sidebar.  */
.sidebar li a {
    justify-content: center;
    
}

/* Styling for the close button SVG. Padding makes it a little farther away from the far left. */
.close {
    padding-left: 5%;
}

/* Changes the width of the list items to 100%, making it easier for mobile users to click the navigation buttons. */
.sidebar li {
    width: 100%;
}

/* Same as the previous. */
.sidebar a {
    width: 100%;
}

/* Mobile Response */

/* Media query that only affects things with a screen size of less than 750px. Queries allow for the website to have better functionality on mobile devices, which is one of the main drivers of traffic for a website.  */
@media (max-width: 750px) {
    /* Makes the items with a .hideonpc class visible now.  */
    .hideonpc {
       display: flex;
       margin-left: auto;
       flex-direction: row;
       justify-content: flex-end;
    }
    /* Hides anything with a .hideonmobile class. */
    .hideonmobile {
        display: none;
    }
    /* Changes the display type of the hero block to better fit on the screen. */
    .hero {
       display: block;
       text-align: center;
    }
    /* Changes the width of the text block for the hero to allow for better readability. */
    .text {
       width: 90vw;
    }
    /* Changes the width of the CTA for the hero block to allow for an optimal button size. */
    .text a {
       width: 60vw;
    }
    /* Styling for the hero "image". Affects sizing, margin, and places it in the center of the page. Text-align left allows the buttons to keep their position */
    .image {
        width: 80vw;
        height: 37vh;
        margin-top: 7vh;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }
    /* First block of text in the hero "image". Affects the width and height for an optimal value utilizing vertical height and width. */
    .block1 {
        width: 70vw;
        height: 12vh;
    }
    /* Same as previous. */
    .block2 {
        width: 70vw;
        height: 12vh;
    }
    /* First information block styling on mobile. Changes the display type to allow for better mobile view. Aligns everything center and changes the height of it. */
    .info1 {
        display: block;
        text-align: center;
        height: 120%;
        padding-top: 10vw;
    }
    /* Textblock in the info1 block. Styling affects the width, margin forces it into the center of the page and the padding allows for better readability. */
    .textblock {
        width: 100vw; 
        margin-left: auto;
        margin-right: auto;
        padding-right: 5%;
        padding-left: 5%;
    }
    /* H1 for the textblock. Affects font size to a mobile-friendly value. */
    .blockh1 {
        font-size: clamp(36px, 5vw, 128px);
    }
    /* H2 for the textblock. Affects font size to a mobile-friendly value and puts more margin inbetween it and the CTA. */
    .blockh2 {
        font-size: clamp(16px, 4vw, 72px);
        margin-bottom: 5vw;  
    }
    /* Changes the font size of the link to a more mobile-friendly value. */
    .blocklink {
      font-size: clamp(12px, 4vw, 56px)
    }
    /* Changes the padding for the image. */
    .image2 {
        padding-bottom: 5vw;
    }
    /* Changes the height of the image to a more mobile friendly value. */
    .image2 img {
        height: 50vw
    }
    /* Removes the underline for mobile devices to help with the reading experience. */
    .svgunderline {
        display: none;
    }
    /* Changes the display of the second info block. Similiar changes that were made to info1. Adds additional padding to allow for better readability.*/
    .info2{
        display: block;
        text-align: center;
        height: 120%;
        padding-top: 35vw;
    }
    /* Affects font size and bottom margin to the h2.  */
    .blockh2-2 {
        font-size: clamp(16px, 4vw, 72px);
        margin-bottom: 5vw;  
    }
    /* Changes font size for the link in the second info block. */
    .blocklink2 {
      font-size: clamp(12px, 4vw, 56px); 
    }
    /* Changes the margin values for the image for the second info block. */
    .img2-2 {
        margin-top: 8vw;
    }
}

/* Media query to make the sidebar 100% of the screen width when viewed on smaller screens. */
@media (max-width: 450px) {
    .sidebar {
        width: 100vw;
    }
}

.image2 {
    transform: scale(120%);
}