body {
    font-family: 'Red Hat Mono', monospace;
    background:#232632;
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.main-container {
    max-width:600px;
    height:680px;
    margin:0 auto;
    margin-top:30px;
    background:#12151ba2;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    margin-bottom:20px;
}

.main-container-about {
    max-width:600px;
    height:auto;
    margin:0 auto;
    margin-top:30px;
    background:#12151ba2;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    margin-bottom:20px;
}

.main-container h1 {
    padding-top:30px;
    text-align:center;
    color:#fff;
    font-size:18px;
    font-weight:600;
}

#profile-pic {
    border: rgb(43, 49, 64) solid 8px;
    max-width:200px;
    border-radius:50%;
}

#img-profile {
    max-width:218px;
    margin:auto;
}

.info-icon {
    display:none;
    font-size:20px;
    float:right;
    padding-right:15px;
    padding-top:10px;
    position:relative;
}

.info-icon a {
    color:#838fa9;
}

.info-icon a:hover {
    color:#5c62839e;
    transition: 0.3s;
}
  
.info-icon .tooltiptext {
    visibility: hidden;
    width:110px;
    background-color: #0000008f;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 90%;
    left: 50%;
    margin-left: -90px; /* Use half of the width (120/2 = 60), to center the tooltip */
    opacity: 0;
    transition: opacity 1s;
}
  
.info-icon:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltiptext {
    font-size:11px;
}

.info-icon .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 75%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0000008f transparent transparent transparent;
}

.linkedin, .github, .blog, .facebook {
    position:relative;
}

.linkedin .tooltiptext, .github .tooltiptext, .blog .tooltiptext, .facebook .tooltiptext {
    visibility: hidden;
    width:70px;
    background-color: #0000008f;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: calc(100% + 5px);
    left: 50%;
    margin-left: -35px; /* Use half of the width (120/2 = 60), to center the tooltip */
    opacity: 0;
    transition: opacity 1s;
}

.linkedin:hover .tooltiptext, .github:hover .tooltiptext, .blog:hover .tooltiptext, .facebook:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.greeting {
    font-size:22px;
    margin-top:25px;
    text-align:center;
    color:#fff;
}

.title {
    font-size:18px;
    color:#a3b5db;
    text-align: center;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    font-weight:400;
}

.highlight-green {
    color:aquamarine
}

.description {
    font-size:16px;
    color:#838fa9;
    text-align:center;
    padding:0px 15px;
    line-height:27px;
}

p {
    margin-top:15px;
    font-size:16px;
    color:#fff;
    text-align:center;
}

p.email {
    padding:0;
    width:auto;
    margin:0 auto;
    border-radius:15px;
    font-size:14px;
    overflow:auto;
}

p.email a {
    color:#91afe3;
    font-size:14px;
    text-decoration:none;
}

p.email a:hover {
    color:#7f8ff6;
    text-decoration:underline;
    text-underline-offset: 2px;
    transition: 0.2s;
}

p.about {
    font-size:16px;
    color:#838fa9;
    text-align:left;
    padding:0px 25px;
    line-height:26px;
    word-wrap:break-word;
    hyphens:auto;
}

p.about a {
    color:#90afe3;
    text-decoration:none;
}

p.about a:hover {
    color: #6a7ae4;
    text-decoration:underline;
    text-underline-offset: 3px;
    transition: 0.3s;
}

#social-link-container {
    text-align: center;
    margin:0 auto;
    margin-top:36px;
}

#social-links {
    list-style-type: none;
    padding:0;
    margin:0;
    text-align: center;
    text-align:center;
    font-size:18px;
}

#social-links li {
    display:inline-block;
    transition: all .5s linear;
    padding-right:5px;
}

#social-links li a {
    color: #a3b5db;
    display: inline-block;
    padding: 14px 20px;
    border:1px solid #838fa9;
    border-radius:5px;
    text-decoration:none;
    width:50px;
}

#social-links li a:hover {
    background:#05060ba7;
    border:1px solid rgb(91, 126, 183);
    transition: 0.5s;
}

#resume-link a {
    background:#202a40;
    display:block;
    max-width:200px;
    margin:0 auto;
    border:1px solid rgb(115, 146, 230);
    padding:17px;
    color:#a8cdfb;
    text-align:center;
    border-radius:5px;
    text-decoration:none;
    font-size:19px;
}

#resume-link a:hover {
    background:rgb(44, 61, 97);
    border:1px solid rgba(105, 131, 201, 0.782);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    transition: 0.3s;
}

#resume-link a:active {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.755) 0px 18px 36px -18px inset;
    border:1px solid rgb(115, 146, 230);
    text-shadow: 1px 1px rgb(81, 78, 104), -1px -1px #2b2828;
}

#return {
    list-style-type: none;
    text-align:center;
    padding:0;
    padding-bottom:15px;
}

#return li {
    display:inline-block;
    transition: all .5s linear;
    margin-bottom:15px;
}

#return li a {
    color: #a3b5db;
    display: inline-block;
    padding: 14px 20px;
    border:1px solid #838fa9;
    border-radius:5px;
    text-decoration:none;
}

#return li a:hover {
    background:#05060ba7;
    border:1px solid rgb(91, 126, 183);
    transition: 0.5s;
}

::selection {
    background:#090909;
}

.not-compatible {
    display:none;
    font-size: calc(15px + 0.390625vw);
    color:#90afe3;
    padding:5px;
    text-align:center;
    margin: auto;
    margin-top:150px;
}

footer {
    color:white;
    margin-bottom:34px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

footer a {
    color:white;
    text-underline-offset: 6px;
    text-decoration:underline;
    text-decoration-color:#a8cdfb;
}

footer a:hover {
    color:#a3b5db;
    text-decoration-color:#838fa9;
    transition: 0.3s;
}

footer li {
    font-size:16px;
}

.info-link, .info-link-about {
    padding:0;
    margin:0 auto;
    max-width:350px;
    text-align:center;
    text-decoration:none;
    list-style:none;
}

.copyright, .copyright-about {
    margin-bottom:0px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #12151ba2;
    color: white;
    text-align: center;
}



/* Media Queries */

/* Main Page */
@media (min-width:630px) {
    @media (max-height:779px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
    @media (max-height:744px) {
        .copyright {
            display:none;
        }
    }

}
@media (max-width:629px) {
    .main-container {
        max-width:450px;
        height: auto;
        padding-bottom:45px;
    }
    p.email {
        padding-bottom:15px;
    }
    p.about {
        font-size:14px;
    }
    .main-container-about {
        overflow:hidden;
        height:auto;
    }
    .greeting {
        font-size:18px;
    }
    #social-links {
        max-width:250px;
        margin:0 auto;
    }
    #social-links li {
        padding-top:12px;
        transition: all .4s linear;
    }
    .description {
        font-size:15px;
        max-width:450px;
        text-align:center;
        margin:0 auto;
    }
    .linkedin .tooltiptext, .github .tooltiptext {
        top:-17px;
        opacity: 0;
        transition: opacity 1s;
    }


    @media (max-height:858px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
    @media (max-height:822px) {
        .copyright {
            display:none;
        }
    }
}
@media (max-width:433px) {
    .copyright {
        display:none;
    }
    .description {
        font-size: calc(13px + 0.390625vw);
    }
}
@media (max-width:377px) {
    @media (max-height:880px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
}
@media (max-width:298px) {
    .greeting {
        font-size: calc(15px + 0.390625vw);
    }
    .title {
        font-size: calc(14px + 0.390625vw);
    }
    #resume-link {
        max-width:150px;
        margin:0 auto;
    }
    @media (max-height:905px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
}
@media (max-width:250px) {
    @media (max-height:923px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
}

@media (max-width:239px) {
    p.email a {
        font-size: calc(11px + 0.390625vw);
    }
    #profile-pic {
        display:block;
        margin:0 auto;
        max-width:85%;
    }
    .title {
        font-size: calc(13px + 0.390625vw);
    }
    .greeting {
        font-size: calc(13px + 0.390625vw);
    }
}
@media (max-width:219px) {
    @media (max-height:1018px) {
        .info-link {
            display:none;
        }
        .info-icon {
            display:inline-block;
        }
    }
}
@media (max-width:200px) {
    .not-compatible {
        display:block;
    }
    .main-container {
        display:none;
    }
}

/* About Page */
@media (min-width:546px) {
    @media (max-height:660px) {
        .copyright-about {
            display:none;
        }
    }
}
@media (max-width:545px) {
    @media (max-height:768px) {
        .copyright-about {
            display:none;
        }
    }
}
@media (max-width:453px) {
    .copyright-about {
        display:none;
    }
}