@import url('https://fonts.googleapis.com/css2?family=Hind&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#regbutton{
    position: relative;
    z-index: 2;
    
}
/* Style the video: 100% width and height to cover the entire window */
#heldervideo {
    object-fit: cover;
    background-size: cover;
    width:100%;
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0;
   
  }
  @media all and (max-width: 649px) {
    #heldervideo {
    object-fit: cover;
    background-size: cover;
    background-position: center;
    width:100%;
    height: 100%; 
    top: 0; 
    left: 0;
    }
}
    .background{
        background: url(vids/Heldervid.mp4);
        background-position: center;
        object-fit: cover;
        background-size: cover;
        color:black;
    }


@font-face {
    font-family: "MADE TOMMY";
    src:
      local("MADE TOMMY"),
      url("BebasNeue-Regular.ttf") format("opentype");
  }
header{
    font-family: 'MADE TOMMY';
    src:
    local("MADE TOMMY"),
    url("BebasNeue-Regular.ttf") format("opentype");
}

nav{
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.concept{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index:-100;
}
.logo{
    font-size: 2em;
    letter-spacing: 2px;
}
.menu a{
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
}

.menu a:hover{
   border: 1px solid black;
   background: transparent;
}
.register a{
    text-decoration: none;
    background: black;
    color: #fff;
    align-items: left;
    padding: 10px 20px;
    font-size: 20px;
    background: black;
    transition: 0.4s;
    z-index: 2;
}
.register a:hover{
    border: 1px solid black;
    background: transparent;
}
#imagelogo{
   max-width: 90%;
}
.h-text{
    position: absolute;
    top: 50%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;
    align-items: center;
    transform: translate( 0%,-50%);
    text-align: center;
    color: #fff;
    z-index: 1;
    
}
.q-text{
    position: absolute;
    top: 15%;
    left: 15%;
    max-width: 20%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 2;
    
}
@media all and (max-width: 649px) {
    .q-text {
        position: absolute;
        top: 20%;
        left: 5%;
        max-width: 90%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 11px;
        padding-left: 10px;
        background: rgba(0, 0, 0, 0.5);
        transform: translate(0%,-50%);
        text-align: center;
        color: #fff; 
        z-index: 2;
    }
}
.w-text{
    position: absolute;
    top: 75%;
    left: 25%;
    max-width: 20%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 2;
}
@media all and (max-width: 649px) {
    .w-text {
        position: absolute;
        top: 65%;
        left: 5%;
        max-width: 90%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 11px;
        padding-left: 10px;
        background: rgba(0, 0, 0, 0.5);
        transform: translate(0%,-50%);
        text-align: center;
        color: #fff; 
        z-index: 2;
    }
}
.e-text{
    position: absolute;
    top: 25%;
    left: 70%;
    max-width: 20%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 2;
}
@media all and (max-width: 649px) {
    .e-text {
        position: absolute;
        top: 25%;
        left: 5%;
        max-width: 90%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 11px;
        padding-left: 10px;
        background: rgba(0, 0, 0, 0.5);
        transform: translate(0%,-50%);
        text-align: center;
        color: #fff; 
        z-index: 2;
    }
}
.r-text{
    position: absolute;
    top: 85%;
    left: 75%;
    max-width: 20%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 2;
}
@media all and (max-width: 649px) {
    .r-text {
        position: absolute;
        top: 75%;
        left: 5%;
        max-width: 90%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 11px;
        padding-left: 10px;
        background: rgba(0, 0, 0, 0.5);
        transform: translate(0%,-50%);
        text-align: center;
        color: #fff; 
        z-index: 2;
    }
}
.t-text{
    position: absolute;
    top: 70%;
    left: 50%;
    max-width: 80%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 2;
}
@media all and (max-width: 649px) {
    .t-text {
        position: absolute;
        top: 72%;
        left: 5%;
        max-width: 90%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 11px;
        padding-left: 10px;
        background: rgba(0, 0, 0, 0.5);
        transform: translate(0%,-50%);
        text-align: center;
        color: #fff; 
        z-index: 2;
    }
}
.en-text{
    position: absolute;
    top: 95%;
    left: 95%;
    max-width: 80%;
    transform: translate(-75%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 10;
}
.fr-text{
    position: absolute;
    top: 95%;
    left: 5%;
    max-width: 80%;
    transform: translate(-25%,-50%);
    text-align: center;
    color: #fff; 
    z-index: 10;
}
.h-text span{
    letter-spacing: 5px;
}
.h-text h1{
    font-size: 3.5em;
}
.h-text a{
    text-decoration: none;
    background: black;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.4s;
    z-index: 1;
}
.q-text a{
    text-decoration: none;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.4s;
    z-index: 2;
}
.w-text a{
    text-decoration: none;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.4s;
    z-index: 2;
}
.e-text a{
    text-decoration: none;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.4s;
    z-index: 2;
}
.r-text a{
    text-decoration: none;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.4s;
    z-index: 2;
}
.t-text a{
    text-decoration: none;
    padding: 10px 20px;
    color: #fff;
    letter-spacing: 3px;
    transition: 0.4s;
    z-index: 2;
}
.en-text a{
    text-decoration: none;
    background: black;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #fff;
    letter-spacing: 2px;
    transition: 0.4s;
    z-index: 10;
}
.fr-text a{
    text-decoration: none;
    background: black;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #fff;
    letter-spacing: 2px;
    transition: 0.4s;
    z-index: 10;
}
.q-text b{
    text-decoration: none;
    color: #fff;
    letter-spacing: 3px;
}
.w-text b{
    text-decoration: none;
    color: #fff;
    letter-spacing: 3px;
}
.e-text b{
    text-decoration: none;
    color: #fff;
    letter-spacing: 3px;
}
.r-text b{
    text-decoration: none;
    color: #fff;
    letter-spacing: 3px;
}
.t-text b{
    text-decoration: none;
    color: #fff;
    letter-spacing: 1px;
}

.h-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.q-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.w-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.e-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.r-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.t-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.en-text a:hover{
    border: 1px solid black;
    background: transparent;
}
.fr-text a:hover{
    border: 1px solid black;
    background: transparent;
}