I'm trying to create an effect where two titles overlap each other, with the white title appearing as a border around the black title. However, I'm having trouble figuring out how to achieve this. The light grey box represents the enclosing div.
https://i.sstatic.net/RjXQU.jpg
Files:
body {
background-image: url("indexbg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1.titleTATF {
text-align: center;
font-family: "coalition";
font-size: 100px;
color: black;
}
h1.shadowTATF {
text-align: center;
font-family: "coalition";
font-size: 104px;
color: white;
}
div.wrapper {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(100, 100, 100, 0.25);
width: 90%;
text-align: center;
}
@font-face {
font-family: coalition;
src: url(Coalition.tff);
}<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="tabicon.png">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="wrapper">
<h1 class="shadowTATF">TATF</h1>
<h1 class="titleTATF">TATF</h1>
</div>
</body>
</html>