@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-width: 950px;
}

body {
  font-family: 'Lexend Deca', sans-serif;
}
  .nav-bar {
    display: flex; 
    justify-content: center;
    width: fit-content;
    margin: auto;
    background-color: #253131;
    border-radius: 2.187rem;
    position: relative;
    top: 1rem;
  }
    
  .top {
  height: 31rem;
  background-image: url(https://lily-rierson.neocities.org/p1/images/rice-field.jpg); /*Tristan Rodriguez*/
  background-size: cover;
  background-position: left top;
  }


  .l-end, .l-end:link, .l-end:visited{
    border-radius: 2.187em 0px 0px 2.187em;
    font-size: 1.25rem;
    color: #72FFAA;
    font-weight: 400;
    text-decoration: none;
    background-color: #253131;
    padding: .6875em 2.187em;
    border: solid transparent;
    transition: 300ms all;
  }
    
  .middle, .middle:link, .middle:visited {
    font-size: 1.25rem;
    color: #72FFAA;
    font-weight: 400;
    text-decoration: none;
    background-color: #253131;
    padding: .6875em 2.187em;
    border: solid transparent;
    transition: 300ms all;
  }
  
  .r-end, .r-end:link, .r-end:visited{
    border-radius: 0em 2.187em 2.187em 0em;
    font-size: 1.25rem;
    color: #72FFAA;
    font-weight: 400;
    text-decoration: none;
    background-color: #253131;
    padding: .6875em 2.187em;
    border: solid transparent;
    transition: 300ms all;
  }
  
  
  .bar-element:hover, .bar-element:active {
    color: #253131;
    border-radius: 2.187em;
    background-color: #72FFAA;
  }
  
  h1 {
   font-size: clamp(6rem, 2.5437rem + 6.2136vw, 10rem);
   color: #72FFAA;
   font-weight: 800;
   text-align: center;
   max-width: 71.25rem;
   margin: auto;
   align-items: center;
 }
 
 h2 {
   font-size: 2rem;
   font-weight: 700;
   max-width: 12rem;
   margin-top: 10px;
 }
 
 .text-jambalaya {
   color: #FF7272;
 }
 
 .text-baiao-de-dois {
   color: #72D5FF;
 }
 
 .text-fried-rice {
   color: #FFA872;
 }
 
 .text-jollof {
   color: #FF85FB;
 }
 
 h3 {
   font-size: 1.2rem;
   max-width: 11.25rem;
   font-weight: 300;
   margin-right: 10px;
 }
 
 main img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .8em .8em .8em .8em;
    height: 100%;
 }
 
 .card-container {
   display: flex;
   justify-content: center;
   gap: 1.6875rem;
   padding: 27px 27px 27px 27px;
   flex-wrap: wrap;
 }
 
 main a {
   column-count: 2;
   column-gap: 1rem;
 }
 
 .card1, .card1:link, .card1:visited {
   border: solid 3px #FF7272;
   border-radius: 1rem;
   transition: 250ms all;
 }
 
 .card2, .card2:link, .card2:visited{
   border: solid 3px #72D5FF;
   border-radius: 1rem;
   transition: 250ms all;
 }
 
 .card3, .card3:link, .card3:visited {
   border: solid 3px #FFA872;
   border-radius: 1rem;
   transition: 250ms all;
 }
 
 .card4, .card4:link, .card4:visited {
   border: solid 3px #FF85FB;
   border-radius: 1rem;
   transition: 250ms all;
 }
 
 main {
   background-color: #111818;
 }
 
 .all-cards {
   max-width: 440px;
 }
 
 a {
   text-decoration: none;
 }
 
 .card1:hover, .card1:active {
   box-shadow: 0 0 10px 7px #FF7272;
 }
 
 .card2:hover, .card2:active {
   box-shadow: 0 0 10px 7px #72D5FF;
 }
 
 .card3:hover, .card3:active {
   box-shadow: 0 0 10px 7px #FFA872;
 }
 
 .card4:hover, .card4:active {
   box-shadow: 0 0 10px 7px #FF85FB;
 }
 
 .globe {
   display: block;
   margin: auto;
   width: 75%;
 }
 
 footer {
   background-color: #111818;
 }
 
 p {
   column-count: 2;
   column-gap: 2rem;
   color: #72FFAA;
   padding: 27px 27px 50px 27px;
   text-align: justify;
   font-weight: 200;
   font-size: 2rem;
 }
 
 @media (max-width: 70rem)
{
    p {
      column-count: 1;
    }
}