style.css

/* Import Google Font */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

/* ------------------- */
/* Reset               */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 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"],
li {
  list-style: none;
}

html,
body {
  height: 100vh;
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Root color variables */
:root {
  --Marine-blue: hsl(213, 96%, 18%);
  --Purplish-blue: hsl(243, 100%, 62%);
  --Pastel-blue: hsl(228, 100%, 84%);
  --Light-blue: hsl(206, 94%, 87%);
  --Strawberry-red: hsl(354, 84%, 57%);
  
  /* Neutral */
  --Cool-gray: hsl(231, 11%, 63%);
  --Light-gray: hsl(229, 24%, 87%);
  --Magnolia: hsl(217, 100%, 97%);
  --Alabaster: hsl(231, 100%, 99%);
  --White: hsl(0, 0%, 100%);
}

/* General body styling */
body {
  background-color: var(--Magnolia);
  color: var(--Marine-blue);
  line-height: 1.6;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

.content_wrapper {
  display: flex;
  background-color: var();
  /* flex-direction: row; */
  width: 100%;
  /* height: 100vh; */
}

/* Sidebar styling */
.sidebar {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  width: 100%;
  height: 100%;
  background-color: var(--White);
  padding: 20px;
}

/* Sidebar list styling */
.sidebar_lists {
  background: url(/assets/images/bg-sidebar-desktop.svg);
  width: 100%;
}

.sidebar_lists li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 15px;
  padding: 10px;
  color: var(--Magnolia);
  border: 1px solid var(--Cool-gray);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar_lists li:hover {
  background-color: var(--Pastel-blue);
}

/* Form wrapper styling */
.forms_wrapper {
  display: flex;
  /* flex: 3; */
  background-color: var(--White);
  padding: 20px;
  width: 100%;
  /* max-width: 600px; */
}

/* Button styling */
button {
  background-color: var(--Purplish-blue);
  color: var(--White);
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--Marine-blue);
}

/* Form styles */
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--Light-gray);
  border-radius: 4px;
}

/* Error message styling */
.error-message {
  color: var(--Strawberry-red);
  display: none; /* Hidden by default, shown via JavaScript if needed */
}

.hide {
  display: none;
}

/* Summary and additional styling */
.summary_list,
.summary_total {
  margin-bottom: 20px;
  padding: 10px;
  border-top: 1px solid var(--Cool-gray);
}

/* Additional styles as needed */