@font-face{
  font-family: csn;
  src: url(https://fivefishesoutsidethewater.neocities.org/computer-says-no.otf.woff2); 
  }
  
p4{
  color: blue;
  font-family: csn;
  font-size: 16px;
  margin: 1px;
  text-align:left;
  }
p1 {
  font-family: csn;
  font-size: 19px;
  text-align:center;
}
h {
  color: blue;
  font-family: csn;
  font-size: 41px;
  margin: 1px;
}
p2 {
  color: black;
  font-family: csn;
  font-size: 18px;
  margin: 1px;
  text-align:left;
}
p3 {
  color: black;
  font-family: csn;
  font-size: 38px;
  line-height:28px;
  text-align:left;
  margin: 1px;
  ;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5); 
}
 
::-webkit-scrollbar-thumb {
  background: blue; 
}
::-webkit-scrollbar-thumb:hover {
  background: lime; 
}


a:link {
  color: black;
  background-color: transparent;
  text-decoration: underline;
  cursor: pointer;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
  cursor: pointer;
}

a:active {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
  cursor: pointer;
}

.img{
  width: auto;
  height:auto;
  }

.img1 { 
  border: 2px solid black;
  width: 120px;
  height:auto;
  margin-top:4px;
}
.img2 { 
  position: absolute; 
  top: 152px;
  right: 561px;
  width:30px;
}
.img2:hover {
  cursor: help;
  }
  
.img3 { 
 width: auto;
 height:auto;
}
.img3:hover {
  transform: scale(1.2) ;
  }
  
.img4 { 
  position: absolute;
  margin:3px;
  width:150px;
}
.img4:hover {
  transform: rotate(-10deg) scale(1.1);
  }
  
.img5 { 
  position: absolute;
  margin:3px;
  width:150px;
}
.img5:hover {
  transform: rotate(10deg) scale(1.1);
  }
  
  .main{
width: 690px;
height: auto;
max-height: 100%;
position:relative;
border: 0.5px transparent;
border-radius:1px;
background-color:transparent;       
background-clip: padding-box;
margin-left: auto;
margin-right: auto;
margin-top:70px;
margin-bottom:70px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
} 

  .cont1{
width: 125px;
height: auto;
max-height: 100%;
border: 0.5px transparent;
  border-radius:1px;
 background-color:transparent;       
background-clip: padding-box;
padding: 5px;
} 

  .cont2{
width: 470px;
height: auto;
border: 0.5px transparent;
max-height: 100%;
float:left;
background-color: transparent;
} 

  .cont3{
width: 270px;
height: auto;
margin-top:10px;
padding:3px;
border: 0.5px transparent;
flex-wrap:wrap;
float:left;
max-height: 100%;
background-color: transparent;
background-clip: padding-box;
}

  .cont4{
width: 120px;
height: auto;
margin-top:10px;
padding:3px;
border: 0.5px transparent;
flex-wrap:wrap;
float:left;
max-height: 100%;
background-color: transparent;
background-clip: padding-box;
}


  .titlebox{ 
width: 114px;
height: auto;
border: 1px solid black;
padding:2px;
display: flex;
flex-direction:column;
background-color: white;
}


 .marquee-container {
  width: 100%;
  overflow: hidden; /* Hide overflowing content */
  white-space: nowrap; /* Prevent content from wrapping */
}
.marquee-content {
  display: inline-block; /* Allow content to flow horizontally */
  animation: marquee-scroll 12s linear infinite; /* Adjust duration and timing */
}
.marquee-container:hover .marquee-content {
  animation-play-state: paused; /* Pause animation on hover */
  cursor: pointer;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%); /* Adjust based on duplicated content */
  }
}



.hide {
  display: none;
  cursor: pointer;
   color: black;
  font-family: csn;
  font-size: 18px;
}

.infohover:hover + .hide {
  display: block;
  cursor: pointer;
}
 
.iframe1{
    margin:0px;
    float:left;
    width: 98%;
    height: 700px;
    border: 1px solid black;
    border-radius:5px;
    background-image: url('https://i.pinimg.com/1200x/fc/47/cb/fc47cbeffa845ff04e34fbfd64b1e16c.jpg');   
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
}

.iframe2{
    width: 114px;
    height: 90px;
    border: 1px solid black;
    margin-top:10px;
    padding:3px;
    flex-wrap:wrap;
    float:left;
    max-height: 100%;
    background-color: white;
}