/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("https://noughties.neocities.org/images/2132126zgq5zau2dd.gif");
  background-color: black;
  overflow-y:hidden;
}

p{
  position:absolute;
}

#splat{
  display: block;
  width:100%;
  margin-left: auto;
  margin-right: auto;
}

#gir_menu{
  /*background-color: blue;*/
  margin-top: -34%;
  margin-left: -5%;
  position: fixed;
  z-index:2;
  width:70%;
  padding-bottom:5%;
}

#gir{
  float:left;
  position: relative;
  z-index:3;
  width:35%;
  cursor: pointer;
}

#gir_menu_content{
  display: none;
  position: relative;
  float: left;
  z-index: 2;
  width:100%;
  overflow: hidden;
  /*background-color:green;*/
}

.girA{
  width:90%;
  padding-left:5%;
  margin-bottom:10px;
}

.girB{
  width:90%;
  padding-left:10%;
  margin-bottom:10px;
}

.girl_menu_content_open{
  animation-name: expand;
  animation-duration: 500ms;
}

.girl_menu_content_close{
  animation-name: contrast;
  animation-duration: 500ms;
}

@keyframes expand{
  0% {margin-left:-100%}
  100% {margin-left: 0%}
}

@keyframes contract{
  0% {margin-left: 0%}
  100% {margin-left: -100%}
}

#content{
  width: 90%;
  margin: auto;
}

.frame{
  position: relative;
  width: 100%;
  border-style: solid;
  border-color: green;
  border-radius: 8px;
  border-width: 5px;
  background-image: url("https://drive.google.com/file/d/1RQGr3kOD3ki630agRcWcoSOqHQpI-B0r/view?usp=sharing");
  opacity:1;
  radius: 100px;
  margin-top:4%;
  margin-bottom: 4%;
  overflow: hidden;
}

#sector1{
  float: left;
  width: 100%;
}

#sector2{
  float: left;
  width: 100%;
}

#sector3{
  float: left;
  width: 100%;
}

#sector4{
  float: left;
  width: 100%;
}

.blinkies{
  width: 100%;
  display: block;
  float: left;
}

#smallSquare1:after{
  content: "";
  display: block;
  float: left;
  padding-bottom: 100%;
}

#smallSquare1b:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}

#smallSquare1bb:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}

#smallSquare1bb{
  display: none
}

#tallSquare1:after{
  content: "";
  display: block;
  padding-bottom: 200%;
}

#tallSquare2:after{
  content: "";
  display: block;
  padding-bottom: 216%;
}

#smallSquare2:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}

#wideSquare2:after{
  content: "";
  display:block;
  padding-bottom: 50%;
}

.button88x31{
  display: block;
    float: left;
  width:25%;
  margin:0;
  padding:0;
}

#bigSquare3:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}

#smallSquare3:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}

#wideSquare4:after{
  content: "";
  display: block;
  padding-bottom: 50%;
}

.frameText{
  font-family: 'Courier New', monospace;
  color: #89CFF0;
  font-size: 5.7vw;
  font-weight: bold;
  position: absolute;
  margin-left: 5%;
  margin-right: 5%;
  background-color: rgba(233, 167, 161, .8);
  padding: 2%;
  text-align: justify;
  text-justify: inter-character;
}

#pcLink{
  margin-left: 30%;
  margin-top: 80%;
}

#myspaceLink{
  margin-top: 70%;
}

.game{
  width: 100%;
  max-height: 100%;
  position: absolute;
}

#photo{
  position: absolute;
  width: 100%;
}

/*********************** break ************************/

@media screen and (min-width: 666px) {
  .frameText{
    font-size: 2.8vw;
  }
  
#gir{
  width: 25%;
}

#gir_menu{
  width: 40%;
}

#splat{
  /*width: 350px;*/
}

#content{
  width: 90%;
  margin: auto;
}

#sector1{
  width: 100%;
}

#sector2{
  width: 100%;
}

#sector3{
  width: 100%;
}

#sector4{
  width: 100%
}

#smallSquare{
  width: 46%;
  margin: auto;
  margin-bottom: 6%;
  margin-top: 3.5%;
  float: left;
  display: none;
}

#smallSquare1b{
  width: 46%;
  margin: auto;
  margin-bottom: 1%;
  margin-top: 1%;
  margin-left: 1%;
  float: left;
  display: block;
}

#smallSquare1bb{
  width: 46%;
  margin: auto;
  margin-bottom: 1%;
  margin-top: 3.5%;
  margin-left: 1%;
  float: left;
  display: block;
}

#tallSquare1{
  width: 46%;
  margin: auto;
  margin-bottom: 1%;
  margin-right: 1%;
  margin-left: 1%;
  margin-top: 3.5%;
  float: left;
}

#tallSquare1:after{
  padding-bottom: 207%;
}

#tallSquare2{
  width: 46%;
  float: left;
  margin: 1%;
}

#tallSquare2:after{
  padding-bottom: 207%;
}

#smallSquare2{
  width: 46%;
  margin: 1%;
  float: left;
}

#wideSquare2{
  width: 96%;
  margin: 1%;
  float: left;
}

#bigSquare3{
  width: 96%;
  margin: 1%;
  float: left;
}

#smallSquare3{
  width: 46%;
  margin: 1%;
  float: left;
}

#wideSquare4{
  width: 96%;
  margin: 1%;
  float: left;
}

}

/***************break*******************/

@media screen and (min-width: 1216px) {
 
  #gir_menu{
    margin-top: -420px;
    margin-left: 0px;
    width: 400px;
    padding-bottom: 5px;
  }
  
  #gir{
  }
  
  #gir_menu_content{
    width: 400px;
    padding-bottom: 800px;
  }
  
  #content{
    width: 1216px;
    margin: auto;
  }
  
  .frameText{
    font-size: 18px;
  }
  
  #splat{
    /*width: 350px;*/
    width: 1216px;
  }
  
  #sector1{
    width: 23%;
    margin: 1%;
  }
  
  #sector2{
    width: 73%;
    margin: 1%;
    margin-bottom: 0%;
  }
  
  #sector3{
    width: 73%;
    margin: 1%;
  }
  
  #sector4{
    width: 98%;
    margin: 1%;
    margin-top: 0%;
  }
  
  #smallSquare{
    width: 100%;
    margin: auto;
    margin: 3%;
    display: block;
  }
  
  #smallSquare1b{
    width: 100%;
    margin: auto;
    margin: 3%;
    display: block;
  }
  
  #smallSquare1bb{
    width: 100%;
    margin: 3%;
    display: none;
  }
  
  #tallSquare1{
    width: 100%;
    margin: auto;
    margin: 3%;
  }
  
  #tallSquare1:after{
    padding-bottom: 184%;
  }
  
  #tallSquare2{
    width: 29%;
    float: left;
    margin: 1%;
    margin-bottom: 0%;
  }
  
  #tallSquare2:after{
    padding-bottom: 215%;
  }
  
  #smallSquare2{
    width: 29%;
    margin: 1%;
    float: left;
  }
  
  #wideSquare2{
    width: 61%;
    margin: 1%;
    float: left;
    margin-bottom: 0%;
  }
  
  #bigSquare3{
    width: 61%;
    margin: 1%;
    float: left;
  }
  
  #smallSquare3{
    width: 29%;
    margin: 1%;
    float: left;
  }
  
  #wideSquare4{
    width: 46.2%;
    margin: 1%;
    margin-top: 0%;
    float: left;
  }
  
}

/**************break*****************/

@media screen and (min-width:1400px) {
  #gir_menu{
    margin-left: -100px;
  }
}