@font-face {
    font-family: main;
    src: url("fonts/Housearama Kingpin.otf");
}

@font-face {
    font-family: main2;
    src: url("fonts/gaslight.ttf")
}


@font-face {
    font-family: text;
    src: url("fonts/opensans.ttf");
}



body{
    background-image: url("images/backgrounds/site_background.png");
    background-size: repeat;
    animation: bg-pan-right-normal 3s linear 0s infinite normal none;

    display: flex;
    flex-direction: column;
    gap: 20px;

}



h1{
    font-family: main;
    color: red;
    text-shadow: 3px 1px 0px rgb(221, 218, 59);
}

h2{
    color: rgb(255, 255, 255);
    text-shadow: 3px 1px 0px rgb(75, 75, 74);
    font-family: main2;
    font-size: xx-large;
    font-style: italic;
    font-weight: 100;

    margin-top: -20px;
}


h3{
    color: rgb(255, 255, 255);
    text-shadow: 3px 1px 0px rgb(75, 75, 74);
    font-family: main;
    font-style: italic;
    font-weight: 100;
    margin-top: -20px;

  
}

span{
    color: white;
    font-size: large;
    font-family: text;
}



#navigationbar{
    display: flex;
    background-color: black;
    
}

#logo{
    display: flex;
    flex-direction: column;
    margin: 20px;
    margin-left: 10px;
}

#logoimage{
    margin-left: 20px;
    margin-top: 20px;
}






#navbarbuttons{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 70px;
}






#middle{
    display: flex;
    flex-direction: column;

    align-items: center;
    background: black;
    
}


#middleflexbox{
    display: flex;

    width: auto;
    height: auto;

    gap: 50px;
    
}


#flexbox{
    display: flex;
    flex-direction: row;
}


#video-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.textbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.inside-text{
    margin: 20%;
}


#bottom{
    display: flex;
    flex-direction: column;
    background: black;

    align-items: center;

    width: 100%;
    height: 100%;
}


#bottombox{
    display: flex;
    flex-direction: column;
    background: rgb(0, 0, 0);
    align-items: center;
    gap: 5px;
}















.buttonClass {
  font-size:15px;
  font-family:main;
  text-align: center;
  width:100px;
  height:20px;
  border-width:1px;
  color:#fff;
  border-color:rgba(0, 0, 0, 1);
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  background:rgba(208, 2, 27, 1);
  text-decoration: none;

  align-items: center;
}

.buttonClass:hover {
  background: rgba(2, 171, 208, 1)
  
}