*{
    margin: 0;
    padding: 0; 
    font-family: 'Syne', sans-serif;
}

body.stop-transitions * {
    transition: none !important;
  }

html, body {
    height: 100%;
    width: 100%;
    background-color: #030303;
    background-image: url(eiu.png);
    
}

/*--text selection colour--*/
::selection {
    color: #030303;
    background: #ffffff;
  }

/*--navigation bar--*/
nav { 
    position: fixed;
    width: 100%;
    text-align:right;
    padding-top:2vw;
    background: linear-gradient(180deg, rgba(0,0,0,0.8295693277310925) 0%, rgba(0,0,0,0.5046393557422969) 52%, rgba(0,0,0,0) 100%);}

nav a {
    transition-duration: 0.2s;
    padding:8px 12px;
    margin-right:2vw;
    font-weight: 700;
    color: #ffffff;
    text-decoration:none;
    text-align: center;
}

nav a:hover {
    font-weight: 800;
}

/*--scrollbar--*/

::-webkit-scrollbar {
    width: 20px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #e0e0e02c;
    border-radius: 20px;
     border: 6px solid transparent;
    background-clip: content-box;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #777777cb;
  }

  
/* --------------------------------------------------------- */


.pageheader {
    float: left;
    padding-top: 14vh;
    padding-left: 5.5vw;
    padding-right:33vw;
    min-height: 90vh;
    width:max-content

}
/*--everything but header--*/

.container {
    width:100%;
}

.strokemm {
    background-color: #ffffff3f;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.3vw transparent;
    color:#030303;
    padding-left: 1vw;
    padding-right: 1vw;

}

h1 {
    font-weight: 750;
    font-size: 9.5vw;
    line-height: 9.5vw;
    color:#fff;
}

.pageheader h4 {
    font-weight: 600;
    font-size: 2.2vw;
    color:#fff;
}

.glow{
    text-shadow: 0px 0px 1vw #dee8fc88;
}

.lh2 {
    line-height: 6vw;
}

.imgaffan {
    width:35vw;
    margin-top: -25vw; margin-right: -28.5vw;
    float:right;
    box-shadow: 2vw 2vw 0px #ffffff;
    transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.4s;
    overflow-x: hidden;
}

.imgaffan:hover {
    width:34.5vw;
    box-shadow: 2.5vw 2.5vw 0vw #ffffff9c, 5vw 5vw 0vw #ffffff1c;
}

.button1{
    transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.2s;
    background-color: transparent;
    border: 3px solid #ffffff;
    cursor:pointer;
    color: #ffffff;
    padding: 1.25vw 2.25vw; 
    font-weight: 600;
    font-size: 2vw;
    margin-top: 4.5vh;

}

.button1:hover {
    transition-duration: 0.2s;
    background-color: #ffffff;
    color: #030303;
    padding: 1.75vw 2.75vw;
}

.button1:active { 
    color: transparent;
    transform:scale(0.98);
}


.about{
    width:90%;
    margin: auto; 
    text-align:center;
}

.about h4{
    display: flex;
    padding-left: 20%;
    padding-right: 20%;
    
}

h4 {
    font-weight: 100;
    color:#9e9e9e;
    font-size:1.4rem;
    font-family: 'Barlow', sans-serif;
}
.work {
    width: 90%; 
    margin: auto; 
    margin-top: 10vh;
    text-align: right; 
}

.container h1 {
    font-size:5.75rem;
}

.lh3{
    margin-top: -6vw;
}

.card {
    background: #353535;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.tallcard{
    grid-row: span 2 / auto;
}

.tallercard{
    grid-row: span 3 / auto;
}

.widecard {
    grid-column: span 2 / auto;
    grid-row: span 2 / auto;
}
.fourthimg, .fifthimg, .seventhimg{
    background-position: top;
}



.grid{
    z-index:1;
    font-size:0px;
    gap: 1rem;
    grid-auto-rows: 240px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    margin-top: 2vw;
    padding-bottom:2vw;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media(max-width: 768px){
    .textbox h1{
        font-size:12vw;
    }

    .pageheader{
    padding:10vh 0 0 0;
    text-align: center;
    width:100%;
    
    }
    .button1{
        padding: 2vw 4vw;
        transform:scale(1.25);
        margin-top:8vh;
        position: static;
    }
    .imgaffan{
        margin:4vh 25vw 0 0vw;
        width:50vw;
    }


    .textbox h4{
        font-size:2.75vw;
    }

    nav{
        text-align: center;
    }
    nav a{
        font-size:2.5vw;
        flex:1;
        width: 100%;
        margin: auto;
        align-items:center;
    }
/*FOR LATER!!! mobile menu beta
    .navbar a{
        display:block;
    }
    .navbar{
        position:absolute;
        height:100vh;
        width:28vw;
        top:0;
        right:0;
        text-align: right;
        line-height: 10vw;
    }
}
*/
}