/* basic */

h1 {
	font-size: 70px;
}
h2 {
	font-size: 30px;
}

.center {
	width: 200px;
	margin: 0 auto;
}

/* photo grid */

.cont {
	max-width: 1224px;
	width: 90%;
	margin: auto;
	padding: 40px 0;
}

.photos {
	display: flex;
	gap: 20px;
}

.col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.photo img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	object-fit: cover;
}

@media(max-width: 1000px) {
	.photos {
		flex-direction: column;
	}
}

/* columns */
  
  .left {
	width: calc(100% - 200px);
	float: left;
  }
  
  .right {
	width: 200px;
	float: right;
  }

@media screen and (max-width: 700px) {
	.left {
		width: 100%;
	}
	.right {
		display: none;
	}
}

/* mobile social links */

@media screen and (min-width: 700px) {
	.social {
		display: none;
	}
}

/* basic buttons */

.button-basic {
	align-items: center;
	background-color: #e7f7ff;
	background-position: 0 0;
	border: 1px solid #e0f6fe;
	border-radius: 11px;
	box-sizing: border-box;
	color: #2c96d3;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	line-height: 33.4929px;
	list-style: outside url(https://www.smashingmagazine.com/images/bullet.svg) none;
	padding: 2px 12px;
	text-align: right;
	text-decoration: none;
	text-shadow: none;
	text-underline-offset: 1px;
	transition: border .2s ease-in-out,box-shadow .2s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	word-break: break-word;
	height: 35px;
	width: 130px;
  }
  
  .button-basic:active,
  .button-basic:hover,
  .button-basic:focus {
	outline: 0;
  }
  
  
  .button-basic:active {
	background-color: #2c96d3;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
	color: #FFFFFF;
  }
  
  .button-basic:hover {
	background-color: #e7f7ff;
	border-color: #a4dffa;
  }
  
  .button-basic:active:hover,
  .button-basic:focus:hover,
  .button-basic:focus {
	background-color: #2c96d3;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
	color: #FFFFFF;
  }

/* active buttons */

.button-active {
  align-items: center;
  background-color: #e8ffe7;
  background-position: 0 0;
  border: 1px solid #e0fee0;
  border-radius: 11px;
  box-sizing: border-box;
  color: #2cd345;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  line-height: 33.4929px;
  list-style: outside url(https://www.smashingmagazine.com/images/bullet.svg) none;
  padding: 2px 12px;
  text-align: right;
  text-decoration: none;
  text-shadow: none;
  text-underline-offset: 1px;
  transition: border .2s ease-in-out,box-shadow .2s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  word-break: break-word;
  height: 35px;
  width: 130px;
}

.button-active:active,
.button-active:hover,
.button-active:focus {
  outline: 0;
}


.button-active:active {
  background-color: #2cd345;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
  color: #FFFFFF;
}

.button-active:hover {
  background-color: #e8ffe7;
  border-color: #a4faa4;
}

.button-active:active:hover,
.button-active:focus:hover,
.button-active:focus {
  background-color: #2cd345;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
  color: #FFFFFF;
}

/* inactive buttons */

.button-inactive {
	align-items: center;
	background-color: #FFE7E7;
	background-position: 0 0;
	border: 1px solid #FEE0E0;
	border-radius: 11px;
	box-sizing: border-box;
	color: #D33A2C;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	line-height: 33.4929px;
	list-style: outside url(https://www.smashingmagazine.com/images/bullet.svg) none;
	padding: 2px 12px;
	text-align: right;
	text-decoration: none;
	text-shadow: none;
	text-underline-offset: 1px;
	transition: border .2s ease-in-out,box-shadow .2s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	word-break: break-word;
	height: 35px;
	width: 130px;
  }
  
  .button-inactive:active,
  .button-inactive:hover,
  .button-inactive:focus {
	outline: 0;
  }
  
  
  .button-inactive:active {
	background-color: #D33A2C;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
	color: #FFFFFF;
  }
  
  .button-inactive:hover {
	background-color: #FFE3E3;
	border-color: #FAA4A4;
  }
  
  .button-inactive:active:hover,
  .button-inactive:focus:hover,
  .button-inactive:focus {
	background-color: #D33A2C;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset;
	color: #FFFFFF;
  }