@charset "UTF-8";

.divtop {
	width: 80%; /* div takes up 80% of the screen */
	margin: 15px auto 20px auto;
	overflow: auto;
}

h1 {
	font-family: StoryScript;
	font-size: 3em;
	animation: 1s fadeInUp;
}

h2 {
	font-family: StoryScript;
	font-size: 2.25em;
	animation: 1s fadeInUp;
}

img{
	max-width:100%;
	height: auto;
  	margin: 0 auto;
}

.imgcommunity {
	margin-top: 10px;
}

.floatright {
	float: right;
	width: 45%;
	font-size: 2em;
	margin-right: 15px;
}

h2.centered {
  text-align: center;
  clear: both; /*W3Schools*/
}


@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.centered {
	text-align: center; /*centers the element*/
}

p.centered{
	font-size: 1.7em; /* text size */
}

.text_background {
	background-color: lightgray; /* makes the background a light gray */
}

.bold {
	font-weight: bold; /* makes the text bold */
}

.text_color { /* color of text */
	color: #1D1D1F;
}

/* This shadow was made with the help of https://www.w3schools.com/ */
.curvedshadowborder {
	border-radius: 30px; /*rounded edge */
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	/* dimensions and size of shadow */
	padding: 10px;
}

.curvedborder {
	border-radius: 30px; /*rounded edge */
}

/* was made with the help of https://stackoverflow.com/questions/40733290/left-half-rounded-border */
.leftcurvedborder { /* makes the left border of the element rounded */
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.rightcurvedborder { /* makes the right border of the element rounded */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.divnav {
	z-index: 1000;
	position: fixed; /* keeps it stuck to the top */
	top: 0;
	margin-top: 10px;
	width: 100%;
	justify-content: center;
	display: flex;
}

/* Makes the navigation bar at the top of the website */
ul {
	list-style-type: none; /* removes the default bullet */
	margin: 0;
	padding: 0px;
	overflow: auto; /* scroll bar only if needed */
}

ul li {
	float: left;
}

ul li a {
	color: black; /* text color */
	text-decoration: none; /* no underline */
	font-family: DynaPuff; /* font */
	padding: 14px 16px;
	display: block;
	animation: 1s fadeInUp; /* animation */
}

ul li a:hover { /* changes color when the user hovers over it */
	background-color: darkgray;
	transform: scale(1.05);
}

.active {
	/* changes color based on whether the user is on the page or not */
	background-color: gray;
}

body {
	background-color: #bc8e86; /* color of the background */
	padding-top: 70px;
}

/* carousel container */
.carousel {
	width: 90%; /* full width of container*/
	max-width: 575px; /*No more than 800px*/
	overflow: hidden; /*hide overflowing slides*/
}

.imgcarousel {
	border-radius: 30px;
	width: 100%;
	height: auto;
	flex-shrink: 0; /*prevent images from shrinking */
}

.slides{
	display: flex;
	transition: transform 0.5s ease;
	/* smooth sliding animation over half a second */
}

p{ /* defines the styling for the paragraphs */
	font-family: Delius; /* font */
	font-size: 1.7em; /* text size */
	padding:10px 40px;
	animation: 1.5s fadeInUp; /* animation */
}

.karate_section {
  display: flex;
  flex-wrap: wrap; /* allows stacking on small screens */
  align-items: flex-start; /* aligns text to the top of the images */
  gap: 40px; /* space between carousel and text */
}

.karate_section p {
  width: 45%; /* text takes 45% */
  text-align: left;
}

@media (max-width: 768px) {
  .floatright, 
  .karate_section p {
    width: 100%;
    float: none;
    text-align: center;
  }
}


/* the fonts */
@font-face {
	font-family: StoryScript;
	src: url(Fonts/StoryScript-Regular.ttf);
}

@font-face {
	font-family: Delius;
	src: url(Fonts/Delius-Regular.ttf);
}

@font-face {
	font-family: DynaPuff;
	src: url(Fonts/DynaPuff-Regular.ttf);
}