Niestandardowa czcionka a Bootsrap

Witajcie. Tworzę stronę z bootstrapem i mam problemy z czcionką. Używam "Century Gothic" oraz "MedievalSharp". Problem w tym, że czcionka, w moim mniemaniu powinna się za sprawą samego bootsrapa zmniejszać sama, a tego nie robi. Muszę dopiero wpisać odpowiednie @media żeby działało ale nie sądze, żeby to było konieczne. Pytanie do Was, czy robię coś, źle czy może powinienem cos zrobić jeszcze z czcionką bądź bootstrapem? Budzi to moje wątpliwości ponieważ widziałem, że u Pana Zelenta to działało bez @media. Pozdrawiam.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<title>Pod Rozbrykanym Kucykiem</title>
	<meta name="description" content="Encyklopedia Świata J.R.R. Tolkiena"/>
	<meta name="keywords" content="Tolkien, J.R.R. Tolkien, Wladca Pierscieni, Hobbit, Silmarillion, Pierscien"/>
	<meta name="author" content="Kacper Daniel"/>
	
	
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="main.css">
	<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;900&family=MedievalSharp&display=swap" rel="stylesheet">
	
</head>

<body>
	
	<div class="col-md-10 mx-auto page">	
		
		<div class="container-fluid">
						
			<div class="row">	
		
				<header class="col-md-12">
				
					<div class="col-md-12 logo">
						Pod Rozbrykanym Kucykiem 
					</div>
							
					<nav class="col-md-12">
						<a href="O-tolkienie.html">
							<div class="col-md-4 option">
								O Tolkienie
							</div>
						</a>
						
						<a href="O-swiecie-tolkiena.html">
							<div class="col-md-4 option">
								O Świecie Tolkiena
							</div>
						</a>
							
						<a href="Ksiazki.html">
							<div class="col-md-4 option">
								Książki
							</div>
						</a>
								
						<div style="clear:both"></div>
					</nav>
				
				</header>
		
				<main class="col-md-12 content">
			
					<div class="bgchapters">
					
						<section class="col-md-12 pre">
								
							<div class="txtbox">
								<span class="txtpre">Ah, Witaj!</span><br/>
									
								Oczekiwałem Cię.<br/>
								Proszę, przysiądź się <br/>
								i posłuchaj historii <br/>
								z fantastycznego świata<br/>
								Johna Ronalda Ruela Tolkiena
							</div>
							
							<img class="img-fluid mt-2" src="img/Gandalfaf.png"/>
							
							<div style="clear:both;"></div>
							
						</section>		
							
						<div class="col-md-12 line"></div>
						
						<article class="col-md-12 px-5">
						
							<div class="col-md-4 cookie">
								<div class="image">
									<div class="overlay">
										<a href="https://ksiazki.wp.pl/john-ronald-reuel-tolkien-6149078679758465c" target="_blank">
										<img class="img-fluid" src="img/Tolkien.jpg"/></a>
										<a class="link" href="https://ksiazki.wp.pl/john-ronald-reuel-tolkien-6149078679758465c" target="_blank"><p>W górę rzeki, do źródła</p></a>	
									</div>
								</div>
							</div>	
									
							<span class="bigtitle">O Tolkienie słów kilka</span>
								
							<p>Urodził się 3 stycznia 1892 w Bloemfontein w Oranii. Był brytyjskim pisarzem oraz profesorem filologii klasycznej i literatury staroangielskiej na University of Oxford. Jako autor powieści Władca Pierścieni, której akcja rozgrywa się w mitycznym świecie Śródziemia, spopularyzował literaturę fantasy.</p>
							
							<p>
							Jest autorem wielu dzieł rozgrywających się w Śródziemiu: powieści Hobbit, czyli tam i z powrotem, Władca Pierścieni, Silmarillion,  oraz kilku krótkich form, opowiadań niezwiązanych lub luźno związanych z wielką mitologią, tzw. Legendarium Śródziemia, zawartej w 12-tomowej History of the Middle-earth, opracowanej i wydanej przez Christophera Tolkiena).</p>
								
							<p>
							Opublikował ponad 100 prac z dziedziny filologii i literatury dawnej, współpracował przy powstaniu największego słownika języka angielskiego, wydawanego zaraz po I wojnie, Oxford English Dictionary. Znał (w różnym stopniu) ponad 30 języków m.in. łacinę, nordycki, staroislandzki, anglosaski czy staroirlandzki.</p>
					
							Zmarł 2 września 1973 w Bournemouth</p><br/>
									
						</article>
						
						<div class="col-md-12 headery">Galeria Zdjęć</div>
						
						<section class="col-md-12 gallery">
					
							<div class="col-md-4 col-sm-2 cookie">
								<div class="image">
									<div class="overlay">
										<a href="https://play.howstuffworks.com/quiz/silmarillion-quiz" target="_blank"><img class="img-fluid" src="img/Tolkien5.jpg"/></a>
										<a class="link" href="https://play.howstuffworks.com/quiz/silmarillion-quiz" target="_blank"><p>W górę rzeki, do źródła</p></a>
									</div>
								</div>
							</div>
										
							<div class="col-md-4 col-sm-2 cookie">
								<div class="image">
									<div class="overlay">
										<a href="https://lubimyczytac.pl/autor/3216/j-r-r-tolkien" target="_blank"><img class="img-fluid" src="img/Tolkien2.jpg"/></a>
										<a class="link" href="https://lubimyczytac.pl/autor/3216/j-r-r-tolkien" target="_blank"><p>W górę rzeki, do źródła</p></a>
									</div>
								</div>
							</div>
							
							<div class="col-md-4 col-sm-2 cookie">
								<div class="image">
									<div class="overlay">
										<a href="https://www.amazon.com/J-R-R-Tolkien-English-Authors-Posters/dp/B005A0N3YK" target="_blank"><img class="img-fluid" src="img/Tolkien3.jpg"/></a>
										<a class="link" href="https://www.amazon.com/J-R-R-Tolkien-English-Authors-Posters/dp/B005A0N3YK" target="_blank"><p>W górę rzeki, do źródła</p></a>	
									</div>
								</div>
							</div>
							
							<div class="col-md-4 col-sm-2 cookie">
								<div class="image">
									<div class="overlay">
										<a href="https://www.norsemyth.org/2015/07/tolkien-archives-at-wheaton-college.html" target="_blank"><img class="img-fluid" src="img/Tolkien7.jpg"/></a>
										<a class="link" href="https://www.norsemyth.org/2015/07/tolkien-archives-at-wheaton-college.html" target="_blank"><p>W górę rzeki, do źródła</p></a>	
									</div>
								</div>
							</div>
								
							<div class="col-md-4 col-sm-2 cookie">				
								<div class="image">
									<div class="overlay">
										<a href="https://www.catholicgentleman.net/2015/07/tolkien-speaks-the-secret-to-a-happy-marriage/" target="_blank"><img class="img-fluid" src="img/Tolkien6.jpg"/></a>
										<a class="link" href="https://www.catholicgentleman.net/2015/07/tolkien-speaks-the-secret-to-a-happy-marriage/" target="_blank"><p>W górę rzeki, do źródła</p></a>	
									</div>
								</div>
							</div>
									
							<div class="col-md-4 col-sm-2 cookie">		
								<div class="image">
									<div class="overlay">
										<a href="http://www.tolkienlibrary.com/press/1152-tolkien-writings-to-understand-rules-of-life.php" target="_blank"><img class="img-fluid" src="img/Tolkien4.jpg"/></a>
										<a class="link" href="http://www.tolkienlibrary.com/press/1152-tolkien-writings-to-understand-rules-of-life.php" target="_blank"><p>W górę rzeki, do źródła</p></a>	
									</div>
								</div>
							</div>
											
							<div style="clear:both"></div>
						
						</section>
						
						<div class="col-md-12 benicer"></div>
						
					</div>
	
				</main>
					
				<footer class="col-md-12">
					Strona poświęcona wyobraźni Johna Ronalda Ruela Tolkiena | &copy; Wszelkie prawa zastrzeżone 2020 rok<br/>Czas miecza i topora. Czas pogardy i zarazy wszelakiej<p>Kacper 'Ferrow' Daniel</p>
				</footer>
			
			</div>
		
		</div>
		
	</div>	
	
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
	
	<script src="js/bootstrap.min.js"></script>
	
</body>
</html>

body
{

	background-image: url(img/tactile_noise.png);
	font-family: Century Gothic;
	margin: 0;
	font-size:16px;
}

.bgchapters
{
	background-color:#302e2b;
}

.logo
{
	background-color:#966c09;
	font-family: 'MedievalSharp', cursive;
	color:#f2f0eb;
	height:150px;
	padding:20px;
	font-size:80px;
	text-align:center;
	border-bottom: 10px solid #73590d;
	font-weight:900;
}


nav
{
	margin-bottom:50px;
}
.option
{
	background-color:#c78f0e;
	height:70px;
	float:left;
	text-align:center;
	padding: 15px 0px;
	font-size:35px;
	font-family: 'MedievalSharp', cursive; 	
}

.option:hover
{
	background-color:#b67e0d;
	cursor:pointer;
	font-weight:900;
	webkit-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

nav a
{
	color: #ffffff;
	font-weight:500; 
}

nav a:hover
{
	color:#403100;
	font-weight:900;
	webkit-transition: color 0.1s linear;
    -ms-transition: color 0.1s linear;
    transition: color 0.1s linear;
}

.content
{	
	background-color: #403f3c;
	color:#ffffff;
	text-align:justify;
	padding:30px;
	font-size:22px;	
}

.pre
{
	font-size:60px;
	font-family: 'MedievalSharp', cursive;
	padding:50px;
	color:#ffffff;
	background-color:#8c6000;
	border:20px solid #704e02;

}

.pre>img
{
	float:right;
	border:none;
}

.txtbox
{
	float:left;
	margin-left:auto;
	margin-right:auto;
}

.txtpre
{
	font-weight:900; 
	font-size:80px;
}

.line
{
	height:5px;
	border-top: 5px dashed #21201e;
	margin-bottom:70px;
	margin-top:70px;
}

.bigtitle
{
	font-family: 'MedievalSharp', cursive;
	color:#df9f22;
	font-size: 70px;
	font-weight:900;
}

.cookie
{
	float:left;
}

.image
{
	margin-right:20px;
	margin-bottom:20px;
	overflow:hidden;
}

.image img
{
	border: 4px solid #b68e0d;
}

.gallery .image
{
	margin:20px;
}

.overlay
{
	position:relative;
}

.overlay .link
{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-color:#fff;
	left:0px;
	top:0px;
	opacity:0;
	transition: opacity 0.2s ease-in-out;
	font-size:50px;
	text-align:center;
	font-weight:700;
	color:#000000;
}

.overlay:hover .link
{
	opacity:0.7;
	text-decoration:none;
}	

.image img
{
	transition: all 0.5s ease-in-out;
	
}

.image:hover img
{
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
	
}

.image p
{
	display:block;
	position:relative; top:150px;
	
}

.image:hover img
{
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}

.headery
{
	font-family: 'MedievalSharp', cursive;
	color:#df9f22;
	font-size: 70px;
	font-weight:900;
	text-align:center;
	padding:50px 0px;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.overlay .chapter
{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-color:#fff;
	left:0px;
	top:0px;
	opacity:0;
	transition: opacity 0.2s ease-in-out;
	font-size:70px;
	text-align:center;
	font-weight:700;
	color:#000000;
	font-family: 'MedievalSharp', cursive;
	text-decoration:none;
}

.overlay:hover .chapter
{
	opacity:0.7;
	
}

.caption
{
	text-align: center;
	font-size:30px;
	margin:20px;
}

.caption img
{
	border: 4px solid #b68e0d;
}

.book
{	
	position:relative;
}

.book .chapter
{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-color:#fff;
	left:0px;
	top:0px;
	opacity:0;
	transition: opacity 0.2s ease-in-out;
	font-size:50px;
	text-align:center;
	font-weight:700;
	color:#000000;
	font-family: 'MedievalSharp', cursive;
	text-decoration:none;
}

.book:hover .chapter
{
	opacity:0.7;
}	

.frame img
{
	transition: all 0.5s ease-in-out;
}

.frame:hover img
{
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}

.frame p
{
	display:block;
	position:relative; top:150px;
}

.frame
{
	position:relative;
	float:left;
	overflow:hidden;
	margin: 30px 70px;
	border: 4px solid #b68e0d;
}

.vertgallery
{
	width:448px;
	height:auto;
	float:left;
	margin-right:30px;
	margin-top:30px;
}

.vertgallery>.image
{
	margin-bottom:20px;
}

.benicer
{
	height:150px;
}

@media (max-width: 1199px)
{
	.pre
	{
		font-size:30px;
		text-align:center;
	}
	
	.logo
	{
		font-size:40px;
	}
	
	.bigtitle
	{
		font-size: 40px;
	}
	
	.option
	{
		font-size:22px;
		border-bottom:2px solid #73590d;
	}
	
	article
	{
		text-align:center;
	}
	
	.overlay:hover .link
	{
		opacity:0;
	}
	
	.overlay:hover .chapter
	{
		opacity:0;
	}
	.txtpre
	{ 
		font-size:50px;
	}
	.overlay:hover .chapter
	{
		opacity:0;
	}
	.frame:hover .chapter
	{
		opacity:0;
	}
}

footer
{
	background-color:#302f2c;
	color:#ffffff;
	font-size:20px;
	text-align:center;
	padding:15px;
	margin-left:auto;
	margin-right:auto;
	border-top:10px solid #242320;
}

footer p
{
	margin-top:40px;
}

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci