@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

body{
    background-color: rgb(241, 238, 238);
    color: black;
    cursor: url("cursor.ico"), default;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Jersey 10', sans-serif;
    cursor: url("cursor.ico"), default;
    font-size: 3vw;
    text-align: center;
    overflow-y:auto;
    overflow-x: hidden;
}

body a:hover{
    cursor: url("pointer.ico"), pointer;
}

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: rgb(189, 162, 162);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(160, 68, 68);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(173, 72, 72); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

.content{
    color: black;
}

/* Navbar styles */
.navbar{
    background-color: rgba(0, 0, 0, 0.677);
    position: static;
    height: 9vw;
    box-shadow: rgba(0, 0, 0, 0.695) 0px 30px 50px;
}

.nav-items{
    font-size:3vw;
    text-align: center;
    position: absolute;
    top: 3.1vw;
    left: 52%;
    color: rgb(0, 0, 0);
}

.nav-logotext{
    font-size:5vw;
    text-align: center;
    position: absolute;
    top: 2vw;
    left: 10%;
    color: rgb(255, 255, 255);
}

.nav-logotext-img{
    border-radius: 10px;
    width: 5vw;
    height: 5vw;
    position: absolute;
    left: -6vw;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}


.nav-items a{
  position: relative;
  border-radius: 10px;
  background: repeating-linear-gradient(
  180deg,
  #00000015,
  #00000015 3px,
  transparent 6px,
  transparent 15px
  );
  background-size: 100% 10px;
  padding: 1vw 2vw;
  border-inline: 10px;
  transition: background 0.5s, color 0.5s, background-position 0.5s, box-shadow 0.5s, border-color 0.3s;
  box-shadow: 0px 10px 0px #354047;
}

.nav-items a:link{
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: background 0.5s, color 0.5s, background-position 0.5s, box-shadow 0.5s, border-color 0.3s;
}

.nav-items a:visited{
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: background 0.5s, color 0.5s, background-position 0.5s, box-shadow 0.5s, border-color 0.3s;
}

.nav-items a:hover{
  text-decoration: none;
  cursor: url("pointer.ico"), pointer;
  box-shadow: 10px 15px 0px #354047, inset 0px 0px 0px 5px rgb(255, 255, 255);
  border-color: #ffffff;
  transition: background 0.5s, color 0.5s, background-position 0.5s, box-shadow 0.2s, border-color 0.3s;
}

.nav-items .active-site{
  box-shadow: 10px 15px 0px #354047, inset 0px 0px 0px 5px rgb(255, 255, 255);
  border-color: #ffffff;
}

/* Hero section styles */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.317), rgba(33, 22, 22, 0.5)), url("https://i.redd.it/l0cxejlvv3je1.jpeg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    font-size:3vw;
    text-align: center;
    position: absolute;
    top: 53%;
    line-height: 0.2;
    left: 30%;
    transform: translate(-50%, -50%);
    color: rgb(250, 246, 246);
}

.hero-image-img{
    width: 50vw;
    height: 25vw;
    position:absolute;
    left: 50%;
    top: 35%;
    transition: all 0.5s ease;
}

.hero-image-img:hover{
    width: 50vw;
    height: 25vw;
    top: 33%;
    cursor: url("pointer.ico"), pointer;
}

.hero-text h1{
    font-weight: normal;
    font-size: 7vw;
}

/* content text*/
.content{
  margin-right: 10vw;
  margin-left: 10vw;
}

.content h2{
  color:#b30000;
}

.content h1{
  font-size:6vw;
  color:#7a3131;
}

.content p{
  font-size: 2.5vw;
  position: relative;
  bottom: 4vw;
}

/* Footer styles */
footer{
    position:relative;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    background-color: brown;
    height: 28%;
    font-size: 2vw;
    line-height: 6.5vw;   
}

.footer-text p{
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 2vw;
  color:rgb(211, 211, 211);
  font-size:2.2vw;
}

.footer-text{
    font-size: 2.5vw;
    text-align: center;
    vertical-align: middle; 
    position: relative;
    top:1vw;
}