<!--
 
  you have found the secret message
 
 
                .,'.......'',,;k00OO00O0KK00O0O000K00OO00000000OO000OOOxolc'.        
                .,''....':clodxOOOOOO0000000OOkO0OO0O00O0000OkkOOO0KK0kxl:,.         
                 '''...:llokOkkOOOOkkO000OOOkkkkOOkkkkOkxxkOkkOkOOO000Okl:'. ..      
                 .'.'';codxxxxxkkOkkkOOkxdkxxkxxxxxOkxxxdddxxxdkOOkO00OOkd;,:',.     
                  ''',lddxxxdddxkkkxkxxddoddxdxxddoddooooddlodddddxxOOkkkxxxxxdxx'   
                  .';c;:doddddxkxxxkxollccclloxdolcllc:;::lddddddooodkOkkxolodddxc'. 
                .',::::loddxxxdoxxdocc:;;;;:lllcc::;;;,'...':dxdddoooddxxdxdloxddxko,
                ,:coooodddddxoodxl:;'.....',,;:;;;,',,..     .clddolc:cloooolcddodxkx
                ';cllloxxdlclcco:'..      ...',''';:;,;'.     .';oool:;;cloooodoocdxx
                coolloddolc;lcl:,'.   .,,.,;::::;:cclcl:;'.    ..;lll:,,;coooloodoood
                ooocclddlc;;:cc;..   .;:ccccccccc:::cllll:,..  .'':c:;'::codolcloxdol
                lolclldoloc,;c:,.....;:c:::;;:;,'.',;;;cccc:::,'.';::,,lcdoxdlcllllol
                ccclooloooo;,;;;'..,cllc:;,,'..    ...,;:clcldo:,,;::;:,:ooklllclllcc
                clllllododdl;,,,,',lolc;,'..          .',,,,:odxoccdl,,,:lokdccooc:cc
                oooooxddodol;..,;ldoc:;,;;,.          .':;,,,:lodccllc;,;:lddxl::l:;:
                lodoxxoddoc;'..,cclccc::;,,..         ..'''',,::llodoc:;,:cllcl;;;:;,
                clllolooc:;;,.'cllll:;,''...           .....'',;;loolcc::;clolc;,,,;,
                :::cc:;:;;;:;:cclccc;,'....              .....',';cc:ccc;,,;;;;,',',,
                ';;::::;,,,;,,ccc:;,'....                 .....'',';c:l::;,'',,,,,,;;
                ,.,;;;,;;,;;;lc:;,'....   .....        .     ...'''';:c,,;;,,:::::;::
                '..,;:::::;,;::,,'.....  .................  ....',,,,;:;'',,,;:::;clc
                ' .,,;l::;,,:;,,,'...... .................  .....'',',;'..'',,;;;,.',
                ..,;;;;;,,,,;,,,,'.......................  ........'',,...',,;cclc,;.
                 .,;:c:::,,'',;;,..................................','''',;:cloool,,.
                 .,;;;cccllc;;;,''..................................'',;:cccooolllc'.
                 .';lcccllllc::'....................................'';;:ccclllllccc.

 
 "My hands are tide," I apologize as brisk salt water crashes over you braiding your hair with kelp & a hermit crab crawls from your mouth
 
 you don't know how
 disgusting your name sounds
 in the wrong mouth
 
 
                                    _
                                __| |_   _ _ __ ___  _ __  _   _
                               / _` | | | | '_ ` _ \| '_ \| | | |
                              | (_| | |_| | | | | | | |_) | |_| |
                               \__,_|\__,_|_| |_| |_| .__/ \__, |
                                                    |_|    |___/
 
.,,''..........'''',,;x0000OOO00OO00KKK000O0O00000K000OOOO00000000000OO00000OOOOkdloll,.
.,,,'.........';;cllcdO00OOOOO0000KKK0000OO0Ok0K000000O00O0K00000OOOOOOO000K00Okkxdc;;...            
 .,''......'cdlloxxxkkkOkO00OOO00K0000000OkkkkO0OOOOOOO0OOkOOO00OOkkkO00O00KKK0kOd:cc;.              
 .'''.....;clcodkOOOkkOOOOOOkkkO00KKOOOOOxxkkkkO0OkkOkkxOOxxxxkOOkkOkkk0OO00000OOxol,.'. ....        
  '''...',:ooddxkkxxxkOOOOOkkOO0K0OkdxkkxxxkkxxxxxkOOkkxkkxddoxxkxxxkOOKOkOO0000Okxdc'..,....        
  .''.''':ccookxxxxxxxxxkOkkkxkkkkxxddxkxxxxxxxxxdxxkxxxddddddddddddddkxkxkO00OOkkOkxdlolccl:,'.     
  .'''';;ldddxkxxxdddxkkkkOkxkkxxddooodddkddxkddddoodooodooooxoloodddooddxxxkOOkkkxxkxxxxxxxxxxc.    
   ..',cocclxdxdxdddxxkkkkxdkOxolllllcclllookxddolcldolc::::ccodoooddodolooodkOOOOkkdlloddooodkl'... 
    .,::,,;lolooddxxxkxxxxkxxxdocccc:;:cccllodolcc::cc:;;,;;;;:cdxxdxxxxdoddodxxkkxkdxolloxxddxdl;''.
',;;cc::;:coddddxkdkxoodxxdolccc::;;;;;;:lllllc::::;;;;,,'......;:xxdddxolcodooddxxddxxolldkxxddkkxc,
.;cclolooodddodddkxooldkxdlc:;,'..'',,,;;;::cc::;;,'''''..      . .ododdddl::ccllodddodlolldxoxdxkkko
;;::looooodddxddlddoloodl:;,'..       ...'',;,''',;,;,,;..  .      .:,cddoodlc:;::lolddolllodolldxxkx
'',clllllodxxxll:lll:col;'...          ....',,'''';::;,:;,..        ''.:ooolol;,;;:llodooooddloccdxxx
,loolllcoddddolc;clc:lc;''..     .'....',;;;;;;;;:cccl::l:;..        ,.,:loloc:,,',cloodooldoodlolodx
ooooolllddxool:c;:lccc:,'..     .;:cc::cccc:::c:c::ccclllloll;.      .'.,:ccc:;,;;;:coooooccldddddooo
dooolc:cldxolcc,;;:c::;'..    .,;::cccccc::cccccc:;::ccllllc;;,'..  ....':cc::,.,::cloddolccclodxddol
loollclcoddocll:,,;l:;,.....  .;::cc::::;::::;,,''',;;;;:cclc::::;,'''.'';::c;'.cc:oooxddoccllllloool
collcodooolollol;,,;::,'.....,;:ccc::;,,,;;,'.......''',;:cccccclodo,,''',;::;';l:codoxkodl::clllccll
cccccoodoldooood:,,:,;;,'...,:oolcc:;,,,,'...      .....',;::clccldxoc;;;;:c:c::,,:olokxlclolcllolccc
ccclcllcloododddl:;,,,,,,'.'lodlc:;,,''...             ...',,;;,;codxxolcloxl,,;.,;looxxoccloooc:clcc
llooooloddododdooc;'.',;,:codllc:;,''''..              ..',,,,,,,;clodxlc:cldl:;',:clldkOkl:clooc;:cc
oodododkkodoodlol:,..',;:ooollc:;;;;;;;'.              ...;::;,,,;:cclddc:coll::,;;;:cldodxl;::cl:;;:
oldoxoxkdoddddoc:,'...,:ccccc:ccc:c:;,,'..             ...','''',,,;::cllodxdcc:;,;;:cllolcl:,;;:::',
lcooooddooddol::;','..'clcooll:;;;,'''''..               ...''.'''',;;:coooollccc:,;:cllllcc:,,;;;;;,
:lcclcollllcc:;;;;,.':lllollcc:;,,''....                  .......''',;,:looolccc::::;:cooolc;,',,,;;,
::::cclc:;:;;;;;::;:lcclocccc:;,'......                     ........,,,,:ccc:cccc:,,,;;;;;;;,,,,'',,;
':;;:::::::;,,,,,,;,,;;llcc:;,''......                       .......''','';cc;:l:::;,,,',,,'',',,,,,,
.;;;:::::;;;,,,'c,;;llcc::;,,'.......                          . ....''','';:cccl:;;;;,'',,,,,,,,,;;;
,'',,;;;;,;;:;,;:;;llc:;;;,'......    ........           ..       ....'''''',:cc:,,;;,,,,;:::;::;;;:;
,...,::;;;:;:;;,,,;cc:;,;''.......   ....''..................      ...',,,,',;:c:,''',;',,:clll:;:cll
,...',,;c:::c:::,,:::;,'''........   ........................   ......'',,;;,,;:;,'''',,,;c:;;;,:cco'
,  .',;;:oc;c:,,,,::,,,,''......... .........................   ........'.,,',,;,....'',,,,;:;;;'..;'
,. .,,;,,;:,,;,,,;:;,;;;''''.......  ........................   ...........''',;'....',,'',;:cc:'.',.
.'.;;:;;;;:;,'',,,,,',,,'''..................................  .............';,'....'',,,:clccool:;..
 .',;;:cc::c:,,,'',',,;;'.................................... .............',''.'''',;:::clloool:','.
 ..':;:;;cccccccc;,',;,;,,.................................................'''''',;cccc:lllolllllc;..
 ...;,;::ccccllllcc:;:;''.'.................................................''',;:::ccclodddlllllc,'.
  .',clccccllllllcc:::'......................................................'',;;:cccccllcllllcccl;.

                                                   _         _      _ 
                              __ _  ___   ___   __| |   __ _(_)_ __| |
                             / _` |/ _ \ / _ \ / _` |  / _` | | '__| |
                            | (_| | (_) | (_) | (_| | | (_| | | |  | |
                             \__, |\___/ \___/ \__,_|  \__, |_|_|  |_|
                             |___/                     |___/          
 

 compudida.com is an on going collection of internets
 
 
 //// written and directed by
 
 a l a n   c h e l a k
 
 in
 west philadelphia, pa
 
 twitters: @_compudida  /  @compudida /
 
 
 LATEST UPDATE: 
 
 v. 5.17.18 - /cellphone css
 
 -------------------
  [older pages now]
 
 v. 3.11.18 - /2018 trump transcrips
 
 v. 3.03.18 - man 0+1 menn. relaces 2nd link /
 
 v. 2.20.18 - High-performance technologies.
 
 
 ----
 
 v. 02.11.18 - viagog rip off
 
 -----
 
 v. 02.09.18 - decided to weave some quotes into permission denied
 
 v. 02.03.18 - new version - permission denied
 
 ------------
 
 v. 01.18.18 - dumpy good girl intro into yrk.htlm,
 
 V. 11.21.17 - added art is anal cheese video
 
 11.19.17 - new front, people bury people
 
 11.18.17 - a list of fears, directs to 11.06.17 homepage.
 
 11.06.17 - new front page, links to older and newer portions of site.
 
 [version 10.06.17]
 -new album, "it didn't kill me"
 
 old:
 [version 9/11.4]
 "updated broken link, redirected towards music"
 
 
 DO WHAT THE FUCK YOU WANT TO LICENSE
 
 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.
 
 DO WHAT THE FUCK YOU WANT TO LICENSE
 TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 
 0. You just DO WHAT THE FUCK YOU WANT TO.
 
 also
 
 OooooooooooooooooooooooooooooooooodddddddddddddddddddddddddddddooddddddddxxxdddddddddddoO
 d',,,,,,',,,,,,',,,,,,;::cccccc:;,,;;;;;;;;;;;;;;;,,'......'......,,,''..'..........,do'd
 d',,,,,,,,,,,,,,,:lxOKKOkkkkkk00X0Odc;;;;;;;;;;;;;;;,.................................c'd
 d',,,,,,,,,,,,;d0NKxl;.'....,'...;lx0Kkl;;;;;;;;;;;;;'.......'........................''d
 d',,,,,,,,,,,dXNk:''.................'cK0d;;;;;;;;;;;'..................................d
 d',,,,,,,,,oKNXo.......................cXNKo;;;;;;;;;'..................................d
 d',,,,,,,,xNNXl.........................:KNXx,;;;;;;;,''...............................,d
 x',,,,,,,;XNXc...........................lXNNd;;;;;;;;;;,..............................'d
 x',,''',,cNN:............................'ONNX:;;;;;;;;,'..............................'d
 x.,,'''',lNK'.............................kNNNc;;;;;;;;;'..............................;d
 x',,'',,,:NK'............................'ONNXc;;;;;;;,;'.............................',d
 x',,'.',,,KX,............................'0NNO;;;;;;;,,;,.............................''d
 x',,'',,,,dNd............................lNNXl;;;;;;;;;;'.............................,'d
 k',,',,,,,,dXc.........,................lNNNx,;;;;;;;;;;'.............................',d
 k',,,'',,,;:kNo.......................'xNNNO;;;;;;;;;;;;'..............................,d
 k',,,'''',,,;xX0l'..................,dNWWNk;;;;;;;;,;;;;'..............................,d
 k',,,'''',,,;;c0NNOl'.............;xNWWWNkc;;;;;;;;;,;;;c..............................,d
 k',,,,,,,;lo:,clxKNNNXKkoccc:lokKNWNWWNkl::;;;;;;;;;;;;;l..............................'d
 k',,;;,;:c;:;;;cdk0XXXNNNNNWWWWWWWWNXOx:::c;;;;;;;;;;;;;,..............................'x
 k',;;;;;;;:;:;;;;;;:ldk00ddxxk00Okdc:::ccc;;,;;,,,;,;;;;................................x
 k,;;;;;;;;:;;;;;;;;;;;;;::;;;:::::::ccc:c::,,,,,,',',,,,................................d
 x;c:::::cc::::::::::::::::::::::::c:ccl:cc;;:::;;;;;;,;;,...............................d
 x;::::::::::::::::::ccc:::::cccc:::::::::::::::::::::::::...............................d
 x;::::::::::::::c:cc:c:::::::ccccccccc:::::c:::::::::::::...............................d
 x;:::::::::::::cccccccc:::::cc:cccccccccc::c:::::::ccc:::...............................d
 x;::::::::::::cccccccc:::::::::::ccccccc::cccc:::::::c:c:...............................d
 x;::::::::::::::::lc:::::::::::c::::c:::c:ccccc:::::::cc:...............................d
 k;:::;::::::::::::::::::cccccccccc:::::::cccccc:::::::cc:...............................d
 k;:;:;;:::::::::::::::::llccccccccc:ccccccccccccccc::c:c:;..............................d
 k;:::::::::::::::::::::::cccccccccccccc::cccccccc:cc:cccc;..............................d
 x;:::::::::::::::::::::l:cccccccccccccccccccccccc:::ccccc;..............................d
 x;:::::::::::::::::::::dc:cccccccccccccccccccccccc:::c:c:'..............................d
 x;:::::::::::::::::::::lc:ccccc:ccc::ccc:cccccccc:c:::::,...............................d
 x;::::::::::::::::::::::::c::::c:cccc::c::::cccc::::::::;...............................d
 x;::::::::::::::::::::::::::cccc::cc::::::::ccc:c::::c:::...............................d
 d;::::::::::::::::::::::ccc::ccc:ccc::cc::::ccc:ccccccc::'..............................d
 d;;::::::::::::::::::::::::::::cc:c::::::::::ccc:c:::::::'..............................d
 OdddddddoooodddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddO
 
 
 not years
 but days
 giving me
 away
 
 to keeping
 you golden
 *and so close, to notice
 
 
 bring me home
 show me where to go
 
 
 sure
 youre dirty
 now
 
 
 you always
 made it
 easy,
 
 
 every
 night and day
 
 000
 
 we break halfway,
 not good enough to see
 can't read the book
 cause don't know
 how to read
 
 shiny platforms \
 
 throw yourself
 my way then
 somehow
 you do the same thing

 
 -->
<head>
    <title>C/O/M/P/UDIDA</title>
    <meta name="description" content="compudida is the continually growing webspace of alan chelak">
        <meta name="keywords" content="chasing secret messages, and after sometime,
            
            sleep deprivation may, 
            increase the frequency and intensity of
            Pandora's box
            (in a house
            of matchsticks
            and cigarettes),
            
            
            Waves a dead chicken,
            
          \
            
            put down the squelch
            larva of dead wood
            
            Equating colonization with genocide and ecocide
            a society that is getting precisely what it has asked for.
TIME MIGHT HEAL ALL WOUNDS AS LONG AS I STAY AWAY FROM YOU
            nonsense of a higher order
            provides examples of resistance.
            
            know nothing
            be no one
            have nothing,
            
            
            life is so relentlessly displaced by its commodity form
            the violent linear world of bureaucracies
            alert fluency cracks our reading glasses
            It is not a cynical world but a sad confused one
            a frigid Monday evening seaside on the Bay
            
            and therefore lacked the wistfulness attendant to such things.
            
            so tactfully courted and exposed
            

            ">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
               </head>
             <style type="text/css">
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
body {
    text-decoration: none;
background-image: linear-gradient(45deg, #6e6f74, #202022);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}


.background-panels {
position: absolute;
top: 50%;
left: 50%;
display: flex;
width: 1800px;
border: 2px solid #0f0f0f;
flex-wrap: wrap;
-webkit-transform: translate(-50%, -50%) rotate(-30deg) skewX(30deg);
transform: translate(-50%, -50%) rotate(-30deg) skewX(30deg);
}
.background-panels div {
height: 500px;
width: 580px;
border: 2px solid #0f0f0f;
box-shadow: inset 3px 0 0px -1px #4b4c4f, inset 0 -3px 1px -1px #424346, inset 0 -4px 0 -1px #353639, inset 5px 0 1px -1px rgba(182,182,190,0.6), inset 0 -5px 1px -1px rgba(182,182,190,0.2);
}
.phone {
position: absolute;
left: calc(50% - 8px);
top: calc(50% - 2px);
-webkit-transform: translate(-50%, -50%) rotate(-30deg) skewX(30deg);
transform: translate(-50%, -50%) rotate(-30deg) skewX(30deg);
}
.phone-back {
position: absolute;
top: -3px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 734px;
width: 430px;
background-image: linear-gradient(to bottom, #3a3b3f 70%, #1d1d1f);
border-radius: 74px 40px 84px 50px;
box-shadow: -26px 8px 8px -10px rgba(0,0,0,0.3), -6px 6px 6px 0 rgba(0,0,0,0.6), -30px 14px 10px -10px rgba(0,0,0,0.5), -20px 40px 8px 0 rgba(0,0,0,0.1), -20px 30px 8px 0 rgba(0,0,0,0.1), inset 20px 0 15px -6px rgba(0,0,0,0.6), inset 2px 0 4px -2px rgba(0,0,0,0.6), inset 2px 0 1px -2px rgba(255,255,255,0.1), inset 0 -15px 10px -10px rgba(255,255,255,0.15);
}
.phone-back:before {
content: "";
display: block;
height: 300px;
width: 100px;
position: absolute;
background-color: #fff;
left: 16px;
bottom: 40px;
border-radius: 20px;
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0.1;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
.phone-back:after {
content: "";
display: block;
height: 300px;
width: 100px;
position: absolute;
background-color: #fff;
left: 26px;
bottom: 40px;
border-radius: 20px;
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0.25;
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
.phone-screen {
position: absolute;
top: -16px;
left: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 710px;
width: 400px;
background-color: #000;
border-radius: 48px 40px 52px 45px;
box-shadow: -2px 0 0px -1px rgba(255,255,255,0.4), -1px 3px 3px -3px rgba(255,255,255,0.7);
}
.phone-display {
position: absolute;
z-index: 1;
top: -23px;
left: 20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 690px;
width: 378px;
background-color: #fbfbfb;
border-radius: 45px 37px 41px 41px;
}
.phone-notch {
position: absolute;
top: -1px;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 210px;
background-color: #131313;
border-top: 6px solid #000;
height: 21px;
z-index: 3;
border-radius: 0 0 20px 20px;
}
.phone-notch:after {
content: "";
display: block;
height: 12px;
width: 12px;
background-color: transparent;
position: absolute;
left: -12px;
top: -5px;
border-radius: 50%;
box-shadow: 5px -5px 0 -3px #000;
}
.phone-notch:before {
content: "";
display: block;
height: 12px;
width: 12px;
background-color: transparent;
position: absolute;
right: -12px;
top: -5px;
border-radius: 50%;
box-shadow: -4px -4px 0 -3px #000;
}
.phone-speaker {
position: absolute;
top: 6px;
width: 58px;
height: 6px;
border-radius: 20px;
background-color: #2b2b2b;
overflow: hidden;
box-shadow: 0 0 0 1px #363637, inset -3px 3px 1px 0px #000, inset -3px 4px 0px -1px rgba(255,255,255,0.5);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.phone-speaker:after {
content: "";
display: block;
height: 4px;
width: 4px;
background-color: #87888c;
position: absolute;
right: -1px;
border-radius: 50%;
top: -1px;
}
.phone-speaker:before {
content: "";
display: block;
height: 4px;
width: 4px;
background-color: #898a8e;
position: absolute;
right: -2px;
border-radius: 50%;
top: 4px;
}
.phone-left-side {
position: absolute;
left: 0;
top: 60px;
width: 30px;
height: 100%;
}
.phone-left-side .phone-antena {
position: absolute;
height: 20px;
width: 50px;
left: -5px;
top: 10px;
border-radius: 50%;
-webkit-transform: rotate(-40deg) skewX(20deg);
transform: rotate(-40deg) skewX(20deg);
background-color: transparent;
box-shadow: 0px -2px 1px -2px #000;
}
.phone-left-side .phone-antena.bottom {
top: auto;
bottom: 128px;
}
.phone-left-side .phone-antena:after {
content: "";
display: block;
height: 20px;
width: 50px;
position: absolute;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
left: -5px;
top: 3px;
border-radius: 50%;
background-color: transparent;
box-shadow: 0px -2px 1px -2px #000;
}
.phone-button {
position: absolute;
top: 100px;
left: 4px;
height: 47px;
width: 12px;
background-color: #010101;
border-radius: 30px;
-webkit-transform: skewY(-40deg);
transform: skewY(-40deg);
box-shadow: -32px -16px 10px 0 rgba(0,0,0,0.4), -4px 0 4px 0 rgba(0,0,0,0.4);
}
.phone-button.bottom {
top: 160px;
}
.phone-button.top {
top: 48px;
height: 29px;
width: 14px;
left: 2px;
border-radius: 10px 10px 10px 3px;
box-shadow: inset 2px 0 0 -1px rgba(255,255,255,0.25);
}
.phone-button.top:after {
height: 27px;
width: 8px;
left: 4px;
top: 0px;
}
.phone-button.top:before {
height: 28px;
width: 8px;
left: 6px;
top: 0px;
box-shadow: 1px 0 0 0 rgba(0,0,0,0.4);
}
.phone-button:before {
content: "";
display: block;
position: absolute;
height: 45px;
width: 10px;
background-image: linear-gradient(to bottom, #6a6b6f 85%, #0b0b0b);
border-radius: 20px;
}
.phone-button:after {
content: "";
display: block;
position: absolute;
left: -2px;
top: -1px;
height: 44px;
width: 10px;
background-color: #2d2d2f;
border-radius: 20px;
box-shadow: inset -1px -1px 0 -1px rgba(255,255,255,0.6);
}
.phone-bottom {
position: absolute;
bottom: 0;
width: 100%;
}
.phone-bottom .bottom-speaker {
position: absolute;
display: flex;
left: calc(50% - 120px);
bottom: 6px;
-webkit-transform: skewX(-50deg);
transform: skewX(-50deg);
}
.phone-bottom .bottom-speaker.right {
left: calc(50% + 45px);
}
.phone-bottom .bottom-speaker div {
height: 6px;
width: 6px;
background-color: #212121;
box-shadow: inset -4px -3px 2px -2px #000, 1px -1px 0 -1px rgba(255,255,255,0.5);
margin: 0 3px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.phone-bottom .bottom-speaker div:after {
content: "";
display: block;
height: 3px;
width: 3px;
background-color: #fff;
border-radius: 50%;
position: absolute;
bottom: -1px;
left: 3px;
opacity: 0.4;
}
.phone-bottom .phone-screw {
position: absolute;
bottom: 5px;
left: calc(50% - 38px);
height: 9px;
width: 9px;
background-image: linear-gradient(to right, #1a1a1c 30%, #a1a2a7 60%, #1a1a1c 80%);
border-radius: 50%;
-webkit-transform: translateX(-50%) skewX(-50deg);
transform: translateX(-50%) skewX(-50deg);
}
.phone-bottom .phone-screw.right {
left: calc(50% + 36px);
}
.phone-bottom .phone-screw div {
height: 6px;
width: 6px;
border-radius: 50%;
background-color: #252527;
box-shadow: 2px 2px 0 0 rgba(0,0,0,0.9), inset -2px 1px 1px -1px #000;
position: relative;
}
.phone-bottom .phone-screw div:after {
content: "";
display: block;
height: 4px;
width: 4px;
background-color: #151515;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 1px;
box-shadow: inset -1px -1px 0 0px rgba(255,255,255,0.6);
}
.phone-bottom .phone-charger {
position: absolute;
left: 50%;
bottom: 2px;
background-image: linear-gradient(to right, #121214 5%, #434446 20%, #434446 60%, #7a7b80 75%, #1b1b1d 90%);
-webkit-transform: translateX(-50%) skewX(-50deg);
transform: translateX(-50%) skewX(-50deg);
height: 14px;
width: 48px;
overflow: hidden;
border-radius: 15px 16px 24px 20px;
box-shadow: 1px 1px 1px -1px rgba(255,255,255,0.4), inset -2px -2px 0 -1px #0e0e0e, inset -3px -3px 0 -1px #252527, inset 3px 3px 0 -1px #050505;
}
.phone-bottom .phone-charger:after {
content: "";
display: block;
height: 10px;
width: 42px;
background-color: #050505;
border-radius: 20px 8px 16px 10px;
box-shadow: 1px 1px 0 -1px rgba(255,255,255,0.4);
}
.phone-bottom .phone-antena {
position: absolute;
height: 20px;
width: 50px;
bottom: 8px;
left: 60px;
border-radius: 40%;
opacity: 0.7;
-webkit-transform: rotate(-45deg) skewX(20deg) scaleY(-1);
transform: rotate(-45deg) skewX(20deg) scaleY(-1);
background-color: transparent;
box-shadow: 0px -2px 1px -2px #000;
}
.phone-bottom .phone-antena.right {
left: auto;
right: 70px;
box-shadow: 0px -2px 1px -2px #000, 19px -2px 0 -2px rgba(255,255,255,0.4);
}
.phone-bottom .phone-antena.right:after {
box-shadow: 0px -2px 1px -2px #000, 19px -2px 0 -2px rgba(255,255,255,0.4);
}
.phone-bottom .phone-antena:after {
content: "";
display: block;
height: 20px;
width: 50px;
position: absolute;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
left: -3px;
top: 3px;
border-radius: 40%;
background-color: transparent;
box-shadow: 0px -2px 1px -2px #000;
}
.phone-reflections {
position: absolute;
top: -17px;
left: 15px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 709px;
width: 399px;
border-radius: 48px 40px 52px 45px;
background-color: transparent;
z-index: 4;
overflow: hidden;
}
.phone-reflections .reflection-1 {
position: absolute;
height: 200%;
width: 120%;
background-color: #fff;
opacity: 0.1;
left: -320px;
top: -200px;
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
z-index: 10;
}
.phone-reflections .reflection-2,
.phone-reflections .reflection-3 {
position: absolute;
height: 100%;
left: -94px;
width: 100px;
border-radius: 100px;
background-color: #000;
top: calc(50% + 14px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 11;
}
.phone-reflections .reflection-3 {
background: #6d6c71;
left: -8px;
height: 60%;
width: 10px;
opacity: 0.6;
top: 70%;
}
.phone-reflections .reflection-4 {
position: absolute;
height: 60%;
top: 0;
background-color: #67686c;
width: 16px;
}
.phone-reflections .reflection-4:before {
content: "";
display: block;
position: absolute;
height: 100px;
width: 100px;
background-color: transparent;
left: 16px;
top: 4px;
border-radius: 44px 40px 0 0;
box-shadow: -20px 0px 0 0 #67686c;
}
.phone-reflections .reflection-4:after {
content: "";
display: block;
height: 80px;
width: 80px;
background-color: transparent;
position: absolute;
border-radius: 60px 0 0 0;
left: 0px;
top: -1px;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
box-shadow: -25px -3px 2px -8px #000;
}
.phone-reflections .reflection-5 {
position: absolute;
height: 50%;
bottom: 0;
left: 4px;
width: 12px;
background-color: #000;
border-radius: 50%;
}
.phone-reflections .reflection-6 {
position: absolute;
width: 80px;
height: 20px;
background-color: #000;
border-radius: 50%;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
bottom: -4px;
left: -14px;
z-index: 12;
}
.phone-reflections .reflection-6:after {
content: "";
display: block;
position: absolute;
height: 100px;
width: 20px;
background-color: #000;
right: -17px;
top: -78px;
border-radius: 40%;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.phone-reflections .reflection-6:before {
content: "";
display: block;
position: absolute;
height: 50px;
width: 50px;
background-color: transparent;
top: -51px;
left: 7px;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 40%;
box-shadow: 4px 15px 1px -10px #000;
}
.reflection-7 {
position: absolute;
bottom: -4px;
left: 10px;
height: 20px;
width: 40px;
border-radius: 20px 0px 6px 10px;
-webkit-transform: skewX(60deg) skewY(-10deg) scaleY(-1) scaleX(-1) scale(0.8);
transform: skewX(60deg) skewY(-10deg) scaleY(-1) scaleX(-1) scale(0.8);
background-color: #5c5d61;
z-index: 13;
}
.reflection-7:after {
content: "";
display: block;
height: 20px;
width: 30px;
background-color: #5c5d61;
border-radius: 50%;
position: absolute;
top: -3px;
right: 6px;
-webkit-transform: rotate(40deg) skewX(-54deg) skewY(47deg) scaleY(1) scaleX(1);
transform: rotate(40deg) skewX(-54deg) skewY(47deg) scaleY(1) scaleX(1);
}
.reflection-7:before {
content: "";
display: block;
position: absolute;
height: 18px;
width: 15px;
background-color: #5c5d61;
left: 6px;
bottom: -6px;
border-radius: 2px;
-webkit-transform: rotate(253deg) skewX(10deg);
transform: rotate(253deg) skewX(10deg);
}
.display-content {
position: absolute;
top: 0;
left: 0;
height: 690px;
width: 378px;
border-radius: 45px 37px 41px 41px;
overflow: hidden;
}
.display-content:before {
content: "";
display: block;
position: absolute;
height: 60%;
width: 100%;
top: -10%;
background-image: linear-gradient(to top, #50d2f4, #3660f2);
-webkit-transform: skewY(-15deg);
transform: skewY(-15deg);
}
.notifications-bar .time {
color: #fff;
font-size: 11px;
position: absolute;
left: 40px;
top: 10px;
}
.notifications-bar .range {
position: absolute;
height: 4px;
width: 2px;
background-color: #fff;
right: 70px;
top: 14px;
}
.notifications-bar .range:after,
.notifications-bar .range:before {
content: "";
display: block;
position: absolute;
height: 6px;
width: 2px;
background-color: #fff;
bottom: 0;
left: 4px;
}
.notifications-bar .range:before {
height: 8px;
left: 8px;
}
.notifications-bar .wifi {
position: absolute;
right: 40px;
top: 10px;
}
.notifications-bar .wifi,
.notifications-bar .wifi:before {
display: inline-block;
border: 4px double transparent;
border-top-color: #fff;
border-radius: 50%;
}
.wifi:before {
content: '';
width: 0;
height: 0;
position: relative;
top: -5px;
}
.battery {
height: 5px;
width: 12px;
position: absolute;
top: 12px;
right: 20px;
border-radius: 1px;
border: 1px solid #fff;
}
.battery:after {
content: "";
position: absolute;
height: 2px;
width: 1px;
background-color: #fff;
right: -3px;
top: 1px;
}
.nav {
position: absolute;
top: 70px;
width: 100%;
display: flex;
padding: 0 20px;
box-sizing: border-box;
}
.nav .phone-number {
color: #fff;
font-size: 14px;
flex: 1;
text-align: center;
}
.nav .messages {
margin: 0 10px;
width: 14px;
height: 10px;
width: 16px;
border: 1px solid #fff;
border-radius: 3px;
position: relative;
}
.nav .messages:before {
content: "";
display: block;
position: absolute;
background-color: #508af4;
width: 3px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
bottom: -3px;
left: 4px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.nav .messages:after {
content: "3";
position: absolute;
top: -4px;
right: -4px;
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
color: #708dbf;
background-color: #fff;
font-size: 9px;
font-weight: bold;
text-align: center;
}
.nav .menu {
height: 1px;
width: 10px;
background-color: #fff;
margin: 0 10px;
position: relative;
top: 7px;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
.nav .menu:before {
content: "";
display: block;
position: relative;
width: 14px;
top: -4px;
height: 1px;
left: -4px;
background-color: #fff;
}
.nav .menu:after {
content: "";
display: block;
position: relative;
width: 6px;
height: 1px;
top: 3px;
background-color: #fff;
left: 4px;
}
.current-plan {
position: absolute;
top: 110px;
width: 100%;
color: #fff;
}
.current-plan .plan {
flex: 1;
display: flex;
padding-left: 40px;
box-sizing: border-box;
}
.current-plan .plan div:first-of-type {
flex: 1;
}
.current-plan .plan-header {
font-weight: 300;
font-size: 11px;
margin-bottom: 3px;
letter-spacing: 1px;
}
.current-plan .plan-price {
font-size: 2.5em;
font-weight: 600;
position: relative;
left: -16px;
}
.current-plan .plan-price span {
font-size: 20px;
position: relative;
top: -14px;
left: -6px;
}
.current-plan .plan-date {
font-weight: 300;
font-size: 11px;
letter-spacing: 1px;
flex: none;
width: 120px;
}
.current-plan .plan-date div:first-of-type {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.text-question {
padding-left: 40px;
margin-top: 20px;
font-weight: 300;
font-size: 15px;
line-height: 1.4em;
}
.plan-box {
position: absolute;
top: 270px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 85%;
box-sizing: border-box;
color: #17222d;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1);
}
.plan-box .plan-options {
display: flex;
margin-bottom: 20px;
}
.plan-box .plan-options > div {
flex: 1;
}
.plan-box .plan-options > div:first-of-type {
border-right: 1px solid rgba(0,0,0,0.2);
}
.plan-box .plan-options > div div {
font-size: 11px;
opacity: 0.6;
padding-left: 30px;
}
.plan-box .plan-options > div div:first-of-type {
font-weight: 700;
font-size: 16px;
opacity: 1;
}
.plan-box .plan-options > div div:first-of-type span {
font-size: 0.8em;
opacity: 0.6;
font-weight: 400;
}
.plan-text {
font-size: 11px;
text-align: center;
margin-bottom: 20px;
}
.change-plan {
display: block;
text-decoration: none;
text-align: center;
color: #fff;
font-weight: 400;
font-size: 14px;
background-image: linear-gradient(to right, #1a7eff, #44b9ff);
padding: 10px 0;
border-radius: 5px;
margin-bottom: 20px;
}
.plan-list {
position: absolute;
top: 460px;
color: #17222d;
box-sizing: border-box;
width: 80%;
}
.plan-list .plan-limit {
padding: 20px 40px;
width: 100%;
display: flex;
}
.plan-list .plan-limit:first-of-type {
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.plan-list .plan-limit .limit-icon {
height: 30px;
width: 30px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 50%;
position: relative;
margin-right: 10px;
top: 8px;
}
.plan-list .plan-limit .limit-icon.upgrade {
border: none;
background-image: linear-gradient(to bottom, #50d2f4, #3660f2);
box-shadow: 0 4px 10px -2px rgba(54,96,242,0.8);
}
.plan-list .plan-limit .limit-icon.upgrade:after {
border-color: #fff;
width: 6px;
left: 12px;
top: 11px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.plan-list .plan-limit .limit-icon.upgrade:before {
content: "";
display: block;
height: 5px;
width: 12px;
border-bottom: 1px solid #17222d;
border-left: 1px solid #17222d;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
left: 12px;
top: 15px;
border-color: #fff;
width: 6px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.plan-list .plan-limit .limit-icon:after {
content: "";
display: block;
height: 5px;
width: 12px;
border-bottom: 1px solid #17222d;
border-left: 1px solid #17222d;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
left: 10px;
top: 9px;
}
.plan-list .plan-limit .limit-text {
flex: 1;
}
.plan-list .plan-limit .limit-text div strong {
font-size: 20px;
opacity: 1;
}
.plan-list .plan-limit .limit-text div span {
font-size: 12px;
opacity: 0.6;
border-left: 1px solid #17222d;
margin-left: 4px;
padding-left: 4px;
}
.plan-list .plan-limit .limit-text .limit-subtext {
opacity: 0.6;
font-size: 11px;
position: relative;
top: -4px;
}
.bottom-icons {
display: flex;
position: absolute;
bottom: 30px;
width: 100%;
}
.bottom-icons > div {
flex: 1;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-icons .equalizer div {
height: 18px;
width: 1px;
position: relative;
background-color: #708dbf;
}
.bottom-icons .equalizer div:nth-child(2) {
left: 5px;
}
.bottom-icons .equalizer div:nth-child(2):after {
top: 11px;
}
.bottom-icons .equalizer div:nth-child(3) {
left: 10px;
}
.bottom-icons .equalizer div:nth-child(3):after {
top: 4px;
}
.bottom-icons .equalizer div:after {
content: "";
display: block;
height: 4px;
width: 4px;
background-color: #708dbf;
border: 1px solid #fff;
border-radius: 5 0%;
position: relative;
left: -2px;
top: 2px;
}
.bottom-icons .eye {
border-left: 1px solid rgba(0,0,0,0.2);
border-right: 1px solid rgba(0,0,0,0.2);
}
.bottom-icons .eye div {
height: 6px;
width: 6px;
border: 2px solid #708dbf;
border-radius: 50%;
position: relative;
}
.bottom-icons .eye div:after,
.bottom-icons .eye div:before {
content: "";
display: block;
height: 30px;
width: 28px;
border-top: 2px solid #708dbf;
border-radius: 50%;
position: absolute;
top: -6px;
left: -12px;
}
.bottom-icons .eye div:before {
border-top: none;
border-bottom: 2px solid #708dbf;
top: -18px;
}
.bottom-icons .chart div {
height: 6px;
width: 1px;
background-color: #708dbf;
position: relative;
top: 5px;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
.bottom-icons .chart div:after {
content: "";
display: block;
height: 14px;
width: 1px;
background-color: #708dbf;
position: absolute;
left: 4px;
bottom: 0;
}
.bottom-icons .chart div:before {
content: "";
display: block;
height: 10px;
width: 1px;
background-color: #708dbf;
position: absolute;
left: 8px;
bottom: 0;
}
.home-button {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 120px;
height: 4px;
background-color: rgba(0,0,0,0.15);
bottom: 12px;
border-radius: 4px;
}
</style>

<html>
    
    <div class="background-panels">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <a href="test.html"><div class="phone">
        <div class="phone-back">
            <div class="phone-left-side">
                <div class="phone-antena"></div>
                <div class="phone-button top"></div>
                <div class="phone-button"></div>
                <div class="phone-button bottom"></div>
                <div class="phone-antena bottom"></div>
            </div></a>
            <div class="phone-bottom">
                <div class="phone-antena"></div>
                <div class="bottom-speaker">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="phone-screw">
                    <div></div>
                </div>
                <div class="phone-charger">
                </div>
                <div class="phone-screw right">
                    <div></div>
                </div>
                <div class="bottom-speaker right">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="phone-antena right"></div>
            </div>
        </div>
        <div class="phone-screen"></div>
        <div class="phone-display">
            <div class="phone-notch">
                <div class="phone-speaker"></div>
            </div>
            <div class="display-content">
                <div class="notifications-bar">
                    <a href="test.html"><div class="time">11:11</div>
                    <div class="range"></div>
                    <div class="wifi"></div>
                    <div class="battery"></div>
                </div>
                <div class="nav">
                    <div class="messages"></div>
                    <div class="phone-number">+1 (215) 429-3640</div>
                    <div class="menu"></div>
                </div>
               <div class="current-plan">
                    <div class="plan">
                        <div>
                            <div class="plan-header">REALITY PROGRAMMING </div>
                            <div class="plan-price"><span>$</span>$$$$</div>
                        </div>
                        <div class="plan-date">
                            <div>I Saw Your Face In The Screen</div>
                            <div>THE WHITES OF YOUR EYES</div>
                        </div>
                    </div>
                    <div class="text-question">scratched out // cut out<br>nice house</div>
                </div>
                <div class="plan-box">
                    <div class="plan-options">
                        <div>
                            <div><span>no real physicality</span></div>
                            <div>a digital representation.</div>
                        </div>
                        <div>
                            <div><span>just a character in the apocalypse </span></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="plan-text"><strong>Human</strong>Racehorses</div>
                    <a class="change-plan" href="">Clicks</a>
                </div>
                <div class="plan-list">
                    <div class="plan-limit">
                        <div class="limit-text">
                            <div><strong>$$</strong><span>Until you pay us back</span></div>
                            <span class="limit-subtext">Unlimited Apps</span>
                        </div>
                        <div class="limit-icon"></div>
                    </div>
                    <div class="plan-limit">
                        <div class="limit-text">
                            <div><strong>$$$$</strong><span>drop-downs, or rating systems</span></div>
                            <span class="limit-subtext">no refunds</span>
                        </div>
                        <div class="limit-icon upgrade"></div>
                    </div>
                </div>
                <div class="bottom-icons">
                    <div class="chart">
                        <div></div>
                    </div>
                    <div class="eye">
                        <div></div>
                    </div>
                    <div class="equalizer">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="home-button"></div>
            </div>
        </div>
        <div class="phone-reflections">
           <a href="onopt3.html"><div class="reflection-1"></div>
            <div class="reflection-2"></div>
                <div class="reflection-3"></div>
            <div class="reflection-4"></div>
            <div class="reflection-5"></div>
            <div class="reflection-6"></div>
            <div class="reflection-7"></div></a>
        </div>
    </div>
</html>