@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&family=Lekton:ital,wght@0,400;0,700;1,400&family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coral+Pixels&display=swap');
/* ================ */


@font-face {
  font-family: "Drowner"; /* set name */
  src: url(drowner.otf); /* url of the font */
}

.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lekton-regular {
  font-family: "Lekton", monospace;
  font-weight: 400;
  font-style: normal;
}

.lekton-bold {
  font-family: "Lekton", monospace;
  font-weight: 700;
  font-style: normal;
}

.lekton-regular-italic {
  font-family: "Lekton", monospace;
  font-weight: 400;
  font-style: italic;
}


.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.eb-garamond-<uniquifier> {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
  background-color:#f3f9fa;
}

h2, h3{
    font-family: "Lekton", sans-serif;
    font-weight:400;
    color:#304243;
    letter-spacing:-2px;
}

h1{
  font-family:"Drowner";
  font-size:72px;
  line-height:48px;
  color:#304243;
  letter-spacing: .02em;
}

p{
  font-family: "Lekton", sans-serif;
  font-weight:400;
  color:#304243;
  font-size:16px;
  margin:5px;
}

a {
  font-family: "Lekton", sans-serif;
  font-weight:400;
  color:#985c5c;
  text-decoration: none;
  margin-top:10px;
}

a:hover, a:active{
    color:palevioletred;
    text-decoration:underline;
    transition: transform 180ms ease;
    transform:rotate(3deg);
}

#Links {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom:15px;
    gap:20px;
}

#Links a {
  font-size:16px;
  font-family: "Lekton", sans-serif;
  font-weight:400;
  color:#304243;
  text-decoration:underline;
}

#Links a:hover{
    font-family: "Lekton", sans-serif;
    font-weight:400;
    text-decoration:underline;
    text-decoration-color: lightcoral;
    color:lightcoral;
}

.nav-bar{
  background-color:#f3f9fa;
  position: sticky;
  top:0;
  display:flex;
  flex-direction: column;
  padding:10px;
  align-items: baseline;
  gap:10px;
  /* background-image: url("printer-texture.jpg");*/
}

.nav-bar a:hover{
  text-decoration:none;
}

.company{
  display:grid;
  outline: 2px solid #afd9de;
  margin-top:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}

.company p{
  color:#304243;
  line-height:22px;
}

.company-title{
  text-align: center;
}

.project{
  margin-bottom:20px;
}

.project img {
  width:100%;
  height:auto;
}

.project-content{
  padding-right:10px;
  padding-left:10px;
  margin-bottom:10px;
  padding-bottom:5px;
  background-color:white;
  outline: 1px solid #afd9de;
}

.project-title h2{
  margin-top:0px;
  margin-bottom:5px;
}

.project-images {
  gap:10px;
  padding-bottom:10px;
}

.project-title{
  padding-top:0px;
  
}

.project h2 {
  margin-top:10px;
}

.project-description p {
  margin-top:0px;
}

.changing-text {
  font-family: sans-serif;
  font-size: 16px;
  line-height:32px;
}

/* Style the dynamic text placeholder */
.dynamic-word::before {
  content: "Websites"; /* Fallback / Initial word */
  font-weight: bold;
  
  /* Bind the animation: 6 seconds total, looping infinitely */
  animation: switchText 6s infinite; 
}

/* Define the text swapping intervals */
@keyframes switchText {
  0%, 33.33% {
    content: "(づ๑•ᴗ•๑)づ♡";
  }
  33.34%, 66.66% {
    content: "(˶ᵔ ᵕ ᵔ˶) ‹𝟹";
  }
  66.67%, 100% {
    content: "(*ᴗ͈ˬᴗ͈)ꕤ*.ﾟ";
  }
}

/*==================================================================================================================================================================================*/

@media screen and (max-width:768px){

h1 {
  font-size:56px;
  margin-bottom:0px;
  margin-top:5px;
  padding-right:0px;
}

h2 {
  margin-top:0px;
  margin-bottom:5px;
}

.nav-bar{
  padding:10px;
  z-index: 2;
  outline: 2px solid #afd9de;
  box-shadow: 0 0 10px #83a8ac;
}

.nav-bar h2 {
  align-self: flex-end;
}

.nav-bar img{
    display:none;
}

.subtitle{
  display:none;
}

#Links a {
  font-size:16px;
  padding-left:10px;
}

.changing-text h2 {
  font-family: sans-serif;
  font-size:36px;
  line-height:24px;

}

#rebrand, #video, #installations, #social, #print {
   font-size: 28px;
}

.project-title{
  padding-top:5px;
}

.project-description p {
  padding-bottom:5px;
  margin-top:0px;
}

iframe {
  z-index: 1;
}
}

@media (min-width: 768px) and (max-width:1350px) {
.subtitle-flowers{
  display:none;
}

}

@media screen and (min-width: 1350px) {


body{
  display:flex;
  flex-direction: row;
}

h1{
  letter-spacing:6px;
  line-height:56px;
  margin:5px 0px 5px 0px;
}

h2{
  margin:5px 0px 5px 0px;
}

#back-link{
  display:none;
}

.nav-bar{
  height:100%;
}

.changing-text {
  font-family: sans-serif;
  font-size: 2rem;
  line-height:36px;
  margin-bottom: 10px;
}

.subtitle-flowers{
  display:none;
}

.company{
  padding:10px;
  margin:10px;
}

.project{
  display:grid;
  grid-template-columns:auto;
  padding-left:5px;
}

.project h2 {
 margin-top:10px;
 margin-left:5px;
 
}

.project-images{
   /* Allows images to break onto a new line */
  gap: 12px;       /* Spacing between images */
}

.project img{
width:49%;
height:auto;
object-fit: cover; /* Initial state */
}

.project img:hover{
  object-fit:contain;
}

}