body {
margin:0px;
}
#divLoad {
width:100%;
height:100%;
background-color:#9ec3ff;
z-index:99;
text-align:center;
padding-top:100px;
overflow:hidden;
position:fixed;
}
#divLoad img {
    position:relative;
    top:25%;
    font-size:100px;
    animation-name: loading;
    animation-duration: 1.5s;
    animation-iteration-count: 20;
}
/* Standard syntax */
@keyframes loading {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
#textLoad{margin:0px;opacity:0.0;}

.pagebanner {
    padding-top: 70px;
    text-align: center;
    position:relative;
}

.pagebanner-light {
    background-color: rgb(255 255 255);
    background-image: linear-gradient(224deg, #00000054, #00000017);
}

.pagebanner-dark {
    background-image: linear-gradient(131deg, #050516, #0e1035);
}

.pagebanner-light h2, .pagebanner-light h3 {
    color:#4e4e4e;
}

@media only screen and (max-width: 600px) {
    .pagebanner h2 {
        font-size: 35px;
    }

    .pagebanner h3 {
        display: none;
    }

    .pagebanner {
        
        padding-top:35px;
    }

    .right-image, .left-image {
        filter: blur(1px) !important;
    }

    .left-position, .right-position {
        width:100% !important;
        height:50% !important;
    }

    .right-position {
        top:50% !important;
    }

    .skill-div h3 {
        font-size: 30px !important;
        top:130px !important;
        display: block;
    }

    .skill-div h4 {
        font-size: 16px !important;
        top:190px !important;
    }
}

.pagebanner-dark h2, .pagebanner-dark h3 {
    color:#e6e6e6;
}

.projectContainer {
    margin:auto;
}
.projectBanner {
    display: inline-block;
    margin: 1%;
    text-align: center;
    cursor: pointer;
}
.bannerImgContainer {
    border-radius: 100%;
    box-shadow: 0 0 15px 0 black;
    overflow: hidden;
    margin: auto;
    background-size: cover;
    background-position: center center;
    transition: border-color, 0.5s;
}
.projectBanner img {
    width: 180%;
    margin-left: -45%;
}
.projectBanner p {
    
    /*border-bottom: 2px solid #d36464;*/
    display: inline-block;
    color: black;
    margin-bottom:5px;
}
.projectBanner:hover > .bannerImgContainer {
    border-color: #64d36e;
    transition: border-color, 0.5s;
}
.projectBanner:hover > .underline {
    width:100%;
    transition: width, 0.5s;
}
.underline {
    background-color: #64d36e;
    height: 3px;
    width: 0%;
    margin:auto;
    transition: width, 0.5s;
}

.displayTable {
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    font-size:20px;
}

.displayTable td {
    padding:10px;
}

.displayTable td:nth-child(1) {
    border-left:1px dotted;
    }

    .displayTable td:nth-child(2) {
    border-right:1px dotted;
    }

    a:link, a:active, a:visited {
    text-decoration:none;
    color:white;
}
h2 {
    font-size:60px;
    margin-bottom:10px;
    margin-top:10px;
    z-index:1;
    position: relative;
}
h3 {
    position: relative;
    z-index:1;
}
.scrollBanner {
    background-position: center center;
    background-size: 100%;
    position:relative;
}

.privacycontent {
    width: 800px;
    margin: auto;
    background-color: rgba(255,255,255,0.1);
    padding: 80px 20px;
    border-right: 2px dashed;
    border-left: 2px dashed;
    overflow-y: scroll;
}
html::-webkit-scrollbar { 
    display: none; 
}
.text {
    color: #f2f2f2;
    font-size: 75px;
    padding: 8px 12px;
    position: absolute;
    top: 382.5px;
    text-align: center;
    font-weight:bold;
}

@media screen and (max-width: 600px) {
    .text {
        top: 300px;
        font-size: 35px;
        left: 0;
        right: 0;
    }
}

.revaForm {
    margin: auto;
}
#banner {
    font-size: 20px;
    background-color:#6d67a5;
    overflow: hidden;
    background-image: linear-gradient(44deg, #050023cf, transparent);
    position:relative;
}

::-webkit-input-placeholder {color: white;}

input:autofill {
    background-color:none;
    color:white;
}
#invalidSign {color: #ff5656;}

.pillarEffect {
    position:relative;
    background-image: linear-gradient(to bottom right, #7b55bf, #6d67a5);
    box-shadow:0px 0px 5px 5px #665fa2;
    opacity:0.8;
}


.rev-button {
    padding: 5px 15px;
    font-size: 17px;
    border: none;
    border-bottom: 1px solid;
    cursor: pointer;
    background-color: transparent;
}

.left-position {
    width:50%;
    position: absolute;
    top: 0;
    height:100%;
}

.right-position {
    width:50%;
    position: absolute;
    top: 0;
    right: 0;
    height:100%;
}

.left-image {
    background-image:url("/images/phpCode.PNG");
    filter: blur(4px);
    background-size: 105%;
    background-position: 50%;
    transition: background-size 1s, filter 1s;
}

.right-image {
    background-image:url("/images/unityEditor.PNG");
    filter: blur(4px);
    background-size: 200%;
    background-position: 40%;
    transition: background-size 1s, filter 1s;
}

.skill-div {
    background-color: #00000052;
}

.skill-div h3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 330px;
    font-size: 40px;
    font-family: monospace;
}

.skill-div h4 {
    position: absolute;
    color: white;
    top: 395px;
    left: 0;
    right: 0;
    font-size: 22px;
    font-family: monospace;
}

.cv-content {
    color:white;
}

.left-column {
    width: 50%;
    position: absolute;
    left: 5%;
    border-right: 1px solid white;
}

.right-column {
    width: 30%;
    position: absolute;
    right: 5%;
    border-left: 1px solid white;
}

.cv-entry {
    height: 20px;
    padding: 15px 40px;
    
}

.cv-entry-primary {
    float:left;
}

.cv-entry-secondary {
    /* position: absolute;
    left: 81%; */
    float: right;
}

.cv-entry-middle {
    position: absolute;
    left: 51%;
}

.spotify {
    width: 600px;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    transform: scale(0.8);
}