/* 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." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

@font-face { 
	font-family: "AngelicWar"; 
	src: url("./fonts/AngelicWar.ttf") format("truetype") ;
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
  font-synthesis: none;
}

@font-face {
  font-family: "Neue-Haas-Grotesk";
  src: url("./fonts/fonts/neuehaasgrotdisp-45light.otf") format("truetype");
  font-weight: normal;
	font-style: normal; 
	font-display: swap; 
  font-synthesis: none;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

 html {
  background-image: url("./assets/mesh-gradient.png");
    background-image: url("./assets/mesh-gradient.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

header a {
  text-decoration: none;
  color: inherit;
}


/* Header */
header {
  padding: 1em 2em;
  display: flex;
   justify-content: center;
   align-items: center;
}

header img{
  height:5em;
  right: 10em; 
  width: auto;

}

header h1 {
  font-size: 3em;
}

.caption{
 font-family: "Roboto mono";
 color: grey;
 font-size: 1em;
}


/*trying to position image relative to header - this is probably the most inefficient way but positions are confusing me*/

.header_title {
  position: relative;
}

.header_icon {
  position: absolute;
  left:100%;
  right: 3em;
  height:1.7em;
  width: auto;
  margin-left: 3em;

}

/* header contact button with popup*/
.header_button {
  position: absolute;
  left:100%;
  top:35%;
  margin-left: 14em;
 font-family: "Roboto mono";
 font-size: 0.4em;
 white-space: nowrap;
 cursor: pointer;

}

.header_button:hover {
  opacity: 0.6;
}

.mobile-contact-btn {
  display: none;
  align-items: center;
  gap: 0.5em;
}

.mobile-contact-icon {
  height: 3.5em;
  width: auto;
}

/* contact button popup*/

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
  margin: 15% auto;
}

.modal-header {
  background: grey;
  color: #ffffff;
  font-family: "Roboto mono";
  font-size: 13px;
  padding: 8px 12px;
  cursor: move;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.modal-body {
  padding: 20px 16px 12px;
  font-family: "Roboto mono";
  font-size: 12px;
  line-height: 1.7;
  overflow-y: auto;
}

.modal-body p {
  margin: 0 0 16px;
}

.modal-info {
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Roboto mono";
}

.close {
 color: #aaa;
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.scatter-container-mobile {
  display: none;
}

body {
  background-image: url("./assets/mesh-gradient.png");
background-size: cover;
background-position: center;
background-attachment: fixed;

}

h1 {
  text-align: center ;
  font-family:  "AngelicWar"; 
    font-size: 50px;
    	font-weight: normal;
}

h2 {
  font-family:"Roboto Mono", monospace ;
  text-align: center;
    font-size: 30px;
    	font-weight: normal;
}

h3 {
  font-family:"Roboto Mono", monospace ;
    font-size: 18px;
    	font-weight: normal;
}
p {
  font-family:"Roboto Mono", monospace ;
  text-align: center;
  font-size: 14px;

}

p2 {
  font-family:"Roboto Mono", monospace ;
    font-size: 14px;

}

html, body{
  overflow-x: hidden;
  max-width: 100%;
  
}

img {
  max-width:100%;
  height:auto;
  
}

.mobile-contact-btn {
  display: none; 
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 2em;
  }
  
  .header_icon,
  .header_button {
    display: none;
  }
  
  .mobile-contact-btn {
    display: flex;
    position: fixed;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Roboto Mono";
    font-size: 1em;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5em 1em;
    border-radius: 4px;
    text-decoration: none;
    z-index: 999;
  }
}