@import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


*{padding: 0;margin: 0; font-family: "Montserrat", sans-serif;font-optical-sizing: auto; font-style: normal;}
h1{width: 90%; text-align: center; margin: 0px 0px 0px 0px; font-family: "Libertinus Serif Display", system-ui; font-style: normal; font-size: 40px; font-weight: bold;}
h2{width: 90%; text-align: center; margin: 200px 0px 0px 0px; font-family: "Libertinus Serif Display", system-ui;font-style: normal;font-size: 30px; font-weight: bold;}
h3{width: 90%; max-width: 800px; text-align: left; margin: 70px 0px 50px 0px; font-family: "Libertinus Serif Display", system-ui;font-style: normal;font-size: 20px; font-weight: bold;}
h4{width: 90%; max-width: 800px; text-align: center; margin: 20px 0px 0px 0px; font-size: 16px; font-weight: bold; color: gray;}
.h2{width: 90%; text-align: center; margin: 70px 0px 50px 0px; font-family: "Libertinus Serif Display", system-ui;font-style: normal;font-size: 30px; font-weight: bold; color: black;}
.h2:hover{color: gray;}
p{width: 90%; max-width: 800px; margin: 15px 0px 15px 0px; line-height: 25px;}
note{font-style: italic; font-size: 12px; width: 90%; max-width: 800px; margin: 15px 0px 15px 0px; line-height: 25px;}


a{color: black;}
a:hover{color: gray;}
card-container{display: grid; margin: 50px 0px 50px 0px; gap: 100px; grid-template-columns: 1fr 1fr 1fr;}
@media(max-width: 1200px){card-container{grid-template-columns: 1fr 1fr;}}
@media(max-width: 725px){card-container{grid-template-columns: 1fr;}}

index-page{display: flex; flex-direction: column; align-items: center;}
main{display: flex; flex-direction: column; align-items: center;}


s1{width: 90%; text-align: center; margin: 0px 0px 50px 0px; font-family: "Libertinus Serif Display", system-ui; font-style: normal; font-size: 40px; font-weight:bold;}

s2{width: 90%; max-width: 800px; text-align: left; margin: 250px 0px 50px 0px; font-family: "Libertinus Serif Display", system-ui;font-style: normal;font-size: 35px; font-weight: bold;}
s3{width: 90%; max-width: 800px; text-align: left; margin: 150px 0px 10px 0px; font-family: "Libertinus Serif Display", system-ui;font-style: normal;font-size: 25px; font-weight: bold;}
s4{width: 90%; max-width: 800px; margin: 60px 0px 0px 0px; line-height: 25px; font-weight: bold;}
s5{width: 90%; max-width: 800px; margin: 15px 0px 15px 0px; line-height: 25px;}

b{color: red;}

li{list-style:none; margin: 15px 0px 15px 0px;}
ul, ol{width: 90%; max-width: 800px;}


#dating-blueprint{text-decoration: none; width: 90%; max-width: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#dating-blueprint img{width: 80%; margin-top: 20px;}


div{width: 90%; max-width: 800px; margin: 15px 0px 15px 0px; line-height: 25px;}
input, label{margin-top: 50px;}
input:hover{cursor: pointer;}