@font-face {
	font-family: glockgrotesque;
	src: url(fonts/GlockGrotesque2-Medium.otf);
}

@font-face{
	font-family: craftworksans-regular;
	src: url(fonts/CraftworkSans-Regular.ttf);
}

@font-face{
	font-family: craftworksans-medium;
	src: url(fonts/CraftworkSans-Medium.ttf);
}

@font-face{
	font-family: craftworksans-bold;
	src: url(fonts/CraftworkSans-Bold.ttf);
}

html{
	scroll-behavior: smooth;
}

body{
	align-content: center;
	background-color: #FAF8EE;
	color: #2C2B2B;
	font-size: 3vw;
	font-family: craftworksans-regular,helvetica,sans-serif;
}

div{
	margin-top: .5rem;
	margin-bottom: .5rem;
	padding: 2vw;
}

img{
  	width: 45vw;
}

.block{
	border: .25vw solid #005BBB;
	border-radius: 10px;
}

.box{
	text-align: center;
	border: 1px solid #2C6DF0 0%;
	border-radius: 1vw;
	justify-content: center;
	align-items: center;
	align-content: center;
}

#center{
	align-content: center;
	text-align: center;
}

a{
	padding: .5rem;
	color: #2c2b2b;
	text-decoration: none;
}

a:hover{
	color: #FFD500;
}

b{
	font-family:craftworksans-medium;
	font-weight: 400;
}

.container{
	display:inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border: 2.5px solid #005BBB;
	border-radius: 2vw;
	background-color: #faf8ee;
	padding: 1.5vw;
	transition-property: background;
    transition-duration: .5s;
    transition-timing-function: linear;

}

.container:hover{
	color: #FFD500;
	font-size: 30px;
	border-radius: 50px;
	background-color: #005bbb;
}

.text{
	width:90%;
	margin-bottom: 1rem;
	font-family: glockgrotesque, ARIAL, sans-serif;
	font-size: 2vw;
	line-height: 2vh;
	border: 2.5px solid #005BBB;
	border-radius: 1vw;
	background-color: #faf8ee;
    transition-duration: .5s;
    transition-timing-function: linear;
}

.text:hover{

	margin-top: 1rem;
	font-size: 3vw;
	line-height: 4vw;
	color: #FFD500;
	background-color: #005bbb;
}

.bg{
	font-size: 3.8vw;
	color:#2C2B2B ;
	transition-duration: .5s;
    transition-timing-function: linear;
}

.bg:hover{
	font-size: 5vw;
	color: #FFD500;
	background-color: #005bbb;
}

#padding-top {
	padding-top: 1rem;
}

p{
	font-family: craftworksans-regular;
	font-size: 10px;
	align-content: left;
}

@media screen and (max-width: 576px){
  body{
  	font-size:20px;
  }

  div{
	margin-top: .5rem;
	margin-bottom: .5rem;
	padding: 2vw;
	align-items: center;
	justify-content: center;
  }

  .block{
  	color: #FFD500;
	background-color: #005bbb;
	align-items: center;
	justify-content: center;
  }

  .container{
	display:inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	border: 2.5px solid #005BBB;
	border-radius: 2vw;
	background-color: #faf8ee;
	padding: 1.5vw;
	transition-property: background;
    transition-duration: .5s;
    transition-timing-function: linear;
  }

  .text{
	width:90%;
	margin-bottom: 1rem;
	font-family: glockgrotesque;
	font-size: 18px;
	line-height: 14px;
	padding: 2.5vw;
	border: 1.5px solid #FFD500;
	border-radius: 10px;
	background-color: #005bbb;
  }

  .text:hover{
	width:90%;
	margin-top: 1rem;
	font-family: glockgrotesque;
	font-size: 24px;
	line-height: 30px;
	border: 1.5px solid #FFD500;
	border-radius: 10px;
	background-color: #005bbb;
  }

  .bg{
	font-size: 20px;
	color:#ffffff ;
}

 }