@import url('https://fonts.googleapis.com/css2?family=Condiment&family=Sriracha&display=swap');

:root {
  --primary-color: #03426ecc   ;
  --secondary-color: #d7a40a ;
  --accent1-color: #8a08d0c9;
  --accent2-color: rgb(97, 7, 232);

  /* change the values below to your chosen font(s) */
  --heading-font: "Condiment";
  --paragraph-font: Sriracha;


  /* these colors below should be chosen from among your palette colors above */
  --headline-color-on-white: #396E94;  /* headlines on a white background */ 
  --headline-color-on-color: white; /* headlines on a colored background */ 
  --paragraph-color-on-white: #396E94; /* paragraph text on a white background */ 
  --paragraph-color-on-color: white; /* paragraph text on a colored background */ 
  --paragraph-background-color: #396E94  ;
  --nav-link-color: #396E94;
  --nav-background-color: #D4AC0D;
  --nav-hover-link-color: white;
  --nav-hover-background-color: #396E94;
}

html{
    text-align: center;
}

#navbar-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    background-color: #d7a40a;
}

#logo{
    grid-column: 1 / 2;
    grid-row: 1 / 2
}

#navbar{
    padding-top: 7px;
    grid-column: 2 / 3;
    justify-self: right;
    line-height: 3em;
    text-align: center;
    font-size: 1.6em;
}

nav a {
    min-width: 120px;
    text-decoration: none;
    padding: 30px;

    font-family: var(--heading-font)
  }

nav a:hover {
    color: var(--nav-hover-link-color);
    background-color: var(--nav-hover-background-color);
  }

p{
    color: var(--primary-color);
    font-family: var(--paragraph-font);
}

h1, h2{
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-size: 35px;
}

#dinoMatchup-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

#sarcoPic{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-self: center;
    column-gap: 0px;
    border-radius: 20px;
    border: 5px solid var(--accent1-color);
}

#mosaPic{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: center;
    column-gap: 0px;
    border-radius: 20px;
    border: 5px solid var(--accent1-color);
}

#dinoText-container{
    display: grid;
    grid-template-columns: 1fr, 1fr;
    grid-template-rows: 1fr, 1fr 1fr;
    column-gap: 20px;
}

#sarcoHeader{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: end;
    margin-bottom: 0px;
}

#mosaHeader{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    margin-bottom: 0px;
}

#sarcoText{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    border-radius: 20px;
    border: 3px solid var(--accent1-color);
    margin-top: 0px;
}

#mosaText{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    border-radius: 20px;
    border: 3px solid var(--accent1-color);
    margin-top: 0px;
}

#foughtText{
    grid-column: 1 / 3;
}

#fought-container{
    border-radius: 20px;
    border: 3px solid var(--accent1-color);
}

hr{
    height: 2px;
    background-color: var(--accent1-color);
}
     
/* #fought-container{
    grid-column: 1 / 3;
} */