stylesheet.css

body {
	background: #fff;
} 

/* fonts */ 

@font-face {
font-family: 'CothamSans';
src: url(CothamSans.otf);
font-weight: normal;
font-style: normal;
}

@font-face {
	font-family: 'Fivo';
	src: url(Fivo.otf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ark';
	src: url(ARK-ES-SolidRegular.otf);
	font-weight: normal;
	font-style: normal;
}

#nav a {
	color: #000;
	text-decoration: none;

}

a {
	color: #000;
}


span a {
	color: #fff;
	text-decoration: none;
}

.quote {
	font-style: italic !important;
}

h1 {
	font-family: 'Fivo';
	color: #000;
	font-weight: 200;
	font-size: 3.5vw;
	line-height: 3vw;
	text-transform: uppercase;
}


h2 {
	font-family: 'CothamSans';
	color: #000;
	font-weight: 200;
	font-size: 1.5vw;
	float: left;
	margin-right: 25px;
}

h3 {
	font-family: 'ark';
	color: #000;
	font-size: 25px;
	line-height: 55px;
	margin: auto;
}

/* menu */

#nav {
	font-family: 'CothamSans';
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#logo {
	text-align: center;
}

#logo img {
	max-width: 350px;
}

#menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #cadd47;
	color: #000;
	transition: opacity 0.5s ease-in-out;
	opacity: 0;
	pointer-events: none;
	text-align: center;
  }
  
  .menu-visible {
	opacity: 1;
	pointer-events: auto;
  }

#ul {
	padding-top: 125px;
}

#ul a {
	text-decoration: none;
}

#ul a img {
	width: 75px;
}
  
form {
	font-family: 'CothamSans';
	float: right;
	display: none;
} 

input[type="text"] {
	font-family: 'CothamSans';
 	font-size: 1.5vw;
  	background: transparent;
  	color: #000;
  	border-block-color: #000;
  	border: 0px;
  	font-weight: 200;
  	padding-top: 15px;
  	opacity: 1;
}

input[type="submit"] {
	display: none;
}


/* boxes */ 

#hello {
	text-align: center;
	margin: auto;
	padding-top: 150px;
}

#list {
	padding-bottom: 150px;
}

#about {
	margin: auto;
	padding-top: 25%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 15%;
	font-family: 'CothamSans';
	font-size: 2.5vw;
}

#about p {
	font-family: 'CothamSans';
}

#about span.tag {
	font-size: 2vw;
}

#start {
	margin: auto;
	padding-top: 25%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 5%;
}

#topics {
	margin: auto;
	padding-top: 25%;
	padding-bottom: 15%;
	text-align: center;
	max-width: 750px;
}

#topics span.tag {
	font-family: 'CothamSans';
	font-size: 2vw;
	line-height: 3vw;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 10px;
}

#category {
	margin-top: 25%;
}

/* marquee */

.marquee {
    width: 100%;
    overflow: hidden;
	color: #fff;
    border-top: 1px solid #000; 
    position: relative;
    height: 50px; 
	white-space: nowrap;
	text-align: center;
	z-index: -1000;
}

/* grid */

.grid-container {
	font-family: 'CothamSans';
	color: #000;
	font-weight: 200;
	font-size: 1.5vw;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	border-top: 1px solid black;
}


.grid-item {
    padding: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
}

.expanding-element {
	padding: 0px 10px 10px 10px;
	grid-column: 1 / -1;
	display: none; /* initially hidden */
  }

/* tags */

span.tag {
	color:  #000;
	background-color: #cadd47;
	border: 1px solid;
	border-radius: 25px;
	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 1.25vw;
	line-height: 2vw;
	margin-right: 5px;
	white-space: nowrap;
}

span.tag a {
	color: #000;
}

.expanded {
			max-height: 500px;
	        overflow: hidden;
            transition: max-height 0.5s ease-in-out;
}

/* footer */

#footer {
	font-family: 'CothamSans';
	font-weight: 200;
	font-size: 1.5vw;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 25px;
}

#footer a {
	text-decoration: none;
}

#footnav-left {
	float: left;
}

#footnav-right {
	float: right;
	text-align: right;
}

#footspace {
	padding: 20px;
	border-bottom: 1px solid black;
}

#footspacetwo {
	padding: 25px;
}

/* Mobile */

@media screen and (max-width: 750px) {
	h1 {
		font-size: 2.5vw;
		line-height: 3vw;
	}

	h2 {
		font-size: 2.5vw;
		line-height: 3vw;
	}

	#ul h1 {
		font-size: 8.5vw;
		line-height: 7vw;
	}

	span.tag {
		font-size: 3.5vw;
		line-height: 3vw;
	}

	.grid-container {
		font-size: 4.5vw;
		line-height: 4vw;
	}

	.grid-item {
		padding: 10px;
	}

	#topics {
		padding-top: 35%;
	}

	#topics span.tag {
		font-size: 4vw;
		line-height: 5vw;
	}

	#footer {
		font-size: 3.5vw;
	}

	#footspace {
		border-bottom: 0px;
	}

	#about p {
		font-size: 4.5vw;
		line-height: 4.5vw;
		font-family: 'CothamSans';
	}
}