@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); body { padding:0px; margin:0px; background:linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("https://hookagency.com/wp-content/uploads/2015/11/black-chrome-gradient-ui-gradient-background.jpg") center center; background-size:cover; width:100vw; height:100vh; overflow:hidden; font-family: 'Josefin Sans', sans-serif; } #loading { width: 100vw; height: 100vh; position: fixed; background:rgb(0, 222, 255); /*background color when load*/ z-index: 999; display: flex; justify-content: center; flex-direction: column; align-items: center; } #spinner { animation: rotate 0.56s infinite linear; width:50px; height:50px; border:12px solid #fff; border-bottom:12px solid rgb(0, 0, 255); /*Load*/ border-radius:50%; margin:0; } @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } #box { width:100vw; height:100vh; z-index:9; position:fixed; top:0; } #box div { width:16.66vw; height:100%; display:inline-block; } .box1 { background:rgb(0, 222, 255); /*Color box that fade*/ } .box2 { background:rgb(0, 222, 255);/*Color box that fade*/ margin-left:-5px; } #menu { width:100%; text-align:center; margin:6vh 0px; display:none; } #menu a { margin:0px 6%; font-size:19px; color:#fff; text-decoration:underline; } #middle { width:100vw; height:90vh; display:flex; flex-direction:column; justify-content:center; position:fixed; top:0; text-align:center; z-index:1; color:#fff; padding-bottom:10vh; } #middle h1 { color:rgb(0, 222, 255); /*Header color*/ font-size:70px; text-decoration:underline; h1.blue::selection { background: #fc0606 } } #about { width:10vw; height:10vw; text-align:center; font-size:25px; transform:rotate(-90deg); background:transparent; color:#fff; position:fixed; left:0; bottom:40vh; display:flex; flex-direction: column; justify-content:center; z-index:4; transition:0.4s ease-in-out; border-radius:0px 0px 100px 100px; } #work { width:10vw; height:10vw; text-align:center; font-size:25px; transform:rotate(90deg); background:transparent; color:#fff; position:fixed; right:0; bottom:40vh; display:flex; flex-direction: column; justify-content:center; z-index:4; transition:0.4s ease-in-out; border-radius:0px 0px 100px 100px; } #about:hover { background:rgba(0, 222, 255, 0.9); /*Color when hover*/ cursor:pointer; } #work:hover { background:rgba(0, 222, 255, 0.9); /*Color when hover*/ cursor:pointer; } #middle table { width:30%; margin:6vh auto; } #middle table tr td { text-align:center; } .social { color:#fff; font-size:22px; border-radius:50%; transition:0.4s ease-in-out; margin:0px 8px; text-align:center; } .social:hover { cursor: pointer; color:rgb(0, 222, 255); /*Color when hover*/ } .container { width:90vw; height:90vh; padding:5vh 5vw; background:rgb(0, 222, 255); /*Down line*/ color:#fff; z-index:9; position:fixed; max-height:100vh; overflow-y:auto; display:none; } .container div { font-size:25px; margin:20px 0px; transition:0.4s ease-in-out; } .container div:hover { cursor:pointer; } .container section { margin:8vh 0px; } #used div{ font-size:14px !important; display:inline-block; padding:8px 10px; border:2px solid #fff; margin:0px 10px; border-radius:50px; } #used:hover { cursor:text; } #used div:hover { cursor:text; } .container h1 { font-size:60px; text-decoration:underline; } .container p { font-size:21px; } .btn_one { font-size:18px; font-family: 'Josefin Sans', sans-serif; color:#fff; background:transparent; border:3px solid #fff; padding:8px 40px; border-radius:80px; font-weight:bold; margin:2vh 10px; transition:0.4s ease-in-out; } .btn_one:hover { cursor:pointer; color:rgb(0, 222, 255); /*Color when hover*/ background:#fff; } .btn_two { font-size:18px; font-family: 'Josefin Sans', sans-serif; color:rgb(0, 222, 255); /*Color when hover*/ background:#fff; border:3px solid #fff; padding:8px 40px; border-radius:80px; font-weight:bold; margin:2vh 10px; transition:0.4s ease-in-out; } .btn_two:hover { cursor:pointer; padding:8px 60px; } .container form input { width:46%; margin:20px 1%; background:transparent; border:0px; border-bottom:3px solid rgba(255,255,255,0.5); padding:8px 10px; font-family: 'Poppins', sans-serif; font-size:18px; transition:0.4s ease-in-out; color:#fff; font-weight:bold; } .container form textarea { width:96%; margin:20px 1%; padding:8px 10px; border:0px; border-bottom:3px solid rgba(255,255,255,0.5); padding:8px 10px; font-family: 'Poppins', sans-serif; font-size:18px; background:transparent; resize:none; transition:0.4s ease-in-out; color:#fff; font-weight:bold; } .container form input:focus { outline:none; border-bottom:3px solid rgba(255, 255, 255,1); } .container form textarea:focus { outline:none; border-bottom:3px solid rgba(255, 255, 255,1); } ::placeholder { color:#fff; } #footer { color:#fff; width:92vw; padding:5vh 4vw; text-align:right; position:fixed; z-index:1; bottom:0; font-size:16px; font-weight:bold; } #footer a { color:rgb(0, 222, 255) ; /*bottom of thing*/ } #particles-js { position:fixed; width:100vw; height:100vh; } ::-webkit-scrollbar { width:5px; height:5px; } ::-webkit-scrollbar-track { background: #fff; } ::-webkit-scrollbar-thumb { background: rgb(0, 222, 255); /*scrollbar color*/ } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 222, 255, 0.7); /*scrollbar color*/ } ::selection { color: #008fc7; background: rgb(0, 222, 255 / 0%); } @media (max-width: 800px){ #about { display:none; } #work { display:none; } #footer { text-align:center; } #middle { width:90vw; padding:0px 5vw; } #middle table { width:80%; } .container form input { width:90%; } .container form textarea { width:90%; } #menu { display:inline-block; } #onlywide { display:none !important; } .box2 { margin-left:0px !important; } #box div { width:100%; } }}
@media only screen and (max-width: 400px) {
    .header h1 {
        font-size: 30px
    }
}