Need some help with HTML and CSS for my website

HTML-CSS
1

I got the effect I wanted with my HTML and CSS, before the letter font was working fine. But now it became standard letter type and I cant switch it. I have no idea why and I hoped you guys could help me out! And how can I set any other letter font, where do I find them?

The website is https://webmash.nl/csstest/

HTML:

Website

CSS:
/* Base */
@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,700’);
body {
font-family: ‘Montserrat’, sans-serif;
background: #000000;
position: relative;
padding: 0vw;
min-height: 100vh;
}

h1 {
position: relative;
width: 500px;
height: 100px;
top: 120px;
left: -50px;
}

h1 {
font-size: 7vw;
}

/* Mask */
.fo-mask2 {
display: inline-block;
overflow: hidden;
clear: both;
}

.fo-mask2 span {
color: transparent;
-webkit-animation: show 1s forwards 2s;
animation: show 1s forwards 0.9s;
}

.fo-mask2:after {
content: ‘’;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
-webkit-transform: translate3d(110%, 0, 0);
transform: translate3d(110%, 0, 0);
-webkit-animation: left-to-right 1.3s cubic-bezier(.17,.67,.83,.67);
animation: left-to-right 1.3s cubic-bezier(.17,.67,.83,.67);
}

/* Show animation */
@-webkit-keyframes show {
0% {
color: transparent;
}
100% {
color: white;
}
}
@keyframes show {
0% {
color: transparent;
}
100% {
color: white;
}
}

/* Left-to-right animation */
@-webkit-keyframes left-to-right {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(110%, 0, 0);
}
}
@keyframes left-to-right {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(110%, 0, 0);
}
}

/* Delay */
.delay-250.fo-mask2 span {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}

.delay-250.fo-mask2:after {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}

2

It is being overwritten by the theme.

  1. You have declared the body selector twice
/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8afc983 */
/* Base */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
  font-family: 'Montserrat', sans-serif;
  background: position: relative;
  padding: 1vw;
  min-height: 60vh;
}

/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-17d54bb */
/* Base */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
  font-family: 'Montserrat', sans-serif;
  background: position: relative;
  padding: 0vw;
  min-height: 60vh;
}
  1. You have an invalid CSS property value.

Invalid:
background: position: relative;

Valid:

background: black; /* or whatever */
position: relative;
  1. You can use !important to overwrite the theme settings if there isn’t a better option for the theme, which there might be.
body {
  font-family: 'Montserrat', sans-serif !important;
}

oceanwp: Fonts Search
https://docs.oceanwp.org/search?collectionId=56d89d519033600eafd436e4&query=Fonts

3

even without improving your html and css, that website is amazing!!

4

Thank you super much dude, it’s finished!

5

Thank you very much!!