@charset "utf-8";
@font-face{
    font-family:ammo-box;
    src:url("../fonts/stencilstd.otf");
}
@font-face{
    font-family:twitch;
    src:url("../fonts/twitchy.otf");
}
@font-face{
    font-family:circus;
    src:url("../fonts/mesquitestd.otf");
}
@font-face{
    font-family:arialn;
    src:url("../fonts/arialn.ttf");
}

body{
    margin:0;
    padding:0;
    background-color:#797b88;
    background-repeat: no-repeat;
    background: url("../img/wip-tbd__bg.jpg"),linear-gradient(120deg, rgba(255, 3, 246, 0.85), rgba(255, 114, 0, 0.85) 63%);
    background-size:cover;
    /*background-image:url("../img/WIP__proof-of-concept__website-bg.jpg");*/
    /*background: linear-gradient(120deg, rgba(255, 3, 246, 0.85), rgba(255, 114, 0, 0.85) 63%), url("../img/concrete_cracked.jpg");*/
    overflow: hidden;
    position: relative;
}
#pg_container{
    padding:0;
    margin:0 auto;
    height:100vh;
    width:100vw;
    max-width:100rem;
    /*background-color:rgba(0,0,0,0.5);*/
    background-image:url("../img/artic.png");
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: 4rem;
    background-size: contain;

}
#ammo_txt {
    width: fit-content;
    margin: 2.3rem 0.7rem 0 auto;
    font-family:ammo-box;
    color: orange;
    transform: rotate(-3deg);
    background-image: linear-gradient(3deg, #ff5500, #ffff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 1rem red);
}
.ammo_txt{
    font-size: min(12vw, 9.5rem);
    margin: 0;
    padding: 0;
}
h2,p{
    width:fit-content;
    max-width:30rem;
    text-shadow: 1px 1px 0px black;
}
h2{
    font-size: 2.5rem;
    font-family: arial;
    font-weight: 900;
    margin: 1rem auto;
}
p{
    font-size:1.5rem;
    font-family:"Arial Narrow",arialn;
    margin:0 auto 1rem auto;
    line-height:2.5rem;
}

.twitch {
        font-family: "twitch";
        color: white;
        text-shadow: 2px 2px 1px BLACK, -2px -2px 1px black;
        background-color: #6441A5;
        padding: 0 0.5rem 0.5rem 0.5rem;
        margin: 0;
        border-radius: 0.25rem;
        border: 1px solid rgba(223, 223, 255, 0.5);
        box-shadow: 0 0 0.25rem #000;
}

#centre_container{
    max-width: 70rem;
    width: fit-content;
    padding:0 0.25rem;
}
#header_logo{
    height:9rem;
    margin:0 auto 2rem auto;
}
#content-panel{
 background-color:rgba(225,225,255,0.1);
 backdrop-filter:blur(2px);
 border-radius:1rem;
 border:solid 1px rgba(220, 220, 255, 0.5);
 transition: backdrop-filter 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
 margin:0 0.25rem;
}
#content-panel:hover{
    backdrop-filter:blur(5px);
    background-color:rgba(255,255,255,0.5);
    box-shadow:0 0 1rem rgb(220, 220, 255);
    transition: backdrop-filter 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

#link_container{
    width:fit-content;
    margin:1rem auto;
}
.icon{
    display:inline-block;
    height:4rem;
    width:4rem;
    background-color:#fff;
    border-radius:4rem;
    text-align:center;
    margin: 0.25rem;
    transition: ease-in-out 200ms;
    line-height:4rem;
}
.icon:hover{background-color:rgb(150, 224, 167);}
.logo{
    height:3rem;
    width:3rem;
    margin: 0 auto;
    display:inline-block;
    vertical-align: middle;
}
#footer{
        position: absolute;
        bottom: 0;
        min-height:10vw;
        min-width:101vw;
/*      background-color: rgba(0, 0, 0, 0.5);
        background-image:url("../img/foot.png");
        background-size: cover;
        margin: 0px auto -4.5rem;
        transform: rotate(-4.3deg);
*/        
}
#tagline_container{
    transform:rotate(-4.3deg);
    box-shadow: 0rem -1rem 2rem #000;/*
    background-image: linear-gradient(0deg, #ad0000 20%, #ffc272);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    
}
#tagline{
    font-weight:100;
    font-family: circus;
    position:static;
    width: fit-content;
    min-width:45rem;
    transform:rotate(4.3deg);
    font-size: min(20vw, 9rem);
    margin: 0 auto 0 7vw;
    line-height: 5rem;
    /*filter:drop-shadow(0 0 1rem black);
    paint-order: stroke fill; color: #ffc272;
    text-shadow: 0.15rem 0rem #fff, -0.15rem 0 #fff, 0 0.15rem #fff, 0 -0.15rem #fff;
    filter: drop-shadow(0 0 0.25rem black);
    -webkit-text-stroke: #800 0.5rem;
    */
}
#tagline::after,#tagline::before{
    content:attr(data-alt);
    position:absolute;
    left:0;
}
#tagline::after{
    -webkit-text-stroke:0.1rem #fff;
    z-index:-1;
}
#tagline::before{
    -webkit-text-stroke:0.3rem #600;
    z-index:-2;
}

.center{text-align:center;}
.centered{margin:0 auto;}
.white{color:#ffffff;}



/*ultra wide breakpoint at >= 1700px wide

1220px: the artic title stops moving, should be 12vw at 1219px*/

/*ultrawide tbd*/

@media only screen and (min-device-width: 801px) and (max-device-width:1345px ) {/*normal to ~ultrawide -- any orientation*/
body{
    background-image:url("../img/wip-tbd__bg.jpg");
    background-size: cover;
    background-position: 0 17%;
}
#footer{
    background-color: #000;
    height: 25vw;
    margin: 0 auto -2.5rem;
    max-height: 10rem;
}
#tagline_container{background-color:#000;}

#tagline{
    font-size: min(11vw, 9.4rem);
    margin: -3rem 0 0 1rem;
    line-height:7rem;
}

#ammo_txt{min-width:76rem;}

}

@media only screen and (min-device-width: 413px) and (max-device-width:800px ) and (orientation: portrait) {/*mobile to large mobile/small screen*/
    body{
        background: linear-gradient(120deg, rgba(255, 3, 246, 0.85), rgba(255, 114, 0, 0.85) 63%), url("../img/concrete_cracked_pm.jpg");        
    }
    #ammo_txt{min-width:fit-content;}
    
    #footer{       
        background-color: #000;
        padding: -4rem; /*was 0*/
        width: 101vw;
        height: 25vw;/*was 10vw, 17rem*/
        margin: 0 auto -2.5rem;
    }
    #tagline_container{background-color:#000;}
    #tagline{
        font-size: min(14vw, 13.4rem);
        margin: -2rem 0 0 1rem;
        line-height:
    }
    #tagline::before, #tagline::after {left: 0rem;}
    .ammo_txt{ font-size: 10vw;}
    .icon{
        height:3rem;
        width:3rem;
        line-height:4rem;
    }
    .logo{
        height:2.5rem;
        width:2.5rem;
    }
}
@media only screen and (max-device-width: 412px) and (orientation: portrait) { /*for small screens*/

    body{
        background: linear-gradient(120deg, rgba(255, 3, 246, 0.85), rgba(255, 114, 0, 0.85) 63%), url("../img/concrete_cracked_pm.jpg");
    }
    #pg_container{
        background-image: url(../img/artic_mob.png);
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: 114vw 100vh;
    }
    h2{font-size:2rem;margin: 0 auto 0.5rem auto;}
    #ammo_txt{margin: 0.5rem auto 0.25rem auto;}
    #header_logo{margin:0;}
    #footer{
        background-color:#000;
        margin: 0px auto -4rem;
        width: 103vw;
        min-height:30vw;
    }
    #tagline_container{
        margin: -2rem 0 0 0;
        background-color:#000;
    }

    #tagline{
        font-size: min(17vw, 13.4rem);
        margin: 0rem 0 0 1rem;
        line-height:3rem;
    }  
    #tagline::before, #tagline::after{left:0;}

    .mobbreak{display:block;}
    .icon{
        height:5rem;
        width:5rem;
        line-height:5rem;
    }
    .logo{
        height:3.5rem;
        width:3.5rem;
    }
    
}

@media only screen and (orientation:landscape) and (max-width: 600px){
    body{background: linear-gradient(120deg, rgba(255, 3, 246, 0.85), rgba(255, 114, 0, 0.85) 63%), url("../img/concrete_cracked_lsm.jpg");}
    #header_logo{
        height:9rem;
        margin:1rem auto 1rem auto;
    }
    h2{margin:1rem auto 0.5rem auto;}
}