@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  src: url("../fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf");
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PT_Serif/PTSerif-Regular.ttf");
}

@font-face {
  font-family: "PT Serif";
  font-style: italic;
  src: url("../fonts/PT_Serif/PTSerif-Italic.ttf");
}

@font-face {
  font-family: "PT Serif";
  font-weight: bold;
  src: url("../fonts/PT_Serif/PTSerif-Bold.ttf");
}

@font-face {
  font-family: "PT Serif";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/PT_Serif/PTSerif-BoldItalic.ttf");
}

:root {
  --color: var(--black);
  --background-color: var(--white);

  --white: rgb(250, 250, 250);
  --black: rgb(10, 10, 10);
  --dark-dark-grey: rgb(60, 60, 60);
  --grey: rgb(98, 98, 98);
  --light-light-grey: rgb(239, 239, 239);

  --0-primary: var(--black);
  --0-secondary: var(--white);
  --1-primary: #255957;
  --1-secondary: #cbf1ce;
  --1-complement: #E6DC8C;
  --2-primary: #274472;
  --2-secondary: #d7e7ed;
  --2-complement: #f4dbba;
  --3-primary: #722410;
  --3-secondary: #f4b6b0;
  --3-complement: #f4f3b2;
  --4-primary: #693a01;
  --4-secondary: #ffe8c0;
  --4-complement: #fff5c5;
  --5-primary: #69418b;
  --5-secondary: #f8eeff;
  --5-complement: #fdf2ba;
  --6-primary: #2d590c;
  --6-secondary: #c7e4b1;
  --6-complement: #f8f1ae;
  --7-primary: #1d7a92;
  --7-secondary: #9bdaeb;
  --7-complement: #fdf2ba;
  --8-primary: #866225;
  --8-secondary: #f1d19a;
  --8-complement: #fffbb6;
  --9-primary: #861a51;
  --9-secondary: #fdc5e1;
  --9-complement: #faf7c6;
}

.subscribe {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  #logo {
    width: 60vw;
    @media only screen and (min-width: 600px) {
      width: 40vw;
    }
    @media only screen and (min-width: 600px) {
      width: 20vw;
    }
    padding: 5%;
  }

  #text {
    width: 35vw;
    @media only screen and (min-width: 600px) {
      width: 50vw;
    }
    @media only screen and (min-width: 600px) {
      width: 60vw;
    }
    margin-left: 30px;

    h2, p {
      font-family: "PT Serif", "Georgia", serif;
    }
  }

  .replaceLogo {
    width: 100%;
  }

  button {
    background-color: var(--black);
    transition: opacity 300ms, background-color 300ms;
    border: none;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    color: var(--white);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }

  button:hover {
    cursor: pointer;
    opacity: .8;
  }
}

::-webkit-scrollbar {
  display: none;
}

.team {
  padding: 2vw 3vw;
  font-family: "DM Sans", sans-serif;
  line-height: 1.7;

  p {
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
  }
}