@charset "utf-8";
/* CSS Document */

body {
  padding: 0; margin: 0;
  font-family: 'Lexend', sans-serif;
  color: white;
  font-size: 1em;
  line-height: 1.75em;
	
  background-image: url('../images/background_blue.jpg');
  background-color: #0e0158; /* Fallback blue background color */
  background-position: center center; /* Center the background image */
  background-repeat: no-repeat; /* Do not repeat the background image */
  background-attachment: fixed; /* Make the background image fixed (non-scrolling) */
  background-size: cover; /* Scale the background image to be as large as possible */
}



h1 {
	font-family: 'Caveat', cursive;
	font-weight: normal;
}

h2 {
	font-family: 'Caveat', cursive;
}

h3 {
	margin: 0; padding: 0;
	color: goldenrod;
}

table {
	margin: 0; padding: 0;
	border: 2px solid black;
	width: 50%;
	border-spacing: 0;
}

table h2 {
	font-family: 'Lexend', sans-serif;
	font-weight: 200;
	font-size: 1.25em;
	text-transform: uppercase;
	margin: 0; padding: 0;
	text-align: center;
	letter-spacing: .3em;
}

th {
	padding: 3px 10px;
	background-color: #333;
	text: white;
	text-transform: uppercase;
	border: 1px solid black;
}

td {
	text-align: center;
	padding: 3px 10px;
	border: 1px solid black;
	background-color: rgba(0,0,0,0.35);
}

td a {
	color: white;
}

.description {
	text-align: left;
	font-weight: 200;
	font-size: .75em;
	line-height: 1.4em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical;
	color: white;
	background-color: rgba(0,0,0,0.5);
}

textarea {
	width: 453px;
}

input[type="submit"] {
  background-color: #E0890B;
  color: white;
  padding: 12px 40px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
	text-transform: uppercase;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}

input[type="submit"]:hover {
  background-color: #FFB53D;
}


#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index: -100; /* Make sure the video is under your content */
}

#video-background video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* This will cover the entire screen at all times */
}


.content-container {
  position: relative;
  padding: 30px; /* Adjust padding as needed */
  margin: 0 auto; /* Center the container horizontally */
  width: 90%;
}


.content-container a:link {
	color:#FFFFFF;
}

.content-container a:visited {
	color: #7DA0D0;
}


.content-container a:hover {
	font-weight: bold;
}

.content-container h1 {
	font-size: 2em;
	letter-spacing: -0.02em;
	text-align: center;
}

.content-container h3 {
	font-size: 2.5em;
	padding-bottom: 0.5em;
}

.content-container p {
	width: 100%;
	margin: 0px 0px 1.5em 0px;
	font-size: 2em;
	line-height: 1.5em;
	font-weight: 200;
	hyphens: none;
	/* text-indent: 1em; */
}

.darkbackground {
	background-color: rgba(0,0,0,0.5);
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: #333; /* Set the background color of the top bar */
  z-index: 100;
  padding: 10px 0;
  border-bottom: black solid 2px;
}

.top-bar h1 {
	margin: 0;
	font-size: 2.25em;
	padding-left: 20px;
	display: inline;
	font-family: 'Lexend', sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.top-bar h1 a {
	text-decoration: none;
	color: white;
}

.top-bar h1 a:hover {
	color: darkgray;
}

.top-bar h2 {
	visibility: hidden;
	font-size: 2em;
	padding-left: 20px;
	display: inline;
	color: #7A7A7A;
	visibility: hidden;
}

.menuButton {
	text-transform: uppercase;
}

.menu-container {
  position: absolute;
  top: 10px;
  right: 20px;
}

.popup-menu {
  display: none;
  position: absolute;
  right: 0; /* Set the right position to 0 */
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  width: 250px;
}

.menu-container:hover .popup-menu {
  display: block;
}

.popup-menu a {
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  display: block;
  padding: 3px 10px;
  background-color: darkgoldenrod;
  border-bottom: 1px solid #000;
}

.popup-menu a:hover {
  color: white;
	background-color: goldenrod;
}

.headshot {
	position: absolute;
	bottom: 0;
	right: 0;
}

.rightColumn {
	position: static;
	/*
	top: 220px;
	right: 0px;
	width: 300px;
	*/
}

#AIAssistants {
	width: 100%;
}

#AIAssistants h2 {
	margin: 0; padding: 0;
	font-family: 'Lexend', sans-serif;
}

#AIAssistants h3 {
	margin: 0; padding: 0;
	color: goldenrod;
	font-style: italic;
	font-weight: normal;
	font-size: 0.85em;
}

#AIAssistants img {
	width: 100%;
}

#AIAssistants p {
	margin: 0; padding: 0;
	font-size: .85em;
	line-height: 1.60em;
	width: 100%;
	padding-bottom: 20px;
}

#AIAssistants p a {
	color: white;
	font-style: italic;
}

#latest-post {
	width: 300px;
	padding-bottom: 50px;
}


#latest-post h2 {
	margin: 0; padding: 0;
	font-family: 'Lexend', sans-serif;
}

#latest-post h3 {
	margin: 0; padding: 0;
	color: goldenrod;
	font-style: italic;
	font-weight: normal;
	font-size: 0.85em;
}

#latest-post img {
	width: 100%;
}

#latest-post p {
	margin: 0; padding: 0;
	font-size: .85em;
	line-height: 1.60em;
	width: 100%;
}

#latest-post p a {
	color: white;
	font-style: italic;
}

#latest-videos {
	position: relative;
	width: 100%;
	text-align: center;
}

#latest-videos a h4 {
	text-decoration: none;
	border-bottom: none;
	color: white;
}

.twitchSchedule {
	margin-bottom: 20px;
}


.twitchSchedule table {
	width: 100%;
}

.upcomingEvents table {
	width: 100%;
}

.roundedImage {
	border-radius: 20px;
	border: black solid 4px;
}

.youTubeThumbnail {
	border-radius: 10px;
	border: black solid 2px;
}

.youTubeFeature {
	
}

.youTubeFeature h4 {
	margin: 0px 0px 40px 0px;
	padding: 0px 20px;
	font-size: .75em;
	font-weight: normal;
	font-style: italic;
	line-height: 1.5em;
}

.largeGroup {
    position: relative;
    width: 100%;
    /* height: 50vh; */ /* vh is a unit representing 1% of the viewport's height */ 
	/* height: 10%; */
    overflow: hidden;
}

.largeGroup img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.presentations{
	padding: 0; margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.resource {
	flex: 0 0 auto;
	width: 350px;
	padding: 10px 10px 30px 10px;
}

.resourceTable {
	width: 100%;
}

.resource iframe {
	border: 2px solid black;
}

.resource h3 {
	padding: 0; margin: 0;
	text-align: center;
	line-height: 1.2em;
}

.resource h4 {
	padding: 0; margin: 0;
	font-size: 0.90em;
	font-weight: normal;
	font-style: italic;
	text-align: center;
	line-height: 1.2em;
	color: goldenrod;

}

.resource p {
	width: 100%;
	padding: 0; margin: 0;
	font-size: .75em;
	line-height: 1.5em;
}


.logos {
  display: flex;
	width: 70%;
	margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.logos img {
	padding: 10px 20px;
	margin: 0 auto;
}

.footer {
	font-size: 0.75em;
	padding-bottom: 50px;
	font-weight: 200;
	text-align: center;
}

.footer p {
	padding: 0; margin: 0;
	width: 100%;
}


/* --------------------------- HEADLINES ------------------------------------*/
.welcomeToToddworld h1, .meetTodd h1, .connectCreate h1, .ideasInspiration h1, .sparkingImagination h1, .sayHello h1, .thankYou h1 {
	font-family: 'Lexend', sans-serif;
	text-transform: uppercase;
	/*letter-spacing: -1px; */
}

.welcomeToToddworld {
	position: relative;
	width: 100%;
	height: 90px;
	text-align: left;
	text-transform: uppercase;
	margin-top: 50px;
}

.welcomeToToddworld .welcome {
	top: 0px;
	left: 0px;
	color: goldenrod;
	position: absolute;
	font-weight: 900;
}

.welcomeToToddworld .toddworld {
	top: 33px;
	left: 0px;
	position: absolute;
	font-weight: 200;
	font-size: 1.9em;
}

.meetTodd {
	position: relative;
	width: 100%;
	height: 100px;
	text-align: left;
	text-transform: uppercase;
}

.meetTodd h1 {
	position: absolute;
	font-weight: 200;
	font-size: 4em;
}

.meetTodd .meet {
	top: 0px;
	left: 0px;
	color: goldenrod;
	font-weight: 900;
}

.meetTodd .todd {
	top: 0;
	left: 0px;
	color: white;
	font-weight: 200;
}

.sayHello {
	position: relative;
	width: 100%;
	height: 50px;
	
	text-transform: uppercase;
}

.sayHello h1 {
	text-align: left;
	font-weight: 200;
	font-size: 4em;
}

.sayHello .say {
	top: 0px;
	left: 0px;
	font-weight: 900;
	color: goldenrod;
	position: absolute;
}

.sayHello .hello {
	position: absolute;
	top: 0;
	left: 140px;
}

.connectCreate {
	position: relative;
	width: 100%;
	height: 130px;
	text-align: left;
	text-transform: uppercase;
}

.connectCreate .connect {
	top: 20px;
	left: 0px;
	color: goldenrod;
	position: absolute;
	font-size: 1.5em;
	font-weight: 900;
}

.connectCreate .create {
	top: 64px;
	left: 0px;
	font-size: 1.95em;
	text-transform: uppercase;
	font-size: 2.5em;
	font-weight: 200;
	position: absolute;
}

.ideasInspiration {
	position: relative;
	width: 100%;
	height: 120px;
	text-align: left;
	text-transform: uppercase;
}

.ideasInspiration .ideas {
	top: 20px;
	left: 0px;
	font-size: 1.5em;
	position: absolute;
	color: goldenrod;
	font-weight: 900;
}

.ideasInspiration .inspiration {
	top: 57px;
	left: 0px;
	font-weight: 200;
	text-transform: uppercase;
	font-size: 1.75em;
	position: absolute;
}

.sparkingImagination {
	position: relative;
	width: 100%;
	height: 120px;
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sparkingImagination .sparking {
	top: 20px;
	left: 0px;
	font-size: 1.5em;
	position: absolute;
	font-weight: 900;
	color: goldenrod;
}

.sparkingImagination .imagination {
	top: 56px;
	left: 0px;
	font-weight: 200;
	text-transform: uppercase;
	font-size: 1.75em;
	position: absolute;
}

/* ----------------------- IMAGES --------------------------------*/
.meetToddImg1 {
	position: relative;
	top: 0px;
	right: 0px;
	width: 95%;
	/*width="532" height="400"*/
}

.sparkImg1 {
	position: absolute;
	top: 160px;
	right: 0px;
	
}

.sparkImg2 {
	position: relative;
	width: 95%;
	/*width="500" height="402"*/
}


.treble {
	position: absolute;
	top: 80px;
	left: 30px;
}

.playingCard, .aniballs, .book {
	position: absolute;
	visibility: hidden;
}

.bulb, .brainstorm, .lab, .controllerNew, .playingPiece {
	position: absolute;
	visibility: hidden;
}

.bear {
	visibility: hidden;
	position: absolute;
}

.joystick {
	position: absolute;
	top: 400px;
	left:-300px;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	
	
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	
	.content-container p {
		font-size: 1em;
	}
	
	.popup-menu {
	  /*width: 400px;*/
	}
	
	input[type="submit"] {
		margin-top: -50px;
		margin-left: 170px;
	}
	
	#latest-videos {
		position: absolute;
		top: 200px;
		right: 0px;
		width: 400px;
		text-align: center;
		border-left: 2px dashed rgba(255,255,255,0.25);
	}
	
	
	.rightColumn {
		position: absolute;
		top: 220px;
		right: 0px;
		width: 300px;
	}
	
	.resourceTable {
		width: 50%;
	}
	
	.upcomingEvents table {
		width: 50%;
	}

	
	.sparkImg2 {
		position: absolute;
		top: 230px;
		right: 0px;
		width: 500px;;
	/*width="500" height="402"*/
	}

	.top-bar h2 {
		visibility: visible;
	}
	
	.content-container {
	  position: relative;
	  padding: 60px 0px; /* Adjust padding as needed */
	  margin: 0 auto; /* Center the container horizontally */
	  max-width: 1200px; /* Set a maximum width for the container */
	}
	
	.content-container h1 {
		font-size: 3em;
		letter-spacing: -0.02em;
		text-align: center;
	}
	
	.content-container h3 {
		font-size: 1.5em;
	}
	
	.content-container p {
		width: 50%;
		margin: 0px 0px 1.5em 0px;
		font-weight: 200;
		/* text-indent: 1em; */
		hyphens: none;
	}
	
	
	.welcomeToToddworld {
		position: relative;
		width: 100%;
		height: 120px;
		text-align: left;
		text-transform: uppercase;
		margin-top: 0px;
	}

	.welcomeToToddworld .welcome {
		top: 0px;
		left: 0px;
		color: goldenrod;
		position: absolute;
		font-weight: 900;
	}

	.welcomeToToddworld .toddworld {
		top: 50px;
		left: 0px;
		position: absolute;
		font-weight: 200;
		font-size: 1.9em;
	}
	
	.sayHello .hello {
		position: absolute;
		top: 0;
		left: 100px;
	}
	
	.connectCreate {
		position: relative;
		width: 100%;
		height: 120px;
		text-align: left;
		text-transform: uppercase;
	}
	
	.connectCreate .connect {
		top: 0px;
		left: 0px;
		color: goldenrod;
		position: absolute;
		font-weight: 900;
	}

	
	.connectCreate .create {
		top: 50px;
		left: 0px;
		font-size: 1.5em;
		text-transform: uppercase;
		font-weight: 200;
		position: absolute;
	}
	
	.ideasInspiration .ideas {
		top: 0px;
		left: 0px;
		font-size: 1.5em;
		position: absolute;
		color: goldenrod;
		font-weight: 900;
	}

	.ideasInspiration .inspiration {
		top: 55px;
		left: 0px;
		font-weight: 200;
		text-transform: uppercase;
		font-size: 1.75em;
		position: absolute;
	}
	
	.sparkingImagination .sparking {
		top: 0px;
		left: 0px;
		font-size: 1.5em;
		position: absolute;
		font-weight: 900;
		color: goldenrod;
	}

	.sparkingImagination .imagination {
		top: 56px;
		left: 0px;
		font-weight: 200;
		text-transform: uppercase;
		font-size: 1.75em;
		position: absolute;
	}
	
	.footer p {
		width: 100%;
	}
	
	.resource p {
		width: 100%;
	}
	
	.meetToddImg1 {
		position: absolute;
		top: 160px;
		right: 0px;
		width: 532px;
		/*width="532" height="400"*/
	}
	
	.twitchSchedule {
		margin-bottom: 20px;
		width: 50%;
	}
	
	.bulb, .brainstorm, .lab, .controllerNew, .playingPiece {
		visibility: visible;
	}
	
	.bulb {
		position: absolute;
		top: 290px;
		right: -140px;
	}

	
	.brainstorm {
		position: absolute;
		top: 850px;
		right: 205px;
	}

	.lab {
		position: absolute;
		top: 1750px;
		right: 0px;
	}

	.controllerNew {
		position: absolute;
		top: 1800px;
		left: -200px;
	}

	.playingPiece {
		position: absolute;
		top: 2200px; 
		right: 260px;
	}
	
	.bear {
		position: absolute;
		top:  950px;
		right: 380px;
		visibility: visible;
	}
	
	.playingCard {
		position: absolute;
		top: 590px;
		right: -60px;
	}


	.aniballs {
		position: absolute;
		top: 1100px;
		left: -170px;
	}

	.book {
		position: absolute;
		top: 1000px;
		right:-100px;
	}
	
}