@font-face {
    font-family: 'comicsans';
    src: url('fonts/COMIC.ttf') format('truetype');
}

.the-title h1 {
    font-family: 'comicsans';
    color: blue;
}

.the-title {
    text-align: center;
    background-color: orange;
	position: sticky;
	z-index: 100;
	top: 0; 
	width: 1366;
	height: 240;
	border: 4px solid blue;
}

.the-title hr {
    color: blue;
    height: 4px;
    background-color: blue;
}

.the-title p {
    color: blue;
    text-align: center;
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.info {
    width: 358px;
    height: 654px;
    border: 4px solid blue;
    overflow: auto;
    background-color: orange;
    border-radius: 15px;
}

.info img {
    padding: 50px;
}

.info p {
    padding: 10px;
    color: blue;
}

.info hr {
    color: blue;
    height: 4px;
    background-color: blue;
}

.info a {
    padding: 10px;
    color: blue;
}

.videos {
    width: 918px;
    height: 654px;
    border: 4px solid blue;
    overflow: auto;
    background-color: orange;
    border-radius: 15px;
}

.videos h2 {
    text-align: center;
    font-family: 'comicsans';
    color: blue;
}

.videos hr {
    height: 4px;
    color: blue;
    background-color: blue;
}

.videos p {
    text-align: center;
    color: blue;
}

.videos iframe {
	padding: 10px;
}

.title-bar {
	background-color: orange;
	position: sticky;
	z-index: 50;
	top: 0; 
}

body {
    background-image: url('https://thechurchofhydration.neocities.org/styles/img/space.gif');
    background-size: cover;          
    background-position: center;     
    background-repeat: no-repeat;    
    height: 100vh;                  
    margin: 0;                       
    padding: 0;                      
    color: orange;                    
    background-color: #000000;
}