/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   /* Alegreya - Variable Font */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/Alegreya-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/Alegreya-Italic-VariableFont_wght.ttf') format('truetype');
}

/* IBM Plex Mono - Bold */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700; /* 700 entspricht Bold */
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');
}

/* Falls du auch die normale Version hast, füge sie so hinzu: */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400; /* 400 entspricht Regular */
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
}

body {
  background-color: white;
  font-family: IBM Plex Mono;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:32px;
  background-color: #FFFFF1;
  color:#E6663D;
  font-size: clamp(14px, 1.5vw + 10px, 16px);
  font-weight:500;
  flex-direction: column;

}

header {
  max-width:512px;
  width: 100%;
  position:relative;
}
header nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom:32px;
   padding: 0 24px;
}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width:100%;
  padding:0;
}

header nav ul li .linkActive{
  font-weight:700;
}


main{
  max-width:512px;
  width: 100%;          
  padding: 0 24px;      
  box-sizing: border-box; 
  margin-bottom:32px;
}


#logo{
  display: flex;
  justify-content: center;
}
img{
  width: clamp(80px, 20vw, 158px); 
  height: auto; 

  display: block; 
  margin: 0 auto 12px auto; 
}
#headings{
  rotate:-4deg;
  margin-bottom:40px;
}
h1{
  font-family: Alegreya;
  font-weight: 900;
  font-size: clamp(40px, 10vw, 96px); 
  line-height:1;
  margin:0;
  text-align: center;
}

h2{
  font-family: IBM Plex Mono;
  font-size: clamp(18px, 4vw, 24px);
  margin:0;
  text-align: center;
}

p{
  line-height:150%;
}

#btn {
  margin-top:48px;
  display:block;
  text-decoration: none;
  padding:24px;
  background-color:#FFFFF1;
  color:#E6663D;
  border:2px solid #E6663D;
  font-size: clamp(14px, 1.5vw + 10px, 18px);
  font-weight:700;
  font-family: IBM Plex Mono;
  border-radius: 5px;
  text-align:center;
  transition-timing-function: ease-in;
  transition: 0.2s;

}
#btn:hover{
  background-color:#E6663D;
  color:#FFFFF1;
}

footer{
  display: flex;
  justify-content: center;
  width:512px;
}

nav a{
  color:#E6663D;
}