.title {
  font-family: DigiBop;
background-image: url("https://64.media.tumblr.com/53c150a227ddcde4594fe65c54c009d7/fd75870c69147eae-67/s540x810/27604414e7ec6f144196ae64cc196b75aec6cc8f.gif");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 10em;
font-weight:bold;
width:fit-content;
margin:0 auto; /* this is to center, if needed */
/* add below if you want an outline, if not remove */
filter: drop-shadow(10px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}


.container1 {
  display: grid;
  justify-content: center;
  grid-template-columns: 750px;
  padding: 5px;
  gap: 5px;
  height: 575px;
  grid-template-areas:
    "grid-box flags";
    
}

.northAmerica {
  background-color: #E0CDA4;
  border: 20px solid;
  border-image: url(/borders/frame1.png) 18 round; 
  margin: 5px;
  box-sizing: border-box
}

.northAmericaFlags {
  justify-content: center;
  border: 1px solid black;
  background-color: #000;
  padding: 5px;
  gap: 5px;
  height: 200px;
  left: 200px;

}


.container2 {
  display: grid;
  justify-content: center;
  grid-template-columns: 750px;
  padding: 5px;
  gap: 5px;
  height: 575px;
   grid-template-areas:
    "grid-box flags";
}

.europe {
  background-color: #E0CDA4;
  border: 20px solid;
  border-image: url(/borders/frame1.png) 18 round; 
  margin: 5px;
  }

.europeFlags {
  border: 50px solid black;
  height: 200px;
  left: 200px;
  z-index: 99;

}


.container3 {
  display: grid;
  justify-content: center;
  grid-template-columns: 750px;
  padding: 5px;
  gap: 5px;
  height: 575px;
   grid-template-areas:
    "grid-box flags";
}

.container4 {
  display: grid;
  justify-content: center;
  grid-template-columns: 750px;
  padding: 5px;
  gap: 5px;
  height: 475px;
   grid-template-areas:
    "grid-box flags";
}


.world {
  background-color: #E0CDA4;
  border: 20px solid;
  border-image: url(/borders/frame1.png) 18 round; 
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  }

.asia {
  background-color: #E0CDA4;
  border: 20px solid;
  border-image: url(/borders/frame1.png) 18 round; 
  margin: 5px;
  }

.asiaFlags {
  border: 1px solid black;
   grid-area: content;
  justify-content: right;
  grid-template-columns: 750px;
  padding: 5px;
  gap: 5px;
  height: 200px;
  left: 200px;
  z-index: 99;

}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #000003;
     display: flex;
  justify-content: center;
  align-items: center;
}

/* Style the buttons inside the tab */
.tab button {
    display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: 2000px;
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}
</style>
</head>
<body>

























.irelandFlag {
margin-left: auto;
  margin-right: auto;
   height: auto;
  display: block;
  position: relative;
  top: -490px;
  left: -70px;
  z-index: 2;
  width: 5%;
  background-size:cover;
}

.unitedkingdomFlag {
margin-left: auto;
  margin-right: auto;
   height: auto;
  display: block;
  position: relative;
  top: -515px;
  left: -15px;
  z-index: 2;
  width: 5%;
  background-size:cover;
}

.netherlandsFlag {
margin-left: auto;
  margin-right: auto;
   height: auto;
  display: block;
  position: relative;
  top: -515px;
  left: -15px;
  z-index: 2;
  width: 5%;
  background-size:cover;
}


.usaFlag {
margin-left: auto;
  margin-right: auto;
   height: auto;
  display: block;
  position: relative;
  top: -600px;
  left: -250px;
  z-index: 2;
  width: 5%;
  background-size:cover;
  background-position: center; /* or center */
}


.belgiumFlag {
margin-left: auto;
  margin-right: auto;
   height: auto;
  display: block;
  position: relative;
  top: -515px;
  left: -15px;
  z-index: 2;
  width: 5%;
  background-size:cover;
}