/* Installed Fonts */
@font-face { font-family: Delicious; src: url('../fonts/Rubik_Doodle_Shadow/RubikDoodleShadow-Regular.ttf'); }
@font-face { font-family: Outfit; src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf');}
@font-face { font-family: Pridi; src: url('../fonts/Pridi/Pridi-Light.ttf');}

html, body {
    font-family: Outfit, sans-serif;
    background-color: black;
    margin: 0;
    padding: 0;
    height: 100%;
}

footer {
    color: white;
}

.center-text {
    text-align: center;
}

.padding-20 {
    padding: 20px;
}

.main-title-text {
    font-size: 2em;
}

.page-title-white {
    color: white;
    text-align: center;
    padding: 50px 0 20px 0;
    margin: 0 0 0 0;
}

.social-links-container {
    display: flex;
    justify-content: center;
}

.height-14 {
    line-height: 1.4;
}

.height-25 {
    line-height: 2.5;
}

.social-link {
    white-space: nowrap;
    padding: 60px 2vw;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: 100px;
}

@media (max-width: 800px) {
    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
        margin: 10px;
    }

    .social-links-container {
        display: block;
    }

    .social-link {
        padding: 10px 0;
    }
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inner-div {
    margin: 0 20px 0 20px;
}

.grey-bg {
    background-color: #444444;
}

.black-bg {
    background-color: #000000;
}

.rounded {
    border-radius: 20px;
}

.half-rounded {
    border-radius: 10px;
}

main, div {
    margin: 0;
    padding: 0;
}

.img-logo {
    height: 40px;
}

.trans-30 {
    transform: translateY(30%);
}

.trans-17 {
    transform: translateY(17%);
}

.trans-neg24 {
    transform: translateY(-24%);
}

.img-logo:hover {
    filter: opacity(50%);
}

a.email-link {
    padding-left: 5px;
    text-decoration: none;
    color: white;
}

a.email-link:hover {
    text-decoration: underline;
    filter: opacity(50%);
}

.info-text {
    color: white;
    line-height: 40px;
}

.info-title {
    color: white;
    padding: 0 10vw 0 10vw;
    font-size: 2em;
    text-transform: capitalize;
    text-decoration-line: underline;
}

.blank-space {
    margin: 10vh;
}

footer {
    background-color: #5d5d5d;
    text-align: center;
}

@media (max-width: 800px) {
    .only-desktop {
        display: none;
    }

    #page-title {
        padding-top: 20px;
    }
}