/*idk*/
* {box-sizing: border-box;}

/*STYLING FONTS*/
@font-face {font-family: DigiBop;src: url(https://dl.dropbox.com/s/8maabpvuycdrlai/DigiBop-Regular.ttf);}
@font-face {font-family:'kiwi';src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);}
@font-face {font-family: "Audiowide";src: url("https://fonts.googleapis.com/css?family=Audiowide");}
h1 {font-family: 'kiwi';margin: 0;}
h2 {font-family: DigiBop;margin: 0;}
h3 {font-family: 'kiwi';margin: 0;}
h5 {font-family: "Audiowide";margin: 0;}
body {font-family: "Audiowide", sans-serif;}

/*Styling Header*/
header {padding: 20px;text-align: center;background: linear-gradient(180deg, rgba(123, 186, 173,0.8) 0%, rgba(164, 235, 220,0.5) 50%);}


/* Top navigation bar */
.navbar {display: flex;background: linear-gradient(180deg, rgba(26, 188, 156,0.8) 0%, rgba(123, 186, 173,0.5) 50%);}

/* Navigation bar links */
.navbar a {color: white;padding: 5px 45px;text-decoration: none;text-align: center;}
/* Change color on hover */
.navbar a:hover {background: linear-gradient(180deg, rgba(26, 188, 156,0.8) 0%, rgba(123, 186, 173,0.5) 50%);color: #1abc9c;}

/* Column container */
.container {display: flex;flex-wrap: wrap;background: linear-gradient(180deg, rgba(123, 186, 173,0.8) 0%, rgba(164, 235, 220,0.5) 50%)}

/* Sidebar/left column */
.side {flex: 30%;padding: 20px;background: linear-gradient(180deg, rgba(26, 188, 156,0.8) 0%, rgba(123, 186, 173,0.5) 50%);color: white;}
age {
font-family:'kiwi';
font-size: 1.375em;
color: white;
font-weight:bold;
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px #9fe11d) drop-shadow(0 -1px #9fe11d) drop-shadow(1px 0 #9fe11d) drop-shadow(-1px 0 #9fe11d);}

/*background: linear-gradient(180deg, rgba(123, 186, 173,0.8) 0%, rgba(123, 186, 173,0.5) 50%);}*/

/* Main column */
.main {flex: 70%;padding: 20px;color: #305e55;}
/*background: linear-gradient(180deg, rgba(123, 186, 173,0.8) 0%, rgba(164, 235, 220,0.5) 50%);}*/

/* Fake image, just for this example */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;}

/* Footer */
footer {padding: 20px;text-align: center;background: linear-gradient(180deg, rgba(26, 188, 156,0.8) 0%, rgba(123, 186, 173,0.5) 50%); color:white;}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {.container, .navbar {flex-direction: column;}}