me.css

html{
    margin:0;
    min-height: 100vh;
    background-color: #111;
}
body{
    margin:0;
    font: 18px Comic Sans MS, Comic Sans;
}
body *{
    color:#dee;
    border-radius: 4px;
    box-sizing: border-box;
    padding:0px;
    transition:all .18s;
}

a{
    text-decoration: none;
    color: navajowhite;
    transition: all .2s;
    cursor: pointer;
}
a:hover{
    transform: scale(1.1) translateY(-2px);
    color:cyan;
}
h1{
    padding:10px;
    background-color: darkslategray;
    color:gold;
    /* font-size: 2.4em; */
    text-align: center;
    
}
h2{
    /* font-size: 1.6em; */
    font-variant-caps: small-caps;
    text-align: center;
    color:darkcyan;
    margin-top: 0;
}
h4{
    /* font-size: 1.4em; */

}
header, footer{
    background: brown;
    /* height: max(40px,10vh); */
    display:grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3,33.3%);
    justify-content: stretch;
    align-content: stretch;
    justify-items: center;
    width:100%;
    border-radius: 0;
    font-variant-caps: small-caps;
    font-size:1.2em;
}
.head-show{
    transform:initial;
}
#menubut{
    cursor: pointer;
}
#menudiv{
    display: none;
    position:fixed;
    z-index: 2;
    opacity: .9;
}
#menudiv>button{
    width: 45px;
    height: 40px;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 6px 2px;
    margin: 3px;
    box-shadow: 0 0 2px black;
    border-radius: 25%;
    background-color: ghostwhite;
    border-style: double;
    outline:0;
}
.menuline{
    width: 80%;
    height: 50%;
    background-color: brown;
}


header{
    font-weight: bold;
    position:fixed;
    z-index: 1;
    opacity: .9;
    box-shadow: 0 2px 16px #ae5353;
    background: linear-gradient( 90deg, #db8d8d ,#a52a2a);
}
header:hover{
    opacity:1;
}
header>a{
    padding:.8vh 0;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
footer{
    grid-template-columns: repeat(5,20%);
    background:transparent ;
}
img{
    width:100%;
    /* height:94%; */
    position: relative;
    top: 1%;
}
dialog{
    top:max(20vh, 100px);
    position: fixed;
    background-color: black;
    border-radius: 20px;
    border-width: 0;
    opacity: 0;
    animation: ani-show .3s cubic-bezier(0,0,0,3) forwards;
    animation-delay: .1s;
}
dialog::backdrop {
    background: linear-gradient(0deg, #0f02, transparent);
  }
.dialog{
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
    border-radius: 20px;
    padding:30px;
    box-shadow:0px 0px 20px darkslategray;
}
.dialog>img{
    width:80px;
    height:80px;
}
.dialog >div{
    color:cyan;
    display: grid;
    grid-auto-flow: column;

}
.span{
    display: inline-block;
}
.dialog div img{
    width:24px;
    height:24px;
}
a>img, h2>img{
    width:24px;
    height:24px;
    transform: translate(2px,4px);
}
.bigicon{
    width:60px;
    height:60px;
    transform: translate(2px,18px);
}
footer .bigicon{
    transform: translate(0px,4px);
}


#me{
    position: fixed;
    font-size: 1.4em;
    padding:10vh 10vw 4vh 10vw;
    box-sizing: border-box;
    min-height:95vh;
    width:100%;
    display:grid;
    align-content: end;
}
#me >h4, #me>p{
    display: block;
    margin:2% 0;
}
#mebg{
    /* background-image: url(files/me.png); */
    /* background-repeat: no-repeat; */
    /* background-origin: content-box; */
    /* background-position:100%; */
    /* background-position-x: right; */
    /* background-position-y: bottom; */
    /* background-size: contain; */
    display: block;
    position: absolute;
    width: max(30vw,30vh);
    height: auto;
    border-radius: 40%;
    top:14vw;
    right: calc(6vh + 2vw);
    filter: drop-shadow(0 0 14px #000008);
}
#main{
    position: absolute;
    display: grid;
    width:100%;
    top:80vh;
}
#fake{
    height:20vh;
    background: linear-gradient(transparent 1px, #111);
}
#main-content{
    padding-top: 40px;
    background-color: #111;
    width:100%;
}
.bio{
    padding:10vh 10vw 10vh 10vw;
    text-align: center;
    font-family:cambria;
}
.bio > p{
    padding: 10px 0px;
}

.flip{
    display: inline-block;
    transform:rotate(90deg);
}
#projectdiv{
    padding-top: 40px;
}
#projects{
    margin: 8% 2% 16%;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(min(440px,96vw),1fr));
    grid-gap: 2vh;
    justify-items: center;
}
.out-item{
    margin-top:10px;
    margin-bottom:10px;
    display: grid;
    align-items: center;
    width:92%;
}
.item{
    border-radius: 8px;
    background:black;
    transition:all .2s;
    display:grid;
    grid-gap: 2%;
    padding: 4%;
    grid-template-columns: 40% 60%;
}
.item>div{
    padding:2%;
    display: grid;
    align-items: center;
}
.item-main{
    display: grid;
}
.item-main>a{
    text-align: center;
    justify-self: right;
    align-self: center;
    padding: 8px;
}
.item:hover{
    box-shadow: 2px 2px 8px darkslategray;
    transform:scale(1.02);
}
.link{
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
    justify-items: center;
}
.coffee{
    color:darkgoldenrod;
}


#contact{
    padding:10vh 10vw 10vh 10vw;
    text-align: center;
    display:grid;
    grid-auto-flow: row;
    font-size: 1.2em;
}
#contact > p{
    padding: 10px 0px;
}
.con-grid{
    display: grid;
    grid-auto-flow: column;
    justify-items: center;
    width: max-content;
    justify-self: center;
    grid-gap: 0 4vw;
}
.con-grid>img {
    width: 120px;
    height: 120px;
    grid-row-end:span 2;
}
.con-grid .span img{
    width:30px;
    height:30px;
    transform: translateY(6px);
}
.con-grid .span img:hover{
    transform: scale(1.2) translateY(6px);
}
.copyright{
    height:40px;
    line-height: 40px;
    text-align: center;
    background-color: brown;;
}

/* my custom alt. start- 
<div class='alt'><div><div class='marker'><div></div></div>call me</div></div>  for lower
<div class='alt uper bai'><div>Gmail<div class='marker'><div></div></div></div></div>  for uper left */
.alt{
    display: none;
    position: absolute;
    width:0;
    height:0;
    opacity: 0;
}
img:hover + .alt, a:hover .alt{
    display: block;
    animation: ani-show .2s cubic-bezier(0,0,0,1.4) forwards;
    animation-delay: .1s;
}

img:hover + .alt>div, a:hover .alt>div{
    position: relative;
    width:max-content;
    font-size: .6em;
    -webkit-text-stroke-width: thin;
    text-align: center;
    top: -10px;
    color: lawngreen;
    padding-left:4px;
    padding-right:4px;
    box-shadow: 0px 0px 8px black;
    background: #181818;
    white-space: nowrap;

}
img:hover + .uper>div, a:hover .uper>div{
    top:-50px;
}
img:hover + .bai>div, a:hover .bai>div{
    left:-26px;
}

.marker{
    width:0;
    height:0;
    margin-left:10%;
}
.marker div{
    width: 10px;
    height: 10px;
    transform: rotateZ(45deg);
    top: -5px;
    position: relative;
    background: #181818;
    border-radius: 0 0 20px 0;
}
.bai .marker{
    margin-left:70%;
}
.uper .marker div{
    border-radius: 20px 0 0 0;
}
/* alt-end */

#cross{
    position:relative;
    left: 50%;
    top: -50%;
    font-size: 1.4em;
    cursor: pointer;
}
#cross:hover{
    transform: scale(1.2);
}









@keyframes ani-show{
    100%{
        transform:scale(1.2) translateY(20px);
        opacity:1;
    }
}

@media (pointer:coarse) {
    header{
        opacity: 1;
    }
}

/* @media screen and (max-width: 500px), (max-height:500px){ */
@media screen and (max-aspect-ratio: 3/4){
    body{
        font: 14px Comic Sans MS, Comic Sans, helvetica;
    }

    #menudiv{
        display: initial;
    }
    header{
        grid-auto-flow: row;
        grid-template-columns: initial;
        padding-left:10%;
        opacity: 1;
        transform: translate(-50%, -150%) scale(.5);
    }

    a>img, h2>img{
        width:20px;
        height:20px;
        transform: translate(2px,4px);
    }
    .bigicon{
        width:30px;
        height:30px;
        transform: translate(2px,6px);
    }
    .marker div{
        width:6px;
        height:6px;
        top: -3px;
    }
    #mebg{
        justify-self: center;
        right: auto;
    }
}