@font-face { font-family: Roundie; src: url('Utils/Typo_Round_Regular_Demo.otf'); } 
@font-face { font-family: Filson; src: url('Utils/FilsonProRegular.otf'); } 

html {
    scroll-behavior: smooth !important;
} 

.navbar-text {
    font-size: large;
    text-decoration: none;
    color: white;
}

.navbar-text:hover {
    color: rgb(238, 204, 13);
}
.navbar-text:focus {
    color: rgb(238, 204, 13);
    outline: none;
}


.bg-div{
    /* width: 100vw;  */
    /* height: 100vh; */
    /* background-image: url(Utils/explosion_yak.jpg);  */
    background-size: cover; 
    /* background-repeat: no-repeat; */
    background-color: rgb(42, 4, 4, 0.8);
}


.btn-outline-Light:hover {
    border-color: rgb(238, 204, 13);
    /* background-color: rgb(238, 204, 13); */
    background-color: transparent;
    color: rgb(238, 204, 13);
}

.btn-outline-Parallax {
    border-color: white;
    color: white;
}

.btn-outline-Parallax:hover {
    /* border-color: rgb(238, 204, 13); */
    background-color: rgb(42, 4, 4);
    border-color: rgb(42, 4, 4);
    /* background-color: transparent; */
    color: white;
}

.btn-outline-Parallax:focus {
    color: rgb(42, 4, 4);;
    outline: none;
}

.explosion { transition: all 1s ease-in-out; }
.explosion:hover {
    transform: scale(1.1);
}

.parallax {
    background-image: url("Utils/parallax.jpg");

    /* min-height: 450px;  */

    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
}

.info-text {
    color: #EDE6D6;
    font-family: Filson;
    font-size: 1.1rem;
}

.ourhome-div {
    background-size: cover; 
    background-image: url(Utils/image.jpg); 
    border-radius: 100px; 
    background-size: cover; 
    background-repeat: no-repeat;
}

.ourhome-overlay {
    background-color: rgba(58, 6, 6, 0.5); 
    border-radius: 100px;
}

.title {
    color: #EDE6D6; 
    font-size: 5rem; 
    font-family: Filson;
}


video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.youtube {
    border:0; 
    border-radius: 50px; 
    -webkit-border-radius: 50px; 
    width: 50%; 
    height: 70%;
}

@media screen and (max-device-width: 500px) and (min-device-width: 100px) 
{ 
    .youtube {
        border:0; 
        border-radius: 50px; 
        -webkit-border-radius: 50px; 
        width: 60%; 
        height: 20%;
    }
}

@media screen and (max-device-width: 1000px) and (min-device-width: 500px) 
{ 
    .youtube {
        border:0; 
        border-radius: 50px; 
        -webkit-border-radius: 50px; 
        width: 60%; 
        height: 30%;
    }
}

.parallax-big {
    font-size: 5rem; 
    color: white; 
    font-weight: bold; 
    font-family: Filson;
}

@media screen and (max-device-width: 700px) and (min-device-width: 100px) 
{ 
    .parallax-big {
        font-size: 3rem; 
        color: white; 
        font-weight: bold; 
        font-family: Filson;
    }
}

.parallax-medium {
    font-size: 3rem; 
    color: white; 
    font-family: Filson;
    line-height: 0.2vw;
}

@media screen and (max-device-width: 700px) and (min-device-width: 100px) 
{ 
    .parallax-medium {
        font-size: 2rem; 
        color: white; 
        font-family: Filson;
        line-height: 0.2vw;
    }
}

.parallax-small {
    font-size: 2rem; 
    color: white; 
    font-family: Filson;
}

@media screen and (max-device-width: 700px) and (min-device-width: 100px) 
{ 
    .parallax-medium {
        font-size: 1rem; 
        color: white; 
        font-family: Filson;
    }
}