@import url("../font/bricolage-grotesque/font.css");

:root {
    --color-primary: #807967;
    --color-secondary: #5C5847;
    --color-tertiary: #EFEDEA;
    /* This is a variable */
}

* {
    padding: 0;
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    /* This uses the variable */
}

body {
    color: var(--color-primary);
    background-color: var(--color-tertiary);
    /* moved color primary to body rather than wildcard (*) */
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--color-primary);
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: var(--color-tertiary);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: var(--color-secondary);
}

a {
    color: #6276A3;
    text-decoration: none;
}



.wrap {
    /* div class="wrap" which is around all content on the whole page */

    width: 100%;
    /* span whole width of the page */

    /*  height:100vh; if you wanted it to be the full screen height was well, use 100vh. (not useful here but good to know)*/


    display: flex;
    /* enables flexbox, which lets you... */

    justify-content: center;
    /* ...make everything inside the <div class="wrap"> go to the center of it */

    /* align-items: center; if you did the height thing from before, this will center it on the page vertically */
}

.content {
    /* <div class="content"> which is directly inside the <div class="wrap"> */

    width: 640px;
    /* 640px is a pretty good width no requirement to use it obviously */
}

.center {
    width: 100%;
    display: flex;
    justify-content: center;
    /* with this, you can put anything in a <div class="center"></div> and it'll be centered in whatever its inside */
    /* see the index.html, i did it with the image */
    /* also its the EXACT same css as .wrap but it's whatever */
}

marquee {
    border-top: solid 1px var(--color-primary);
    border-bottom: solid 1px var(--color-primary);
    padding: 6px 0;
    font-size: 18px;
    font-weight: 600;
}