style.scss

/* Box sizing rules */
*,
*::before,
*::after {
 box-sizing: border-box;
}
/* Prevent font size inflation */
html {
 -moz-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
 margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
 list-style: none;
}
/* Set core body defaults */
body {
 min-height: 100vh;
 line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
 line-height: 1.1;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
 text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
 text-decoration-skip-ink: auto;
 color: currentColor;
}
/* Make images easier to work with */
img,
picture {
 max-width: 100%;
 display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
 font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
 min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
 scroll-margin-block: 5ex;
}

// My Custom CSS

body {
 font-family: sans-serif;
 background-color: hsl(0, 0%, 98%);
}
p {
 font-size: 18px;
}
img {
 max-width: 100%;
 height: auto;
 display: block;
}

// Navigation Section

header {
 padding: 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 @media (min-width: 768px) {
  padding: 1rem 2rem;
 }
}
.nav-logo {
 cursor: pointer;
}
.nav-panel {
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 0;
 right: 0;
 height: 100vh;
 width: 70%;
 background-color: hsl(0, 0%, 98%);
 z-index: 1;
 transform: translate(100%);
 transition: all 0.3s ease;
 @media (min-width: 768px) {
  display: initial;
  position: initial;
  transform: initial;
  transition: initial;
  background-color: transparent;
  height: auto;
  width: auto;
  flex-direction: row;
  flex: 1;
 }
}
.nav-overlay {
 visibility: hidden;
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: 100%;
 opacity: 0;
 background-color: rgba(0, 0, 0, 0.644);
 transition: visibility 0.3s linear, opacity 0.3s linear;
 @media (min-width: 768px) {
  display: none;
 }
}
.nav-list {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 @media (min-width: 768px) {
  flex-direction: row;
  gap: 1.5rem;
 }
}
.nav-link {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 width: 100%;
 list-style-type: none;
 color: hsl(0, 0%, 41%);
 cursor: pointer;
 a {
  text-decoration: none;
  color: hsl(0, 0%, 8%);
 }
 @media (min-width: 768px) {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;

  li {
   @media (min-width: 768px) and (max-width: 1000px) {
    flex: 0 0 28%;

    &:nth-child(3) {
     flex: 0 0 20%;
    }
   }
   @media (min-width: 1000px) {
    flex: 0 0 15%;
    &:nth-child(3) {
     flex: 0 0 12%;
    }
   }
  }
 }
}
.dropdown-1,
.dropdown-2 {
 @media (min-width: 768px) {
  position: relative;
 }
}
.dropdown-content-1,
.dropdown-content-2 {
 padding: 0.5rem 1.5rem 1.5rem 1.5rem;
 display: block;
 list-style-type: none;
 opacity: 0;
 transition: opacity 0.15s ease-in-out;
 li {
  margin-top: 0.5rem;
  img {
   display: inline-block;
   margin-right: 1rem;
  }
  &:hover {
   font-weight: bold;
  }
  &:active {
   transform: scale(0.9);
  }
 }
}
.dropdown-content-1 {
 display: none;
 @media (min-width: 768px) {
  display: block;
  visibility: hidden;
  position: absolute;
  top: 2.5rem;
  left: -5rem;
  border-radius: 5px;
  background-color: hsl(0, 0%, 98%);
  box-shadow: 1px 1px 30px 20px rgba(0, 0, 0, 0.055);
 }
}
.dropdown-content-2 {
 @extend .dropdown-content-1;
 left: -1rem;
 @media (min-width: 768px) {
  width: 145%;
 }
}
.nav-span {
 a {
  display: inline;
  margin-right: 0.3rem;
 }
 img {
  display: inline;
  cursor: pointer;
 }
}
.nav-button {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin: 1.5rem;
 color: hsl(0, 0%, 41%);

 .login-btn {
  border: none;
  background-color: transparent;
  font-weight: 500;
  cursor: pointer;
  &:active {
   font-weight: bold;
   font-size: 15px;
  }
 }
 .register-btn {
  border: none;
  color: hsl(0, 0%, 98%);
  padding: 10px 25px;
  border-radius: 0.8rem;
  background-color: hsl(0, 0%, 8%);
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:active {
   background-color: transparent;
   color: hsl(0, 0%, 8%);
   border: 1px solid hsl(0, 0%, 8%);
   padding: 9px 24px;
   transform: scale(0.95);
  }
 }
 @media (min-width: 768px) {
  flex-direction: row;
  margin-right: 0;
 }
}
.nav-menu {
 display: block;
 @media (min-width: 768px) {
  display: none;
 }
}
.nav-close {
 align-self: flex-end;
 padding: 1rem;
 @media (min-width: 768px) {
  display: none;
 }
}
.nav-open {
 transform: translateX(0);
}
.nav-unhide {
 visibility: visible;
 opacity: 1;
}
.nav-rotate {
 transform: rotate(180deg);
}
.nav-x {
 display: block;
 visibility: visible;
 opacity: 1;
}
.nav-active {
 font-weight: bold;
}

// Hero Section

.hero-section {
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 margin-top: 1rem;
 @media (min-width: 768px) {
  text-align: left;
  display: flex;
  flex-direction: row-reverse;
  max-width: 80%;
  margin: 3rem auto;
  gap: 5rem;
 }
}
.hero-mobile {
 display: block;
 @media (min-width: 768px) {
  display: none;
 }
}
.hero-desktop {
 display: none;
 @media (min-width: 768px) {
  display: flex;
  align-items: center;
  flex: 0 1 45%;
 }
}
.hero-content {
 display: flex;
 flex-direction: column;
 @media (min-width: 768px) {
  justify-content: space-between;
 }
}
.hero-intro {
 margin-top: 0.5rem;
 h1 {
  font-size: 2rem;
  color: hsl(0, 0%, 8%);
 }
 br {
  display: none;
 }
 p {
  font-size: 18px;
  color: hsl(0, 0%, 41%);
 }
 .hero-button {
  padding: 10px 24px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 8%);
  color: hsl(0, 0%, 98%);
  border: none;
  font-weight: 700;
  margin-top: 1.5rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
  &:active {
   background-color: transparent;
   border: 1px solid hsl(0, 0%, 8%);
   color: hsl(0, 0%, 8%);
  }
 }
 @media (min-width: 768px) {
  h1 {
   font-size: 3.5rem;
  }
  br {
   display: block;
  }
  p {
   margin: 3rem 0 1.5rem 0;
   max-width: 40ch;
  }
  .hero-button {
   align-self: flex-start;
  }
 }
}
.hero-list {
 display: flex;
 gap: 1rem;
 margin: 3rem 0.5rem;
 justify-content: space-between;
 align-items: center;
 .logo-wrap {
  flex: 0 1 20%;
 }
 @media (min-width: 768px) {
  margin: 3rem 0;
 }
}