@charset "utf-8";

@font-face {
	font-family: Typed;
	src: url(fonts\\Cutive_Mono\\CutiveMono-Regular.ttf);
}

:root {
    --onyx:#393D3F; 
    --white: #FDFDFF; 
    --silver:#C6C5B9; 
    --blue: #62929E;
    --blueGrey:#546A7B;
}

html, body {margin:0;}

article {
	display: flex;
}
body, header, section {
	display: grid;
}
body {
	min-height: 100vh;
	backdrop-filter: blur(5px);    /*height: 100vh;*/
    display: grid;
    grid-template-rows: 1.5 em auto 1.5em;
    background-color: var(--silver);
    justify-content:center;
    align-items: center;
}
header, footer {
	flex: initial;
}
header {
	grid-auto-flow: column;
	padding: 2%;
    /*display: grid;*/
    /*align-items: start;*/
}
#logo-name {
    font:1em / 1.15em Courier, monospace;
}
article {
	flex: 85%;
	flex-direction: column;
	padding: 0px 50px;
    width: 70vw;
}
article h1 {color: var(--blue);text-align:center}
section {
	justify-items: center;
	padding: 0% 2%;
}
#outlook {
    justify-items: inherit;
    grid-template-columns: auto auto;
    row-gap: 15px;
    column-gap: 5px;
}
#outlook div {
    padding: 5%;
    background-color: var(--onyx);
    color: var(--white);
    border-radius: 15px;
    box-shadow: var(--blue) 1px 3px 2px;
}
footer {
	text-align: right;
	background-color: #546A7BA0;
	font: normal 1em/1em Courier, monospace;
	padding: 0% 2%;
}

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

}

@media screen and (min-width: 480px) and (max-width: 767px) {

}