@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


body{
    background-color:#000;
    
    margin:0;
    font-family: "Urbanist", sans-serif;
    font-weight:200;
    color:hsl(59, 77%, 88%);    
    
}



/*˜˜˜˜˜˜˜˜˜˜Typography*˜˜˜˜˜˜˜˜˜˜*/


h1{
    font-size:4rem; 
    margin:1.5em; 
    position:absolute;  
    
}

h2{
    position:absolute;
   
    font-size:1.5rem;
    margin:4em;
}


.description{
    position:absolute;
  
    font-size:1.2rem;
    text-align: justify;
    font-weight:600;
    width:40%;
    padding-left:5em;
    margin:5em 2em;
    
}

.general-description{
    position:relative;
    margin:10% 20%;
    font-size:2rem;
    font-weight:100;
    text-align: justify;
    
    
  
}

.home{
    font-family:"Urbanist", sans-serif;
    font-weight:100;
    font-size:3rem;
    margin-left:0.2em;
    position:absolute;
   
    text-decoration: none;
    color:hsl(59, 77%, 88%);
}



a:hover, 
a:focus {
    color: red;
}

a:active{
    background-color:white;
}

a:visited {
    color:purple;
}


/*Layout & Containers*/

header{
    color:hsl(59, 77%, 88%);
    font-family: "Rubik Mono One", monospace;
}



/*Images */

img{
    display:block;
    padding:0;
    margin:0;
    width:100%;
}

.vimeo{
    padding:56.25% 0 0 0;
    position:relative;
}

iframe{
    position:absolute;
    overflow-x: hidden;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.outer-background{
    display:inline-block;
    background-image:linear-gradient(to bottom, rgb(15,9,14)80%,rgb(19,35,85));
    width:100%;
    
}

.relative{
    position:relative;
}

.description-boulevard {
    position:absolute;
    font-size:1.2rem;
    text-align: justify;
    font-weight:600;
    width:40%;
    padding-left:5em;
    margin:5em 2em;
    
}

span{
    font-family:"Rubik Mono One", monospace; 
    color:hsl(59, 77%, 88%);
}






/* Media Queries */


  @media only screen and (max-width: 500px) {

    img{
        width:100%;
    }

    h1{
        margin-top:0.2em;
        font-size:2.4rem;   
       
    }

    h2{
        font-size:1rem;
    }

    .home{
        font-size:1.5rem;
        font-weight:400;
    }

    .general-description{
        margin:15% 0.5%;
        text-align:left;
    }

    .description{
   
        padding:0;
        font-size: 1rem;
        margin:2%;
        width:60%;
     
    }


    .description-boulevard{
        margin-right:5%;
        padding:0;
        font-size:0.7rem;
        right:0;
        bottom:0;
    }

  
}