.fren{
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 10;
    border-radius: 3px;
    
    
}
.grid{
    display: grid;
    grid-template-columns: repeat(25,1fr);
    grid-template-rows: repeat(25,1fr);
    gap:0.5%;
    background-color: rgb(199, 184, 184);
    padding: 3px;
    position:absolute;
    z-index: 1;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.GridSquare {
    background-color: rgb(172, 91, 91);
    z-index: 3;
    
}

.FrienD {
    position: absolute;
    background-color: violet;
    z-index: 20;
}

.Houses{
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 10;
    border-radius: 3px;
}
.wall {
  background-color: rgb(120, 60, 60);
}

.path {
  background-color: rgb(220, 180, 180);
}

.Person5 {
   position: relative;
    width: 50%;
    height: 50%;
    background-color: white;
    border: black 4px solid;
    top: 100px;
    border-radius: 10px;
}

.Person6 {
    position: relative;
    width: 74%;
    height: 74%;
    background-color: white;
    border: black 4px solid;
    top: 100px;
    left: 10px;
    border-radius: 10px;
}

.PersonV {
    position: relative;
    width: 59%;
    height: 59%;
    background-color: white;
    border: black 4px solid;
    top: 100px;
    left: 10px;
    border-radius: 10px;
    
}

.PersonS {
    position: relative;
    width: 56%;
    height: 56%;
    background-color: white;
    border: black 4px solid;
    top: 100px;
    left: 10px;
    border-radius: 10px;
}

.peoplebody {
    background-color: #441855;
    z-index: 0;
}

.peopleDiv{
    position: absolute;
    top: 150px;
    left: 25%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 25%;
  height: 25%;

}


.person-info {
  margin-top: 100px;
  padding: 4px 6px;
  font-size: 14px;
  text-align: center;
  flex-direction: column;
  background-color: white;
  color: black;
  border-radius: 6px;
  border: black 1px solid;
}

.boost{
    position: relative;
    bottom: 10px;
    left: 190%;
    transform: translateX(-50%);
    color: transparent;
    z-index: -200;
    visibility: hidden;
}

.infobody{
background-color: rgb(136, 45, 136);
}
.subinfo {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: black;
    border-radius: 6px;
    border: black 1px solid;
    padding: 4px 6px;
    font-size: 19px;
    text-align: center;
}

.rules {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: black;
    border-radius: 6px;
    border: black 1px solid;
    padding: 4px 6px;
    font-size: 19px;
    text-align: center;
    width: 60%;
}


.title {
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 6px;
    border: black 2px solid;
    padding: 4px 9px;
    font-size: 40px;
    text-align: center;
    width: 60%;
    font-family: 'comic sans ms', 'sans-serif';
}

.space {
    height: 60px;
}

.videobody{
    background-color: rgb(194, 98, 194)
}


.video{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: black 2px solid;
}

.miscbody{
    background-color: rgb(224, 144, 224);
}

.content{
position: flex;
background-color: white;
top: 50%;
text-align: center;
flex-direction: column;
flex-shrink: 0;
border: black 1px solid;
padding: 4px 6px;
font-size: 20px;
border: 2px solid black;
border-radius: 4px;
width: 400px;
height: auto;

}

.content2 {
position: flex;
text-align: center;
background-color: white;
top:50%;
flex-direction: column;
flex-shrink: 0;
border: black 2px solid;
padding: 4px 6px;
font-size: 30px;
border-radius: 4px;
width: 400px;
height: auto;
font-weight: bold;

}

.mother{
    position: flex;
    gap: 3px;
    display: flex;
    flex-direction: column-reverse;
}

.tmother {
   position: flex;
    gap: 3px;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

.umother {
    position: absolute;
    top:50%;
    left:50%;
    gap: 40px;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.copywrite{
    position: absolute;
    background-image: url('Photos CRC/copyright c.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 100;
}

.peoples{
    position: absolute;
    background-image: url('Photos CRC/undraw_people_ka7y.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    background-color: rgb(0, 255, 221);
    z-index: 100;
}

.videos{
    position: absolute;
    background-image: url('Photos CRC/clapboarddesmos.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    background-color: rgb(0, 255, 221);
    z-index: 100;
}

.information{
    position: absolute;
    background-image: url('Photos CRC/infoi.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    background-color: rgb(0, 255, 221);
    z-index: 100;
}