@font-face{
    font-family: "Avenir Next Pro Bold";
    src: url("./fonts/AvenirNextLTPro-Bold.woff") format("woff");
}

@font-face{
    font-family: "Avenir Next Pro Regular";
    src: url("./fonts/AvenirNextLTPro-Regular.woff") format("woff");
}

body{
    height: 100%;
    width: 100%;
    background-color: black;
    font-family: "Century Gothic", sans-serif;
    /*display: flex;*/
    /*align-content: center;*/
    /*justify-content: center;*/
    /*overflow-x: hidden;*/
    /*overflow-y: hidden;*/
}

#global{
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: auto;
    color: white;
}

#top-container{
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    align-items: flex-end;
    padding-bottom: 2rem;
}

#top-container svg{
    width: 500px;
    margin: 0 100px;
    max-width: 100%;
}

#bottom-container{
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    padding-top: 2rem;
}

#bottom-container .btn-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#bottom-container .btn-group button{
    border: 0.1rem solid #fff;
    border-radius: 0.3rem;
    padding: 1.5rem;
    background-color: #000000;
    color: white;
    font-size: 1.75rem;
    margin: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Avenir Next Pro Regular", sans-serif;
}

#bottom-container .btn-group button:hover{
    background-color: rgba(255, 255, 255, 0.22);
}

#btn-yt, #btn-insta{
    transition: all 0.15s ease
}

#btn-yt:hover .yt-play{
    fill: #ff0000;
}

#btn-insta svg:first-child{
    margin-bottom: 0.5rem;
}

.insta-logo, .insta-logo-text, .yt-play, .yt-text{
    fill: #fff;
}

#btn-insta:hover .insta-logo{
    /*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);*/
    fill: url(#LinearGradientInsta)
}

#btn-insta:hover .insta-logo-text{
    fill: url(#GradientInstaText)
}

button img, button svg{
    height: 3rem;
}

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