@font-face {
    font-family: "tapetura-regular";
    src: url("tapetura-regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: red;
}
/* i dont know how to make this not scroll, but lett eh boxed scroll */
h1 {
    font-family: "tapetura-regular";
    font-size: 152px;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: white;
    font-weight: normal;
    left: 0;
    line-height: 90%;
    margin-top: -200px;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 100%;
}
 /* i dont know how to make this paragraph centered on the page */      
.tagline{
color: #FFF;
position: fixed;
margin: auto;
text-align: center;
font-family: "tapetura-regular";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: 44px;
margin-top: 550px;
width: 75vw;
left: calc(50% - 75vw / 2);
}

/* i dont know how to put a picture into these boxes */
.box1{
    width:20vw;
    height:18vw;
    position:absolute;
    left: 100px;
    top: 20px;
}
.special-text {
  top: -22vw;
    position: relative;
    text-align: center;
    opacity: 0;
    font-family: "tapetura-regular";
    color: white;
    font-size: 5.5vw;
    line-height: 90%;
}

.box1 img {
    width: 100%;
}
.box1:hover .special-text {
    opacity: 1;
}

.box1:hover img {
    filter: blur(5px);
}


.box2{
    width:20vw;
    height:18vw;
    position:absolute;
    right: 60px;
    top: 500px;
}
.box2 img {
    width: 100%;
}
.box2:hover .special-text {
    opacity: 1;
}

.box2:hover img {
    filter: blur(5px);
}

.box3{
    background-color:rgb(183, 183, 183);
    width:20vw;
    height:17vw;
    position:absolute;
    right: 800px;
    top: 1150px;
}
.box3 img {
    width: 100%;
}
.box3:hover .special-text {
    opacity: 1;
}

.box3:hover img {
    filter: blur(5px);
}