*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}

a:link,
a:focus,
a:hover {
text-decoration: none;
}

a:hover {
cursor: pointer;
}

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

body {
animation: body-animation 2s ease;
animation-fill-mode: forwards;
animation-delay: 4s;
box-sizing: border-box;
color: #f5f6f4;
font-family: "Calibri", sans-serif;
font-size: 1.6rem;
line-height: 3rem;
padding: 0;
background-color: #000000e3
}

h1{
font-size: 5rem;
text-align: center;
font-family: serif;
}

.hero-button {
background-color: #0470f4;
color: #f5f6f4;
font-size: 1.5rem;
border-radius: 50%;
text-transform: uppercase;
text-decoration: none;
padding: 0.5rem 1.7rem;
transition: all .2s;
position: fixed;
border: none;
cursor: pointer;
margin: 5rem auto;
line-height: 4rem;
z-index: 100;
bottom: 0;
right: 10px;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
}

.hero-button.active {
pointer-events: auto;
opacity: 1;
}

::-webkit-scrollbar {
  display: none;
}
ul li {
padding: 1rem;
}

::selection {
background-color: #f5f6f4;
color: #cd384a;
}
    
            
.text-container {
padding: 6rem;
}
.row {
max-width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
}
    
.row .col-1-of-2 {
margin: 2rem;
width: calc(100% - 2 * 2rem);
display: flex;
justify-content: center;
}
.header {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-image: url("parallaxImg1.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.header h1 {
color: #f5f6f4;
font-size: 6rem;
text-align: center;
font-family: 'tenorite';
line-height: 7rem;
margin-bottom: 2rem;
}    
.header p {
color: #f5f6f4;
font-size: 2rem;
text-align: center;
line-height: 2.5rem;
font-style: Italic;
}
.section {
width: 100%;
padding: 5rem 0;
background: #00000003;
text-align: center;
}
    
.section p {
font-size: 1.8rem;
margin-bottom: 2rem;
color: #f5f6f4;
}
    
.footer {
width: 100%;
height: 40vh;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
color: #f5f6f4;
font-size: 1.6rem;
}
.navbar {
border-top: solid 8px #0470f4;
background-color: rgba(40, 35, 37, 0.2);
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: right;
z-index: 10000;
height: 7rem;
position: fixed;
}


.navbar ul li {
list-style: none;
display: inline-block;
margin: 0;
padding: 1.5rem 0;
}

.navbar ul li a,
.navbar ul li a:link,
.navbar ul li a:visited,.navbar ul li a:active,.navbar ul li a:focus {
text-transform: uppercase;
letter-spacing: .2rem;
font-weight: 500;
position: relative;
margin: 0 1.3rem;
padding: 4rem 0 1rem 0;
color: #f5f6f4;
}
.navbar ul li a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;bottom: 0;
left: 8;
background-color: #f5f6f4;
visibility: hidden;
transform: scalex(0);
transition: all 0.3s ease-in-out 0s
}

.navbar ul li a:hover:before {
visibility: visible;
transform: scaleX(1);
}