/* Setting up custom font-family */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,100;1,300&display=swap");

/* Setting up custom colors */
:root {
   --dark-blue-background: #1f2937;
   --main-text: #f9faf8;
   --secondary-text: #e5e7eb;
   --button: #3882f6;
   --information-header: #1f2937;
   --quote-background: #e5e7eb;
   --quote-text: #1f2937;
}

/* Background-color and global-reset*/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   user-select: none;
}
body {
   font-family: "Roboto", sans-serif;
   background-color: var(--dark-blue-background);
   font-size: 18px;
   color: var(--main-text);
   width: 100%;
   height: 100vh;
}
/* Setting the flex */
.top-section,
.top-mid-section,
.center-mid-section,
.bottom-mid-section,
.main-footer {
   display: flex;
   justify-content: center;
}

/* Setting the section spaces */
.top-content,
.top-mid-content,
.center-mid-content {
   width: 60vw;
}
/* Setting up section colors */
.top-mid-section,
.bottom-mid-section {
   background-color: var(--main-text);
   color: var(--dark-blue-background);
}
.center-mid-section {
   background-color: var(--quote-background);
   color: var(--quote-text);
}

/* Styling the webpage */

/* --|The top section|-- */
.top-content {
   display: flex;
   justify-content: space-around;
   flex-flow: column nowrap;
}

/* navigation */
.navigation {
   display: flex;
   justify-content: space-between;
   padding: 12px;
}
.logo-title {
   display: flex;
   align-items: center;
   gap: 12px;
}
.logo-title:hover {
   cursor: pointer;
}
.website-logo {
   font-size: 24px;
   font-weight: 700;
}
.website-logo__image {
   width: 50px;
   border-radius: 5px;
   filter: invert();
}
.navigation-links {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 25px;
}

.navigation-links li a:link,
.navigation-links li a:visited,
.navigation-links li a:hover,
.navigation-links li a:active {
   padding: 4px 16px;
   text-decoration: none;
   color: var(--secondary-text);
   border-radius: 5px;
   transition: all 500ms;
}

.webpage-title {
   display: flex;
   justify-content: space-between;
   gap: 48px;
}
.website-title {
   font-size: 48px;
}
.left-title {
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
}
.left-title p {
   color: var(--secondary-text);
   text-align: justify;
}
.sign-up {
   width: 100px;
   height: 40px;
   border: none;
   border-radius: 8px;
   color: var(--main-text);
   background-color: var(--button);
   font-size: 18px;
   font-weight: 700;
   transition: all 500ms;
}
.webpage-title img {
   width: 600px;
   border-radius: 5px;
}

/* --|The top-mid section|-- */
.top-mid-content {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   gap: 32px;
}
.secondary-header {
   font-size: 36px;
   font-weight: 900;
}
.gallery {
   display: flex;
   justify-content: space-around;
}
.gallery-item {
   display: flex;
   flex-flow: column wrap;
   align-items: center;
   flex: 0 0 75px;
}
.gallery-item:hover {
   filter: blur(0);
}
.gallery-item__image {
   width: 200px;
   height: 200px;
   border: 4px solid var(--button);
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.gallery-item__image img {
   width: 175px;
   height: 175px;
}

.gallery-item__description {
   text-align: center;
}

/* --|The center-mid section|-- */
.center-mid-content {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   gap: 16px;
}

.quote {
   font-size: 36px;
   font-style: italic;
   font-weight: 300;
}
.quote-author {
   font-weight: 900;
}

/* --|The bottom-mid section|-- */
.bottom-mid-section {
   display: flex;
   justify-content: center;
}
.call-to-action-wrapper {
   width: 60vw;
   padding: 32px 0;
   background-color: var(--button);
   border-radius: 10px;
   display: flex;
   align-items: flex-end;
   justify-content: space-around;
   gap: 128px;
}
.call-to-action__title {
   font-weight: 900;
   color: var(--main-text);
}
.call-to-action__description {
   color: var(--main-text);
}
.call-to-action__button {
   border: 2px solid var(--main-text);
}

/* --|Footer|-- */
.main-footer {
   padding: 16px 0;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
}

.main-footer a:link,
.main-footer a:visited,
.main-footer a:active {
   padding: 4px 8px;
   text-decoration: none;
   background-color: var(--dark-blue-background);
   color: var(--dark-blue-background);
   border-radius: 5px;
}
.main-footer a:hover {
   color: var(--dark-blue-background);
   background-color: var(--secondary-text);
   transition: all 300ms;
}

/* Button states */
button:hover {
   cursor: pointer;
   background-color: var(--main-text);
   color: var(--button);
   transition: all 500ms;
}

/* Section padding */
.webpage-title,
.top-mid-content,
.center-mid-content,
.bottom-mid-content {
   padding: 100px 0;
}

/* Nav links states */
.navigation-links li a:hover {
   background-color: var(--secondary-text);
   color: var(--information-header);
   transition: all 300ms;
}