/* 
  Theme Name: uwu
  Text Domain: uwu
  Version: 1.0
  Description: uwu
  Tags: uwu
  Author: Łukasz G
*/

/* 
  ****COLORS****

  hsl(9, 63%, 34%)


  hsl(42, 53%, 58%)

  hsl(11, 40%, 8%)
  hsl(14, 40%, 10%)
  hsl(12, 45%, 15%)
  hsl(16, 50%, 17%)


  Spacing:
1px	2px	4px	6px	8px	10px 12px	14px 16px	20px	24px	28px	32px	36px	40px	44px	48px	56px	64px	80px	96px	112px	128px	144px	160px	176px	192px	208px	224px	240px	256px	288px	320px	384px
 
  
  */

/* --primary-900: hsl(11, 40%, 8%);
  --primary-800: hsl(14, 40%, 10%);
  --primary-700: hsl(12, 45%, 15%);
  --primary-600: hsl(16, 50%, 17%);
  --primary-500: hsl(18, 52%, 29%);
  --primary-400: hsl(20, 48%, 41%);
  --primary-300: hsl(22, 52%, 63%);
  --primary-200: hsl(25, 58%, 72%);
  --primary-100: hsl(27, 60%, 86%);
  --primary-050: hsl(30, 65%, 95%); */

/* --primary-900: hsl(11, 40%, 8%);
  --primary-800: hsl(14, 40%, 10%);
  --primary-700: hsl(12, 45%, 15%);
  --primary-600: hsl(16, 50%, 17%);
  --primary-500: hsl(14, 52%, 32%);
  --primary-400: hsl(12, 48%, 41%);
  --primary-300: hsl(10, 52%, 63%);
  --primary-200: hsl(8, 58%, 72%);
  --primary-100: hsl(6, 60%, 86%);
  --primary-050: hsl(3, 65%, 95%); */

/* hsl(33, 50%, 41%) */
/* hsl(32, 46%, 47%) */

:root {
  /* --primary-950: hsl(12, 62%, 3%); */
  --primary-950: #1c0e0b;
  --primary-900: hsl(4, 40%, 10%);
  --primary-800: hsl(6, 41%, 16%);
  --primary-700: hsl(7, 43%, 24%);
  --primary-600: hsl(8, 44%, 32%);
  --primary-500: hsl(9, 44%, 40%);
  --primary-400: hsl(14, 48%, 51%);
  --primary-300: hsl(16, 52%, 63%);
  --primary-200: hsl(20, 58%, 72%);
  --primary-100: hsl(24, 60%, 86%);
  --primary-050: hsl(30, 65%, 91%);

  --yellow-900: hsl(20, 33%, 14%);
  --yellow-800: hsl(28, 43%, 18%);
  --yellow-700: hsl(34, 49%, 26%);
  --yellow-600: hsl(33, 52%, 38%);
  --yellow-500: hsl(42, 56%, 48%);
  --yellow-400: hsl(42, 59%, 56%);
  --yellow-300: hsl(44, 60%, 62%);
  --yellow-200: hsl(46, 65%, 74%);
  --yellow-100: hsl(52, 70%, 87%);
  --yellow-050: hsl(60, 73%, 93%);

  --grey-900: hsl(9, 0%, 10%);
  --grey-800: hsl(9, 0%, 14%);
  --grey-700: hsl(9, 0%, 18%);
  --grey-600: hsl(9, 0%, 26%);
  --grey-500: hsl(9, 0%, 38%);
  --grey-400: hsl(9, 0%, 46%);
  --grey-300: hsl(9, 0%, 58%);
  --grey-200: hsl(9, 0%, 70%);
  --grey-100: hsl(9, 0%, 84%);
  --grey-050: hsl(9, 0%, 95%);
}

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

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  /* font-size: 62.5%; */
  /* overflow-x: hidden; */
  overflow-x: initial !important;

  /* Does NOT work on Safari and Microsoft edge */
  /* scroll-behavior: smooth; */
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1;
  font-weight: 400;
  color: var(--grey-600);

  /* Only works if there is nothing absolutly positioned in relation to body */
  overflow-x: hidden;
}

.button {
  margin: 20px;

  border: none;
  padding: 8px 16px;
  background-color: var(--primary-500);

  font-size: 24px;

  color: var(--primary-050);
  border-radius: 99999px;
}

.box-container {
  margin-top: 100px;
  margin-left: 100px;
  display: flex;
  gap: 12px;
}

.box-9 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-900);
}
.box-8 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-800);
}
.box-7 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-700);
}
.box-6 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-600);
}
.box-5 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-500);
}
.box-4 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-400);
}
.box-3 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-300);
}
.box-2 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-200);
}
.box-1 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-100);
}
.box-05 {
  width: 100px;
  height: 100px;
  background-color: var(--primary-050);
}

/* ////////////////////////////////////// */

.box-9-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-900);
}
.box-8-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-800);
}
.box-7-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-700);
}
.box-6-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-600);
}
.box-5-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-500);
}
.box-4-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-400);
}
.box-3-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-300);
}
.box-2-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-200);
}
.box-1-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-100);
}
.box-05-grey {
  width: 100px;
  height: 100px;
  background-color: var(--grey-050);
}

/* YELLOW //////////////////////////// */

.box-9-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-900);
}
.box-8-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-800);
}
.box-7-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-700);
}
.box-6-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-600);
}
.box-5-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-500);
}
.box-4-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-400);
}
.box-3-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-300);
}
.box-2-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-200);
}
.box-1-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-100);
}
.box-05-yellow {
  width: 100px;
  height: 100px;
  background-color: var(--yellow-050);
}

/* ///////// */
/* MAIN PAGE */
/* ///////// */

.header {
  position: fixed;
  width: 100%;
  top: 0;

  /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);

  padding: 16px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 4;

  color: var(--primary-200);
  background: var(--primary-800);
}

.header h1 {
  font-size: 36px;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-list--element-link,
.nav-list--element-link:link,
.nav-list--element-link:visited {
  transition: all 0.3s;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  color: var(--grey-200);
}

.nav-list--element-link:active,
.nav-list--element-link:hover {
  color: var(--grey-400);
}

.hero {
  margin-top: 68px;
  width: 100%;
  /* height: 700px; */
  /* height: 800px; */
  /* background-repeat: no-repeat; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-image: linear-gradient(
      to right bottom,
      hsla(12, 48%, 51%, 0.6),
      hsla(4, 41%, 18%, 0.82)
    ),
    url('timothy-dykes-woE5Fc1HF1o-unsplash.jpg'); */
  /* background-image: linear-gradient(
    to right bottom,
    var(--primary-600),
    var(--primary-800)
  ); */

  background-color: var(--primary-950);

  display: flex;
  align-items: center;
}

.hero > div {
  margin: 0 auto;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.hero-content {
  position: relative;
  display: block;
  margin: auto 0;
  max-width: 900px;
  /* z-index: 3; */
}

.hero-image img {
  /* border-radius: 12px; */
  width: 100%;
}

/* .hero-content::after {
  z-index: 1;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  content: '';
  width: 900px;
  height: 400px;
  border-radius: 9999px;
  background: radial-gradient(#08010169, transparent);
} */

.hero-text {
  /* text-align: center; */
  color: var(--yellow-100);
}

.hero-text > h2 {
  font-size: 64px;
}

.hero-text > p {
  color: var(--yellow-300);
  margin: 12px auto 0;
  /* max-width: 500px; */
  font-size: 24px;
}

.hero-buttons {
  display: flex;
  /* justify-content: center; */
}

.hero-buttons--btn,
.hero-buttons--btn:link,
.hero-buttons--btn:visited {
  text-decoration: none;
  background-color: var(--primary-300);
  color: var(--primary-700);
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s;

  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 9999px;
}
.hero-buttons--btn:active,
.hero-buttons--btn:hover {
  background-color: var(--primary-400);
  /* color: var(--primary-100); */
}

.section-featured {
  background-color: var(--grey-050);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 32px 0;
}

.section-featured > h4 {
  color: var(--grey-500);
  margin: 0 auto;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.section-featured--logos {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  height: 180px;
}

.section-featured--logos img {
  /* filter: brightness(0); */
  /* opacity: 50%; */
  height: 100%;
}

.about {
  /* background-color: var(--primary-100); */
  background-color: var(--primary-050);
  /* background-image: linear-gradient(
    to right bottom,
    var(--primary-100),
    var(--primary-200)
  ); */
}

.about-title {
  font-size: 64px;
  color: var(--primary-900);
  padding-top: 32px;
  text-align: center;
}

.about-element {
  padding: 64px 0;
}

.about-element-inside {
  /* max-width: 896px; */
  max-width: 1024px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  gap: 64px;
}

.about-element-inside-alone {
  max-width: 480px;
  margin: 0 auto;
}

.about-element-dark {
  background-color: var(--primary-800);
}

.about-content {
  display: flex;
  flex-direction: column;
  /* gap: 128px; */
}

.about-text-right {
  grid-column: 2 / -1;
}

.about-text h5 {
  color: var(--primary-700);
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 24px;
  text-align: center;
}

.about-text p {
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--grey-700);
}

.socials {
  padding: 64px 0;
  background-color: var(--primary-900);
}

.socials h3 {
  text-align: center;
  font-size: 64px;
  color: var(--yellow-300);
}

.socials-links {
  margin: 48px auto 0;
  max-width: 576px;
  display: flex;
  justify-content: center;
  gap: 64px;
}

.socials-links--link,
.socials-links--link:link,
.socials-links--link:visited {
  display: block;
  color: var(--yellow-600);
  /* background-color: var(--primary-700); */
  /* padding: 16px; */
  width: 96px;
  height: 96px;
  /* border-radius: 99999px; */

  transition: all 0.3s;
}
.socials-links--link:hover,
.socials-links--link:active {
  color: var(--yellow-500);
  /* background-color: var(--primary-800); */
}

.socials-links--link ion-icon {
  width: 100%;
  height: 100%;
}

.footer {
  padding: 32px;
  background-color: var(--primary-050);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
  max-width: 576px;
  margin: 0 auto;
}

.footer-contact > p {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 24px;
}

.footer-contact > div {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  gap: 12px;
}

.footer--copyright-section {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-600);
}

.footer-copyright-text {
  font-size: 14px;
  margin-top: auto;
}

.footer-contact a,
.footer-contact a:link,
.footer-contact a:visited {
  text-decoration: none;
  color: var(--grey-500);
}

.footer-contact a:hover,
.footer-contact a:active {
  color: var(--grey-700);
}