body{
    background: black;
}
h1, p{
    font-family: 'Montserrat', sans-serif;
    color:white;
    grid-column: 1/-1;
    text-align: center;
}

h1{
    font-weight: 100;
    font-size: 2em;
    margin:0;
    grid-row: 3;
}


.grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
}

#landing svg{
    grid-column: 2/4;
    grid-row: 2;
    width:100%;
    margin:50px 0;
}

#landing{
	grid-template-rows: 1fr auto auto auto 1fr;
    height:100vh;
}

#landing p{
    grid-row: 4;
}
svg{
    width: 100%;
}
svg path:nth-of-type(1){
    transform: rotate(-45deg) scale(1.0);
    transform-origin: 20% 50%;
    animation: left 1.0s;
    animation-fill-mode: forwards;
}

svg path:nth-of-type(3){
    transform: rotate(45deg);
    transform-origin: 85% 50%;
    animation: right 1.0s;
    animation-fill-mode: forwards;
}

@keyframes left{
    0%{
       transform: rotate(-85deg) scale(1.0); 
    }
    70%{
        transform: rotate(0deg) scale(1.0); 
    }
    90%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.0);
    }
}

@keyframes right{
    0%{
       transform: rotate(85deg) scale(1.0); 
    }
    70%{
        transform: rotate(0deg) scale(1.0); 
    }
    90%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.0);
    }
}




@media screen and (min-width:768px){
    .grid{
        grid-template-columns: repeat(8, 1fr);
    }
    
    #landing svg{
        grid-column: 3/7;
        width:100%;
    }
    
    h1{
        font-size: 4em;  
    }
    
}

@media screen and (min-width:960px){
    .grid{
        grid-template-columns: repeat(12, 1fr);
        margin: 0 auto;
        max-width: 1200px;
    }
    
    #landing svg{
        grid-column: 5/9;
        width:100%;
    }
    
    
}