@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch&family=Cormorant+Garamond&display=swap");

@import "./utils.css";

@import "./modules/section.css";
@import "./modules/title-section.css";
@import "./modules/home-section.css";
@import "./modules/back-to-top.css";
@import "./modules/dropdown.css";

:root {
  /*emmerald color, fits good with the color of the details and if nice to look at too<3 */
  --color-background: #102122;
  --color-text: #ffffff;
  --color-detail: #ffaf52;
}

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

  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
}

::-webkit-scrollbar {
  width: 0.75rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-text);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--color-detail);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  color: var(--color-text);

  transition: background-color 0.3s ease-in-out;
}

main {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1rem;
  margin-block: 5rem;
}

@media screen and (min-width: 950px) {
  main {
    padding-inline: 2rem;
  }
}