@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

body,html {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}

body {
    background-color: rgb(19, 5, 0);
    color: #DDD;
    font-family: sans-serif;
    padding:0;
    margin:0;
}

.socialicon {
    width: 24px;
    height: 24px;
    vertical-align:middle;
}

.homebanner{
    padding: 20px 20px 20px 20px;
    background-image: url('/img/WarrenBGx2.jpg');
    background-size: cover;
    background-position: center center;
    width:100%;
    min-height: 80vh;

    @media only screen and (min-width: 450px) {
padding: 35px 35px 35px 35px;
min-height: 90vh;
    }
    @media only screen and (min-width: 650px) {
padding: 50px 50px 50px 50px;
min-height: 100vh;
    }
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Shadows Into Light', cursive;
}
h1{
    color: #F0F0F0;
margin:0px 0px;
    font-size:3rem;
    @media only screen and (min-width: 450px) {
font-size:3.5rem;
    }
    @media only screen and (min-width: 650px) {
font-size:3.9rem;
    }
    @media only screen and (min-width: 1000px) {
font-size:6.8rem;
    }
    
text-shadow: 10px 10px 3px rgba(0,0,0,0.3);
}
h2{
    font-size:2.25rem;
    margin:0px 0px;
    @media only screen and (min-width: 650px) {
font-size:2.5rem;
    }
    @media only screen and (min-width: 1000px) {
font-size:3rem;
    }
    text-shadow: 3px 3px 1px rgba(0,0,0,0.3);
}
h3{
    margin:0px 0px;
    font-size:1.5rem;
    @media only screen and (min-width: 650px) {
font-size:1.9rem;
    }
    @media only screen and (min-width: 1000px) {
font-size:2.4rem;
    }
}

.button{
    padding:10px 20px;
    color:white;
border-radius:10px;
margin-right:40px;
margin-bottom:40px;
display:inline-block;
text-decoration:none;
}
.iconlink{
    
    color:white;
    text-decoration: none;
}
.iconlinktext{
    vertical-align:middle;
}
.icon{
    display:inline-block;
    
    width:90px;
    height:90px;
    vertical-align:middle;
    margin-right:10px;
    

    @media only screen and (min-width: 650px) {
        width:130px;
        height:130px;
        margin-right:15px;
            }
            @media only screen and (min-width: 1000px) {
                width:180px;
                height:180px;
                margin-right:20px;
            }
            
}

.personas{
    background-color: rgba(19, 5, 0, .5);
    margin-top: -50px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    
    @media only screen and (min-width: 450px) {
margin-top: -70px;
    }
    @media only screen and (min-width: 650px) {
margin-top: -100px;
    }
}
.persona{
    background-color:#F0F0F0;
    margin: 20px 10px 20px 10px;
    padding: 5px 15px 5px 15px;
    color:#333;
    text-align: center;
    width:300px;
    
    @media only screen and (min-width: 450px) {
        margin: 35px 17px 35px 17px;
        padding: 10px 20px 10px 20px;
        
    }
    @media only screen and (min-width: 650px) {
        margin: 50px 25px 50px 25px;
        padding: 15px 25px 15px 25px;
    }
}
.feed{
    margin-left:25px;
    margin-right:25px;
    margin-top:-75px;
}
.referral,.juicer-about,[data-source='juicer']{
    display:none!important;
    width:0px!important;
    height:0px!important;
    margin:0!important;
    overflow:hidden;
}