@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Mono+One&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: Poppins;   
}

input {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
}

button {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none; 
}

body::before {
            content: "";
            position: fixed; /* Make it fixed to the viewport */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('assets/map.png');
            background-size: cover; /* Cover the entire page */
            background-repeat: no-repeat; /* Prevent the image from repeating */
            background-position: center; /* Center the background image */
            opacity: 0.25; /* Adjust the opacity */
            z-index: -1; /* Place it behind the content */
        }

.minecraft::before {
            content: "";
            position: fixed; /* Make it fixed to the viewport */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('assets/minecraft-map2.png');
            background-size: cover; /* Cover the entire page */
            background-repeat: no-repeat; /* Prevent the image from repeating */
            background-position: center; /* Center the background image */
            opacity: 0.1; /* Adjust the opacity */
            z-index: -1; /* Place it behind the content */
        }

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

.nav {
    background: #ffffff;
    width: 100%;
}

.nav-items {
    padding: 0.625rem 1.563rem;
    display: flex;
    flex-direction: row;
    width: auto;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
}

.page-title {
    font-family: Poppins;
    font-size: 1.125rem;
    font-weight: 500;
    transition: 0.3s;
}

.page-title:hover {
    color: #FF5252;
}

.primary-button {
    font-family: Poppins;
    font-size: 0.875rem;
    color: #ffffff;
    background-color: #FF5252;
    padding: 0.375rem 1.563rem;
    border: 0;
    border-radius: 0.313rem;
    transition: 0.3s;
}

.primary-button:hover {
    cursor: pointer;
    color: #d63f2f;
    background-color: #FF9F9F;
}

.hero {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 1100px;
    margin: 250px auto;
    align-items: center;
}

.hero.minecraft{
    margin: 50px auto;
    gap: 25px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
}

.header.minecraft {
    margin-bottom: 10px;
}

.services-links {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    max-width: 90%;
    justify-content: center;
}

.content {
    max-width: 90%;
    justify-content: center;
}

.services-links .border-radius {
    border-radius: 15%;
}

.hero-title {
    font-family: Rubik Mono One;
    font-size: 5rem;
    letter-spacing: -0.375rem;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .hero-title {
        font-size: 3rem;
    }
    .hero {
        margin: 100px auto;
    }
    .header.minecraft {
        font-size: 3rem;
    }
    .content {
        max-width: 90%;
        justify-content: center;
    }
}

.site-url {
    font-family: Rubik;
    font-size: 1.125rem;
    letter-spacing: 0.125rem;
    color: #8D8D8D;
    transition: 0.3s;
}

.site-url:hover {
    color: #FF5252;
}

.site-url-special {
    color: #FF5252;
}

.input-field-copy {
   font-family: Poppins;
   font-size: 1rem;
   text-align: center;
   border: 1px solid #C8C8C8;
   border-radius: 0.313rem 0rem 0rem 0.313rem;
   padding: 0.313rem 0rem;
}

.button-copy {
    color: #FFFFFF;
    background-color: #FF5252;
    font-size: 1.25rem;
    width: 40px;
    height: 33px;
    justify-content: center;
    align-items: center;
    border-radius: 0rem 0.313rem 0.313rem 0rem;
    transition: 0.3s;
}

.button-copy:hover {
    cursor: pointer;
    color: #d63f2f;
    background-color: #FF9F9F;
}



.tooltip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }