html {
    -webkit-transform: translate3d(0, 0, 0);
}

:root {
    --blue: #1F75FE;
    --blue-hover: #00B9FB;
    --bg: rgb(10 10 10 / 0.6);
    --shadow: 0 2px 2px rgb(0 0 0 / 0.5);
    --blur: blur(3px);
}

body {
    font-size: 1.2rem;
    font-family: "Poppins", sans-serif;
}

.main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.main {
    position: relative;
    min-height: 100vh;
}
.main p {
    position: relative;
    margin-top: -5px;
}

.main h1,
.main h4 {
    text-shadow: var(--shadow);
}

.main h1 {
    font-size: 4rem;
}

.main h4 {
    font-size: 1.6rem
}

.main a {
    color: white;
    background-color: var(--blue);
    box-shadow: var(--shadow);
}

.main a:hover {
    background-color: var(--blue-hover);
}