@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
h1 {
	font-family: 'Lobster', cursive;
}

h3 {
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
}


p {
	font-family: Georgia;
	max-width: 300px; /* line-height x 2 */
    overflow: hidden;
}

#ope
  {
  background-color: black !important;
  z-index:-1;
  display: none;
  }

html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
}
.hide4 {
	display:none;
}
.hide5 {
	display:none;
}
.hide6 {
	display:none;
}
.hide7 {
	display:none;
}
.hide8 {
	display:none;
}
.hide9 {
	display:none;
}
#box {
	width:120px;
	height:120px;
	background: #3B3B3B;
	margin-left: 66%;
    bottom:60%;
    position:absolute;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#box:hover {
    width:130px;
	height:130px;
}

#box:hover +.hide4 {
  display:block;
}

#boxtw {
	width:120px;
	height:120px;
	background: #696969;
	margin-left: 66%;
    bottom:45%;
    position:absolute;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#boxtw:hover {
	  width:130px;
	height:130px;
}
#boxtw:hover +.hide5 {
  display:block;
}

#boxth {
	width:120px;
	height:120px;
	background: #979797;
	margin-left: 66%;
    bottom:30%;
    position:absolute;
     -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#boxth:hover {
	  width:130px;
	height:130px;
}
#boxth:hover +.hide6 {
  display:block;
}

.hide1 {
	display:none;
}
.hide2 {
	display:none;
}
.hide3 {
	display:none;
}
#behance {
	width:30px;
	height:30px;
	background: #8B0000;
	margin-left: 80%;
    bottom:50%;
    border-radius: 50%;
    position:absolute;
       -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#behance:hover {
	  width:40px;
	height:40px;
}
#behance:hover + .hide1{
	display:block;

}

.hide {
	display:none;

}
#github {
	width:30px;
	height:30px;
	background: #8B0000;
	margin-left: 83%;
    bottom:50%;
    border-radius: 50%;
    position:absolute;
       -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#github:hover {
	  width:40px;
	height:40px;
}
#github:hover + .hide{
	display:block;

}



#linkedin {
	width:30px;
	height:30px;
	background: #8B0000;
	margin-left: 86%;
    bottom:50%;
    border-radius: 50%;
    position:absolute;
       -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#linkedin:hover {
	  width:40px;
	height:40px;
}
#linkedin:hover + .hide2{
display:block;
}
#snapchat {
	width:30px;
	height:30px;
	background: #8B0000;
	margin-left: 89%;
    bottom:50%;
    border-radius: 50%;
    position:absolute;
       -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#snapchat:hover {
	  width:40px;
	height:40px;
}
#snapchat:hover + .hide3{
	display:block;
}


#pinkbox{
	width:500px;
	height:500px;
	background: #e06666;
	margin-left: 60%;
    bottom:-60%;
    position:absolute;
        -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#pinkbox:hover {
	width:550px;
	height:550px;
}
#pinkboxtwo{
	width:400px;
	height:350px;
	background: #ea9999;
	margin-left: 45%;
    bottom:-77%;
    position:absolute;
     -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#pinkboxtwo:hover {
	width:450px;
	height:400px;
}
#Opeinging {
    background: linear-gradient(90deg, #000000 70%, #FFFFFF 30%);
}
#Research {
    background-color:  #F5CBCC !important;
}

#pool {
    width:600px;
	height:200px;
	background: #C9DAF7;
	margin-left: 33%;
    bottom:-160%;
    position:absolute;
           -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#pool:hover {
	 width:620px;
	height:220px;
}
#photoprogram{
	background-color:#FFF2CC;
}

#p{
	background: #F1C231;
    width:100px;
	height:100px;
	margin-left: 43%;
    bottom:-243%;
    position:absolute;
}
#phr{
	background: #FFD866;
    width:140px;
	height:75px;
	margin-left: 48%;
    bottom:-241.7%;
    position:absolute;
}

#prog1 {
    background: #7F6001;
    width:120px;
	height:200px;
	margin-left: 51%;
    bottom:-270%;
    position:absolute;
             -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#prog1:hover {
	  width:125px;
	height:205px;
}
#prog1:hover +.hide7 {
	 display: block;
}
#prog2 {
    background: #7F6001;
     width:120px;
	height:120px;
	margin-left: 51%;
    bottom:-285%;
    position:absolute;
                 -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#prog2:hover {
 width:125px;
	height:125px;
}
#prog2:hover +.hide8 {
	 display: block;
}
#prog3 {
    background: #7F6001;
     width:120px;
	height:120px;
	margin-left: 59%;
    bottom:-262%;
    position:absolute;
                 -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#prog3:hover{
 width:125px;
	height:125px;
}
#prog3:hover +.hide9 {
	 display: block;
}
.zoom2 {
 height: 438.5px;
  width: 402.5px;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;

}
.zoom2:hover {
  width: 412.5px;
  height: 428.5px;

}

section {
    display: block;
    height:100%;
    width:100%;
    box-sizing:border-box;
}


@media only screen and (max-device-width: 768px) {
#ope
  {
    position: fixed;
  background-color: black !important;
  z-index:99999;
  display: block;
       -webkit-animation: opeappear .3s ease-out;
    -moz-animation: opeappear .3s ease-out;
  }

}

@media only screen and  (max-device-width: 768px) and (orientation:landscape), (max-device-height: 500px){
#ope
  {
    position: fixed;
  background-color: black !important;
  z-index:99999;
  display: block;
       -webkit-animation: opeappear .3s ease-out;
    -moz-animation: opeappear .3s ease-out;
  }

}

@media (min-width: 800px) and (min-height: 600px) and (orientation:landscape), not (min-device-width: 800px){
 #ope
  {
  display:none;
  }

}

@media (max-width: 800px) and (max-height: 600px), not (min-device-width: 800px) 
{
#ope
  {
    position: fixed;
  background-color: black !important;
  z-index:99999999;
  display: block;
       -webkit-animation: opeappear .3s ease-out;
    -moz-animation: opeappear .3s ease-out;
  }

}

@media (min-width: 800px) and (max-height: 600px), not (min-device-width: 800px){
	#ope
  {
    position: fixed;
  background-color: black !important;
  z-index:99999;
  display: block;
       -webkit-animation: opeappear .3s ease-out;
    -moz-animation: opeappear .3s ease-out;
  }

}

@media  (max-width: 800px) and (min-height: 600px), not (min-device-width: 800px){
	#ope
  {
    position: fixed;
  background-color: black !important;
  z-index:99999;
  display: block;
       -webkit-animation: opeappear .3s ease-out;
    -moz-animation: opeappear .3s ease-out;
  }

}