.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
}

.logo-background {
    background-color: #191917;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

.logo-purple-circle {
    background-color: #351849;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.logo-image {
    border-radius: 25%;
}

.band-image {
    border-radius: 0 25% 0 0;
}

.band-label-1 {
    position: relative;
    color: white;
    margin: 0;
}

.band-label-2 {
    position: relative;
    color: white;
    margin: 0;
}

.social-media {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 400px) {
    .logo-container{
        height: 320;
    }

    .logo-background {
        width: 300;
        height: 300;
    }

    .logo-purple-circle {
        width: 250;
        height: 250;
    }

    .logo-image {
        width: 150;
        height: 150;
    }

    .band-label-1 {
        bottom: 90;
        left: 250;
        font-size: 30;
    }
    
    .band-label-2 {
        bottom: 100;
        left: 235;
        font-size: 30;
    }

    .band-image {
        width: 300;
        height: 300;
    }

    .social-media {
        margin: 20;
        width: 250;
    }

    .social-media-icon{
        height: 40;
        width: 40;
    }
}


@media (min-width: 401px) {
    .logo-container{
        height: 420;
    }

    .logo-background {
        width: 390;
        height: 390;
    }

    .logo-purple-circle {
        width: 350;
        height: 350;
    }

    .logo-image {
        width: 250;
        height: 250;
    }

    .band-label-1 {
        bottom: 90;
        left: 320;
        font-size: 40;
    }
    
    .band-label-2 {
        bottom: 100;
        left: 305;
        font-size: 40;
    }

    .band-image {
        width: 400;
        height: 400;
    }

    .social-media {
        margin: 30;
        width: 300;
    }

    .social-media-icon{
        height: 50;
        width: 50;
    }
}

@media (min-width: 601px) {
    .logo-container{
        height: 480;
    }

    .logo-background {
        width: 450;
        height: 450;
    }

    .logo-purple-circle {
        width: 410;
        height: 410;
    }

    .logo-image {
        width: 310;
        height: 310;
    
}
    .band-label-1 {
        bottom: 90;
        left: 380;
        font-size: 40;
    }
    
    .band-label-2 {
        bottom: 100;
        left: 360;
        font-size: 40;
    }

    .band-image {
        width: 550;
        height: 550;
    }
}