@charset "utf-8";

@font-face {
    font-family: 'FiraSans';
    src: url(./fonts/FiraSans-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FiraSans Bold';
    src: url(./fonts/FiraSans-Bold.ttf);
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'FiraSans';
}
/* CSS Document */
body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
    padding: 0px;
    background-color: teal;
    margin: 0; 
}

nav {
    font-family: 'FiraSans Bold', sans-serif;
    
	
}
nav ul {
	list-style-type:none;
	margin:0;
    padding:0.2em;
    display: flex;
}
nav li { flex-grow: 1; }
nav a {
	display: block;
	padding: 1em;
	text-align: center;
	text-decoration: none;
    color: #333;
    background-color: white;
	border: solid 1px #424242;
	transition: all 0.5s;
	text-transform: uppercase;
}
nav a:hover {
    background-color:#333;
    color: white; }



footer {
    font-size: 0.8em;
    color: #FFFFFF;
    background-color: #333333;
    padding: 0.5rem;
    padding-left: 2.2em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.2em;
}
.vertical {
    border:1px solid white;
    margin: 0.2em;
    height: 90vh;
    width: -webkit-fill-available;
  }
.video_embed {
    height: auto;
    border:1px solid white;
    margin: 0.2em;
    width: -webkit-fill-available;
}
  
   @media (max-width: 1260px) {
 
    #container {
        grid-template-columns: 1fr 1fr;


    }
   }
    @media (max-width: 950px) {
 
        #container {
            grid-template-columns: 1fr;

    
        }
        .vertical {
            min-height: 30em;
        }

    

    }

    @media (max-width: 550px) {
 
        nav ul {
            flex-direction: column;
        }


   }