/* reset */
* {
 box-sizing: border-box; margin: 0; padding: 0; 
 }

/* body + layout */
body{
  min-height: 100vh;
  width: 100%;
  background-color: white;
  font-family:"Lato";
  text-align: center; 
}

a{
text-decoration: none;
color:black;
}

#dis{

}
/* main container */
#main{
  width: 95vw;
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 0 40px; /* top padding to make room for fixed nav */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* FIXED NAVBAR - use top, not margin */
#nav{
  position: fixed;
  top: 0px;                    /* distsance from top of viewport */
  left: 50%;
  transform: translateX(-50%);
  height: 64px;                 /* fisxed navbar height */
  width: 95vw;
  max-width: 1100px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 12px;
  border-radius: 4px;
  z-index: 1000;
}

/* use class for buttons */
.nav-btn{
  color: black;
  height: 40px;
  padding: 0 14px;
  background: blue;
  border: 1px solid black;
  cursor: pointer;
  font-family: sans-serif;
  border-radius: 8px;
}

.nav-btn:hover{
  background: rgba(255,255,255,0.06);
  border: 1px solid #fff;
}

/* logo and hero */
#logom { display:block; }

/* images: scale responsively */
#images {
  width: 90vw;
  max-width: 900px;
  border:1px solid black;
  height: auto;
}

#images img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* download button */
#downloadbtn{
  color: white;
  background-color: #499DCC;
  border:0px solid black;
  border-radius: 9px;
  
  padding: 16px 39px;
  margin-top:4vh;
}

#downloadbtn:hover{
    background-color: #1ACC84;
}

#un {
    position: relative; /* Positioning context for pseudo-element */
    text-decoration: none; /* Remove default underline */
}

#un::after {
    content: '';
    position: absolute;
    width: 100%; /* Full width of the text element */
    height: 2px; /* Thickness of the underline */
    background-color: #5BB8FF; /* Underline color */
    bottom: -8px; /* Adjust this value for space below the text */
    left: 0; /* Start from the left */
}



#cico {
    display: flex; /* Enables Flexbox */
    flex-wrap: wrap; /* Items will wrap to the next line */
    justify-content: center; /* Center items */
    gap: 20px; /* Space between items */
    padding: 20px; /* Optional padding */
}

#loves,#theme,  #art {
    background-color: white; /* Background color */
    color: black; /* Text color */
    padding: 20px; /* Padding for items */
    border-radius: 5px; /* Rounded corners */
    min-width: 200px; /* Minimum width for responsive design */
    text-align: center; /* Center text */
    flex: 1 1 200px; /* Flexible item that will shrink and grow */
}

.d{
    background-color: white; /* Background color */
    color: #93C6FF; /* Text color */
    padding: 20px; /* Padding for items */
    border-radius: 5px; /* Rounded corners */
    min-width: 200px; /* Minimum width for responsive design */
    text-align: center; /* Center text */
     
    background: url("2.png");
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1 1 200px; /* Flexible item that will shrink and grow */
}



.rir,.theme,.art, .tele, .re, .dis {

    font-size:100px;

}


.heart{
    background-color: white; /* Background color */
    color: #93C6FF; /* Text color */
    padding: 20px; /* Padding for items */
    border-radius: 5px; /* Rounded corners */
    min-width: 200px; /* Minimum width for responsive design */
    text-align: center; /* Center text */
     
    background: url("wall4.jpg");
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1 1 200px; /* Flexible item that will shrink and grow */
}


.pic{
    background-color: white; /* Background color */
    color: #93C6FF; /* Text color */
    padding: 20px; /* Padding for items */
    border-radius: 5px; /* Rounded corners */
    min-width: 200px; /* Minimum width for responsive design */
    text-align: center; /* Center text */
     
    background: url("wall3.jpg");
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1 1 200px; /* Flexible item that will shrink and grow */
}

.go{
    background-color: white; /* Background color */
    color: #93C6FF; /* Text color */
    padding: 20px; /* Padding for items */
    border-radius: 5px; /* Rounded corners */
    min-width: 200px; /* Minimum width for responsive design */
    text-align: center; /* Center text */
     
    background: url("g.jpg");
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1 1 200px; /* Flexible item that will shrink and grow */
}

.re:hover {
    color:#FF625B;
    font-size:105px;

}


.dis:hover {
    color:#6A78FA;
    font-size:105px;

}
.tele:hover {
    color:#73B4FA;
    font-size:105px;

}
h2 {
    margin: 10px 0; /* Space above and below the heading */
}



@media (max-width: 710px) {
  #nav { height: 56px; top: 10px; }
  #prem {
      margin-bottom:1vh;
  }
  #main { padding-top: 86px; } /* keep room for nav */
}