@import url(Reset.css);
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
@import url(Grid.css);
#grad1 {
    background: 
    linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
    0 0 / 200% 100%;
    animation: a 5s linear infinite;
}

body{
  background-image:url(Image/googoo.png);
  background-repeat: repeat;
  background-size: 100%;
}
.footed footer{
  height: 35px;
  margin-left: auto;
  margin-right: auto;
  position:fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width:95%;
  border: 5px solid rgb(255, 255, 255,0.6);
  border-top-left-radius:15px ;
  border-top-right-radius:15px ;
  border-bottom: 0px;
  display: flex;
  align-items: center;
}
footer a{
  text-decoration: none;
  color: black;
  width:100%;
  margin: auto;
  text-align: center;
  font-size: 100%;
  transition: background-color 0.3s;
}
html{
    font-family: sora;
}
.start{
    border-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.end{
    border-radius: 15px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
nav a{
    text-decoration: none;
    color: black;
    width:100%;
    background-color: rgb(255, 255, 255, 0.7);
    padding: 15px;
    margin: auto;
    text-align: center;
    font-size: 100%;
    transition: background-color 0.3s;
}

nav a :visited { 
    text-decoration: none;
    color: black;
}
nav a:hover{
    background-color: rgba(255, 255, 255, 0.4);
}
header{
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 15px;
}
header img{
  display: flex;
  width: 20%;
  height: 20%;
  border: 5px solid rgb(255, 255, 255,0.6);
  border-radius: 100%;
  margin: auto;
}
.outside{
  display: flex;
  width: 20%;
  height: 20%;
  border: 5px solid rgb(255, 255, 255,0.6);
  border-radius: 100%;
  transition: border-radius 0.5s, padding 0.3s, border 0.3s;

}
.outside:hover{
  border-radius: 0%;
  border-bottom-right-radius: 15px;
  padding: 0;
  border-top-width:0px ;
  border-left-width:0px ;
}
.inside{
  display: flex;
  width: 20%;
  height: 20%;
  border: 5px solid rgb(255, 255, 255,0.6);
  border-radius: 100%;

}

nav{
    display: flex;
    border: 5px rgb(255, 255, 255,0.6) solid;
    margin-left: auto;
    border-bottom-left-radius: 10px ;
    border-top-right-radius: 0px ;
    margin-right: 0;
    justify-content: space-evenly;
    width: 70%;
    height: 45px;
    padding: 25px;
    background-color: wheat;
    background-color: rgba(0, 0, 0, 0.5);
    border-top-width:0px ;
    border-right-width:0px ;
}
mark{
  background-color: black;
}
.stuff1{
  display: grid;
  grid-template-columns:
  "txt" "img",
  "txt" "img",
  "txt" "img"
  ;
  grid-template-rows: auto;
  gap: 20px;
  width: 60%;
  background-color: rgb(255, 255, 255);
  border: 5px solid black;
  height: auto;
  margin: auto;
}
.footed{
  padding-top: 15px;
}
.thingy{
  width: 60%;
  padding: 15px;
  background-color: rgb(255, 255, 255, 0.6);
  border: 5px solid rgb(255, 255, 255,0.6);
  height: auto;
  margin: auto;
  font-size: larger; 
}
div{
  padding-bottom: 40px;
}
@keyframes colorRotate {
    from {
      color: #6666ff;
    }
    10% {
      color: #0099ff;
    }
    50% {
      color: #00ff00;
    }
    75% {
      color: #ff3399;
    }
    100% {
      color: #6666ff;
    }
  }
  @keyframes a {
    to {
        background-position: -200% 0;
    }
}

/*Chat Gpt Stuff*/
.main {
  padding: 20px;
}

.content {
  background-color: rgb(255, 255, 255, 0.6);
  color: black;
  padding: 20px;
  border-radius: 10px;
  line-height: 1.6;
  overflow: hidden;
  position: relative;
  width: 60%;
  margin: auto;
  border: rgb(255, 255, 255, 0.8) solid 5px;
}

.image-box {
  float: left; /* Ensures the image floats to the left */
  margin-right: 20px; /* Creates space between image and text */
  margin-bottom: 15px;
  background-color: #ffffff; /* White space around the image */
  padding: 10px; /* Adds a white buffer around the image */
  border-radius: 10px; /* Optional rounded corners */
  overflow: hidden; /* Ensures the image stays within bounds */
}

.image-box img {
  display: block;
  width: 250px; /* Larger image size */
  height: auto; /* Maintain aspect ratio */
}
/* Default nav style */

.menu-icon {
  display: none;
  cursor: pointer;
}

/* For mobile screens */
@media (max-width: 640px) {
  header img{
    display: none;
  }
  .outside{
    display: none;
    position: absolute;

  }
  .inside{
    display: block;
    width: 150px;
    height: 150px;
  }
  header{
    width: 100%;
  }
  nav{
    width: 100%;
    height: auto;
    border-left-width: 0;
    border-bottom-left-radius: 0;
  }
  .footer{
    display: none;
  }
  .footed footer{
    display: none;
    position:relative;
  }
}
@media(min-width:641px){
  .contact{
    display: none;
  }
  .inside{
    display: none;
    
  }
}
.slideshow-container {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
  height: 600px;
  border: 5px solid black;
  border-radius: 10px;
  background-color: white;
}
.slideshow-container2 {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
  height: 600px;
  border: 5px solid black;
  border-radius: 10px;
  background-color: white;
}
.slides {
  display: none;
  width: 100%;
  position: relative;
}
.slideshow-container img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.active {
  display: block;
}
.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}
.description {
  text-align: center;
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 10px;
  color: white;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 5px;
}
.prev { left: 10px; }
.next { right: 10px; }
.slides img{
  width: 300px;
  height: 300px;
}
.slideshow-container2 .slides img {
  width: 100%;
  height: 100%;
}