@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
:root{
    --black: #0e1116;
    --accent: #374a67;
    --clear-accent: rgba(55, 74, 103, .6);
    --white: #E8E8E8;
    --l-grey: #BFBFBF;
    --grey: #96939B;
    --h-font: "Roboto Mono";
    --shadow: 4px 4px 20px 0px rgba(14, 17, 22, .2);
    --font: "Poppins"
}

body{
    background-color: var(--black);
    color:var(--white);
    margin: 0;
    font-family: var(--font);
    scroll-behavior: smooth;
}
.side{
    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    display: grid;
    place-items: center;
    padding-inline: 10%;
}
.hero{
    background-repeat: no-repeat;
    height: 90vh;
    display: grid;
    place-items: center;
  
    
    position: relative;
    overflow: hidden;
   
}
.hold{
    overflow: hidden;
    /* border: 1px solid white; */
    object-fit: cover;
    height: 40rem;
    width: 40rem;
}
.bg-img{
    background: url("https://cdn.pixabay.com/photo/2015/05/07/11/02/guitar-756326_960_720.jpg") no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    transform: scale(1.1);
    filter: blur(5px) saturate(1);
    animation: blur 2000ms ease-out;
}
header{
    background-image: linear-gradient( 30deg, var(--black), var(--accent));
    z-index: 10;
}
h1{
    color: var(--white);
    font-family: var(--font);
    font-size: 2.5rem;
    margin:0;
    padding: 1rem;
    text-align: left;
    font-variant: small-caps;
}
hr{
    margin:0;
    border-color:var(--accent);
}
h1 div{
    font-size: small;
    margin-left: 1rem;
    font-variant: normal;
    color: var(--grey);
    width: max-content;
}
.call{
    background-color: var(--clear-accent);
    border-radius: 1rem;
    color: var(--white);
    padding: 2rem;
    max-width: 40ch;
    display: grid;
    place-items: center;
}
.call .button{
    color: var(--white);
    border-color: var(--l-grey);
    border-radius: .25rem;
    border: 2px outset;
    padding: .5em;
    text-decoration: none;
    max-width: max-content;
}
.hero>*:not(.bg-img){
    box-shadow: var(--shadow);
    transform: translateX(0vw);
    animation: hover-in 1500ms ease-out;
}
.hero>*:nth-child(3){
    --trans: 100vw;
}
.hero>*:nth-child(2){
    --trans: -100vw;
}
@keyframes blur {
    0%{
        filter: blur(0px);
    }
    50%{
        filter: blur(0px);
    }
}
@keyframes hover-in {
    0%{
        transform: translateX(var(--trans));
        opacity: 0;
    }
    50%{
        transform: translateX(var(--trans));
        opacity: 0;
    }
}