:root {
  --primary-color: #9CB69E;
  --secondary-color: #1a1a1a;
  --accent-color-one: #c0c0c0;
  --accent-color-two: #F2EFE4;
  --extra-color: #6D828F;
  --extra-two: #1f3f49;
}

/* fonts */

.oswald-bold {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.oswald-regular {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.montserrat-regular {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* main items */

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;  
    font-size:14px; 
    background-color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:14px;
  padding:0;
  margin:0;
}

.primary-color {
  color: var(--primary-color);
}
.secondary-color {
  color: var(--secondary-color);
}
.accent-color-one {
  color: var(--accent-color-one);
}
.accent-color-two {
  color: var(--accent-color-two);
}
.extra-color {
  color: var(--extra-color);
}
.extra-two {
  color: var(--extra-two);
}

/* header */
header {
    display: grid;
    grid-template-columns:1fr 2fr 1fr;
    border-bottom:1px solid var(--secondary-color);
    background-color: var(--primary-color);
}
header a:link, header a:visited, header a:hover, header a:active, header a:focus {
    color:var(--extra-two);
    text-decoration: none;
    display: inline-block;
    box-sizing: content-box;
    width:auto;
}
header a:hover {
    color:var(--secondary-color);
}
.logo {
    width:50px;
}
.logo-holder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin:10px auto 10px;
    color: black;
}
.logo-holder h1 {
    display: inline-block;
    text-transform: uppercase;
    font-size: 2em;
}
nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap:5px;
    padding-left:15px;
    text-align: center;
}
nav a {
    max-width: 100px;
}
.icons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    place-items: center;
    padding-right:15px;
}

/* Rings page */

main#spoons {
    width:66%;
    margin:20px auto;
}
#spoons h2 {
    font-size:2.5em;
    margin-bottom:1.5em;
    color: var(--extra-two);
}
.products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    column-gap:100px;
    row-gap:50px;
    padding:0 100px;

}
.products > * {
    max-width: 300px;
}
.products img {
  width: 300px;          
  height: 300px;        
  object-fit: cover;    
  display: block;       
  border-radius: 4px;   
}
.products div {
    text-align: center;
}
.price {
    color:var(--extra-color);
    font-size:1.3em;
    background-color: var(--accent-color-one); 
    display: inline-block;  
    margin:13px auto;
    text-align: center;
    padding:3px 15px;
}


/* Home page collection */
.collection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
}

.collection img {
  width: 100%;          
  height: 350px;    
  display: block;    
}

.shopnew {
    color: var(--accent-color-two);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-align: center;
    background-color: var(--extra-color);
    position: absolute;
    font-size: x-large;
    padding:3px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;

}

.shopnew:hover {
    background-color: var(--secondary-color);
    color: var(--accent-color-two);
    text-decoration: none;
    
}

.divider {
    border: none;
    border-top: 6px double var(--secondary-color);
    margin-bottom: 50px;

}

/* individual collections */

.browse {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    
    gap: 15px;
    margin-bottom: 100px;
    margin-left: 15px;
    margin-right: 15px;

}

.seaglass {
    color: var(--accent-color-two);
    font-family: "Montserrat", sans-serif;

    text-align: center;
    background-color: var(--extra-two);
    font-size: x-large;
    padding:3px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.seaglass a {
    color: var(--accent-color-two)
}

.spoon a {
    color: var(--accent-color-two)
}

.other a{
    color: var(--accent-color-two)
}


.spoon {
    color: var(--accent-color-two);
    font-family: "Montserrat", sans-serif;

    text-align: center;
    background-color: var(--extra-two);
    font-size: x-large;
    padding:3px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.other {
    color: var(--accent-color-two);
    font-family: "Montserrat", sans-serif;

    text-align: center;
    
    background-color: var(--extra-two);
    font-size: x-large;
    padding:3px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}



/* footer */
.footer-content {
    background-color: var(--secondary-color);
    color: var(--accent-color-two);
    text-align: center;
    padding:20px 0;
    font-size:0.9em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-content a:link, header a:visited, header a:hover, header a:active, header a:focus {
    color: var(--accent-color-two);

}
.footer-section-links  {
    font-family: "Montserrat", sans-serif;
    color: var(--accent-color-two);
}

.about {

    margin-left: 5px;
}