html{
    height: 100%;
}

body{
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Monaco !important;
}

section{
    height: 100%;
    padding-top: 20px;
}
#page1 {
    background-color: rgb(128, 163, 128);
    height: 85%;
}

#page2 {
    background-color: rgb(190, 90, 76);
    height: 10%;
}

#page3{
    background-color: rgb(190, 90, 76) !important;
    height: 80%;
}

#page4{
    background-color: rgb(219, 219, 221);
    height: 130%;
}

#page5{
    height: 100%;
    background-color: rgb(243, 239, 239);
}

#page6{
    height: 10%;
    background-color: white;
}
#page7{
    background-color: rgb(128, 163, 128);
    height: 10%;
    padding-top: 20px;
}

.navbar {
    background-color: white;
    font-family: Monaco;
    color: black;
}

h1{
    text-align: center;
}
.name{
    color: white;
    font-size: 90px;
    padding-top: 100px;
    margin-bottom: 0;
}

#statement{
    color: black;
    font-size: 30px;
    padding-bottom: 120px;
    padding-top: 60px;
    text-align: center !important;
}

#hello{
    color: white;
    font-size: 70px;
    padding-top: 80px;
}

#about{
    color: white;
    text-align: center;
    font-size: 20px;
    padding-bottom: 120px;
}

#copyright{
    color: black;
}

#PCIC{
    padding-top: 100px;
}

.my-container {
    text-align: center;
}
.my-row {
    height: 350px;
}
.my-col {
    border: solid rgb(190, 190, 190);
    border-width: thin;
}

.contactLinks{
    color: black !important;
}


/* Animation for name/*

/* Basic styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root{
    --bg-color: #D8D8D8;
}

/* title styles */
.name span{
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
}

.name span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.name span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.name span:nth-of-type(1)::before,
.name span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.name span:nth-of-type(2)::before,
.name span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}