/* FONTS */

@font-face{
  font-family: "anta";
  src: url("../fonts/Anta/Anta-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face{
  font-family: "BarlowCondensed-Bold";
  src: url("../fonts/barlow condensed/BarlowCondensed-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face{
  font-family: "BarlowCondensed-Light";
  src: url("../fonts/barlow condensed/BarlowCondensed-Light.ttf") format("truetype");
  font-display: swap;
}

body{
  margin: 20px;
  background: #16232A;
}

#edt{
  color: white;
  text-align: center;
  font-family: BarlowCondensed-Bold;
  font-size: 45px;
}

hr{
  color: white;
}
#hdr{
  display: flex;
  flex-direction: column;;
  align-items: center;
}

#hdr h1{
  font-family: anta;
  margin: 0;
  color: #E4EEF0;
}

#hdr p{
  font-family: BarlowCondensed-Bold;
  color: #E4EEF0;
}

#mbox{
  display: grid;
  justify-content: center;
  border: 2px solid blue;
  background: floralwhite;
  border-radius: 12px;
  grid-template-columns: 250px 250px 250px;
  grid-template-columns: 250px 250px 250px;
  grid-gap: 40px;
  margin: 20px;
  padding: 20px;
}

.box{
  width: 250px;
  height: 250px;
  color: #16232A;
  border: 2px solid blue;
  border-radius: 25px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box img{
  width: 200px;
  
}

.box hr{
  width: 100%;
}

.box h3{
  font-family: BarlowCondensed-Bold;
}