@import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Bungee&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
----- 
add icons for products?
remove the scroll bars when happy
do a slideshow for the crane
links on page do not scroll

----- DONE
vhead needs to be relative on desktop in mq
put in a video for oresome
Change the red links
add the material icons again.



*/

:root{
    --head-height:100px;
    --def-pad:25px;
    --for-col:rgba(255,165,0,1);
    --lin-col:rgba(255,195,0,1);
    --bold-font:Bungee;
    --font-stan:Roboto;
}

html
{
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
    /*scroll-snap-points-y:repeat(100vh);*/
    font-size:25px;

    background-color: green;

    font-family: var(--font-stan);
}



.homebimg
{
    background: url(../images/origback.jpg)
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.aboutbimg
{
    background: url(../images/origback.jpg)
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.workbimg
{
    background: url(../images/origback.jpg)
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.portbimg
{
    background: url(../images/origback.jpg) 
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.conbimg
{
    background: url(../images/origback.jpg) 
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.portbimg
{
    background: url(../images/origback.jpg) 
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.orebimg{
    background: url(../images/origback.jpg) 
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body{
    padding:0px;
    margin:0px;

    overflow-y:scroll;
    overflow-x:hidden;
    /*overflow-y:hidden;*/
}

p{
    margin-block-start: 0px;
}

h1{
    font-size: 26px;
}

#wrapper
{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    width:100%;
    height:700vh;
}

header
{
    display:flex;
    flex-direction:row;
    box-sizing:border-box;
    position:fixed;
    width:100%;
    height:var(--head-height);
    padding-right:calc(var(--head-height) + 200px);
    padding-left:200px;
}

.slice
{
    display:flex;
    flex-direction:column-reverse;
    box-sizing: border-box;

    width:100vw;
    height: 100vh;
    
    scroll-snap-align: start;
    scroll-snap-stop: normal;

    border: 2px solid var(--lin-col);
}

.art
{
    display:flex;
    box-sizing:border-box;
    width:100vw;
    height:calc(50vh - var(--head-height)/2);
   
    padding:var(--def-pad);

    flex-direction:column;
    
    color: var(--for-col);
}



.vhead
{
    display:flex;
    box-sizing:border-box;

    width:100vw;
    height:var(--head-height);

    color:var(--for-col);
   
    padding-left:20px;
    
    font-family:var(--bold-font);
    font-size:50px;
    letter-spacing: -1px;
    text-shadow: -15px 0 black, 5px 0 black, 0 15px black, 0 -5px black;

    /*background-color: red;*/
}

.vheadtxt
{
    display: flex;
    flex-grow:1;
    align-items: center;
    /*background-color: antiquewhite;*/
}

#ham
{
    display:flex;
    position:fixed;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top:0px;
    right:0px;
    z-index:98;
    width:var(--head-height);
    height:var(--head-height);
    font-family: var(--bold-font);
}

.hamgraphic
{
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px;
}

.modal
{
    position: absolute;
    top:-100vh;

	width:100%; 
	height:100%; 
	box-sizing: border-box;
    background-color:rgba(0,0,0,.8);
    color:rgba(0,0,0,0.0);
	z-index: 99;
    display: flex;
    flex-direction: column;
	justify-content: center;
    align-items: center;
    
    font-family:var(--bold-font);

    font-size: 2em;
    letter-spacing: 2px;
    text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;


    transition: all 1s;

}

.modal:target
{ 
    top:0px;
    color:rgba(0,0,0,1.0);
    visibility: visible;
	transition: all 1s;
}

.button
{
    display: flex;
    box-sizing: border-box;

    font-family:var(--bold-font);
    font-size: 30px;

    text-shadow: 
    -3px -3px 0 black,
    -3px 3px 0 black,
    3px 3px 0 black,
    3px -3px 0 black;

    flex-grow:1;
    visibility: hidden;
    justify-content: center;
    align-items: center;

    transition: all 1s;
    

}

.button:hover
{
    text-shadow: 
    /*-3px -3px 5px rgba(255,255,255,.5),*/
    -3px -3px 5px red,
    -3px 3px 5px red,
    3px 3px 5px red,
    3px -3px 5px red;

    transition: all 1s;

}

#portgrid
{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width:
}

.gslice
{
    display:flex;
    flex-direction: row;
    width:70%;
    
}

.g1{
    margin-right: 10px;
    font-size: 25px;
}

.portimg{
    display: flex;
    justify-content:start;
    align-items: start;
    box-sizing: border-box;
}

.portimg img{
    
}



/*  ---------- LINKS ---------- */

a:link{
    color:var(--lin-col);
    text-decoration: none;

    transition: all 1s;;

}
a:visited
{
    color:var(--lin-col);

    transition: all 1s;;

}

/*Attribute*/

a[target="_blank"]{
    color:ghostwhite;
}

/*Pseudo*/

a:hover{
    text-shadow: 
    -1px -1px 5px rgba(255,255,255,.5),
    -1px 1px 5px var(--lin-col),
    1px 1px 5px var(--lin-col),
    1px -1px 5px red;

    transition: all 1s;;
}

/*Combinator*/

.modal a:link
{
    color:var(--for-col);
}
.modal a:visited{
    color:var(--for-col);
}

.button a:link
{
    font-size: 1.2em;
    color:var(--lin-col);
}

.button a:visited
{
    font-size: 1.2em;
    color:var(--lin-col);
}

.material-icons{
    font-size: 48px;
}

/*  ---------- RESPONSIVE ---------- */

@media all and (min-width: 1500px)
{
    .slice
    {
        flex-direction:row;
        height: 100vh;
        box-sizing: border-box;
    }

    .art{
        display:flex;
        flex-direction: column;
        box-sizing: border-box;

        height: 100%;
        width: 100%;
        
        padding:calc(var(--def-pad) + 100px);





    }

/* ***** NEW ***** */

    .portimg{
        display: flex;
        width: 100%;
        height: 100%;

    }

    .portimg img {
        max-width: 100%;
        height: auto;
        flex:1 1 auto;
    }

    .vhead
    {
        display: flex;
        padding-top:var(--def-pad);

        writing-mode:vertical-rl;
        width:10vw;
        justify-content:center;
        height: 100vh;
        padding-left:0px;

        /*font-size:145px;*/

        font-size: 10vh;

        letter-spacing: -10px;
    }

    .vheadtxt{
        width:200px;
        margin-top:30px;
    }

    #ham
    {
        visibility:hidden;
    }

    .button{
        visibility:visible;
    }
    
}