@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Iansui&family=Jaini&family=Oswald:wght@200..700&display=swap');

*{
    padding:0; margin:0;
}
html{
    overflow-x: hidden;
}
.body{
    display:flex;
    flex-direction: column;
    margin-bottom:0;
}


.bg{
    width:100%;
    height:100vh;
    
    position:relative;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-content:center;
    background-position: center;
    background-size: cover;
}
.ed-sticky-background{
    color:#C14600;
    /* color:rgb(34, 13, 13); */
    background-color:beige;
}
.clg-sticky-background{
    color:#276364;
    background-color:#DAC4D0;
}

.ed-sticky-text{
    position:sticky; overflow: hidden;
    z-index:1;
    top: 5%;
    text-align:center;
    background-color: beige;
    font-size:3.75rem;
    padding-left:0.625rem; padding-right: 0.625rem;
    font-family: "Oswald";
    font-weight: 700;
}

.clg-sticky-text{
    position:sticky; overflow: hidden;
    z-index:1;
    top: 5%;
    text-align:center;
    background-color: #DAC4D0;
    font-size:3.75rem;
    padding-left:0.625rem; padding-right: 0.625rem;
    font-family: "Oswald";
    font-weight: 700;
}

.scroll-down-indicator{
    position:absolute;
    z-index:0;
    bottom:0;
    left:50%;
    /* overflow: hidden;top:8%; */
    width:5vw;height:auto;

    animation:bounce 1s infinite;
}

.big-flex{
    position: relative;
    flex-direction: column;
    margin-bottom:0;
    padding-bottom:30vh;

    justify-content: space-around;
    /* deletable */
}


.nav{
    position:sticky;z-index: 1;
    top:0;
    overflow: hidden;
    background-color:transparent;

    padding-top:0.625rem;
    display: flex;
    justify-content:space-between;
}

.nav-button{
    font-size:4vh; font-weight: bold;
    margin-left:0.625rem; margin-right: 0.625rem;
    opacity: 0.7;
    padding-left:5%; padding-right:5%;
    border-radius: 2.5rem;;
    cursor:cell;
}
.nav-ed-button{
    border-radius:2rem;
    border: solid 0.188rem #C14725;
    background-color: rgba(245, 245, 220,0.9);
    color: #C14725;
}
.nav-clg-button{
    border: solid 0.188rem #1d4747;
    background-color: rgba(218, 196, 208,0.9);
    color: #1d4747;
}

.nav-button:hover{ 
    opacity: 1;
    transition: 0.25s ease;
}
.nav-ed-button:hover{
    transition: 0.25s ease;
    background-color:rgba(193, 71, 37, 0.8);
    color:beige;
}
.nav-clg-button:hover{
    transition: 0.25s ease;
    background-color:rgb(29, 71, 71,0.8);
    color:#DAC4D0;
}
.nav-button:active{
    opacity: 0;
}

.left-align{
    padding-left:4%;
    margin-right:8%;
    text-align: left;
}
.right-align{
    padding-right:4%;
    margin-left:8%;
    text-align: right;
}

.grid{
    padding-top:0; padding-bottom:2%;
    display:grid;
    grid-template-areas:
    "flex"
    "flex"
    "flex"
    "flex";
    background-color: transparent;
}
.ed-big-flex{
    background-color: beige;
}
.clg-big-flex{
    background-color: #DAC4D0;
}

.flex-in-grid{
    display:flex;
    position:relative;
    justify-content:center;
    column-gap:4%;
    margin-top:5%;
}

.image-box{
    max-width:35%;
    align-self:center;
}
.image-box-on-left>a>img{
    border-top-left-radius: 1.875rem;
    border-bottom-left-radius: 1.875rem;
}
.image-box-on-right>a>img{
    border-top-right-radius: 1.875rem;
    border-bottom-right-radius: 1.875rem;
}
.margin-left{
    margin-left:15%;
}
.margin-right{
    margin-right:15%;
}
.image-box>a>img{
    object-fit: cover;
    height: 30vw;
    width:100%;
    filter:blur(0.25rem) hue-rotate(45deg);

    border-width:5; border-style: solid;  
}
.image-box>a>img:hover{
    scale:1.01;
    filter: grayscale(0) blur(0) brightness(100%) hue-rotate(0);
    transition: 0.75s ease;
}
.image-box>a>img:active{
    filter:invert(80%);
}

.ed-image-box>a>img{
    border-color:transparent;
}
.ed-image-box>a>img:hover{
    border-color:#CE744D;
}

.clg-image-box>a>img{
    border-color:transparent;
}
.clg-image-box>a>img:hover{
    border-color:#276364;
}

.text-box{
    display: flex;
    flex-direction: column;
    justify-content: center;

    font-size:3vh;
    text-wrap: wrap;
    width: 50vw;
}
.text-box-heading{
    font-family : "Iansui", cursive;
    font-size: xxx-large;
    padding-bottom:3%;
}
.text-box-content{
    font-family: "Jaini", system-ui;
    letter-spacing: 0.063rem;
    font-weight: 100;
}

.ed-text-box{
    background-color:rgba(193, 71, 37, 0.7);
    color:black;
}
.clg-text-box{
    background-color:#276364d9;
    color:white;
}


.text-box-on-right{
    padding-left:4%;
    padding-right:1%;
    padding-top:4%; 
    padding-bottom:4%;

    border-top-right-radius: 1.875rem;
    border-bottom-right-radius: 1.875rem;
}
.text-box-on-left{
    padding-left:4%;
    padding-right:2%;
    padding-top:4%; 
    padding-bottom:4%;


    border-top-left-radius: 1.875rem;
    border-bottom-left-radius: 1.875rem;
}

#index-body{
    background-color: #d7ccbb;
}

.homepage-heading{
    position:relative; z-index:1;
    text-align:center;
    color: #1A3636;
    font-family: "Oswald"; font-size: 10vh;
    letter-spacing: 0.25rem; 
    background-color: #d7ccbb;
    height: 15vh;
}
.homespace{
    display:flex;
    height: 85vh;
    background-color: #d7ccbb;
}
.left-home{
    position:relative;
    background-image: linear-gradient(45deg, #d7ccbb,#d7ccbb29, #d7ccbb00), url(../images/me-pool.jpg);
    filter:blur(0.01vw);
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    width:50%;
}
.me-image{
    width:100%;
    object-fit:cover;
}
.name-alias{
    position:absolute;
    top:60%; left:60%;
    transform:translate(-50%, -50%);

    background-color: #677D6A;
    padding-left:2%; padding-right:10%;
    width:80%;
    text-align:right;

    border-top-left-radius: 2.188rem;
}

.name{
    font-size:6vh;
    font-family:"Iansui", cursive;
}
.alias{
    font-size:4vh;
    color:#d7ccbb;
    font-family: "Iansui", cursive;
}

.right-home{
    padding-top:3vh;
    padding-bottom:3vh;

    display:flex;flex-direction:column;
    width:40%; height:80vh;
    justify-content: space-around;
    padding-left:5%;   
    row-gap: 4vh;
}

.homepage-link{
    display:flex; flex-direction: column; justify-content: center;

    width: 60%; height: 10vh;
    align-self: center;
    text-align:center;
    border: solid 0.188rem #1A3636;
    border-radius: 1.25rem;
    /* how to vertically align text? */
    /* padding-top:5vh; padding: bottom 5vh;  */
    padding-left:1vw; padding-right: 1vw;

    color:#1A3636;
    font-size: 3vh; text-decoration: none;

    font-family: "Fredericka the Great", serif; letter-spacing: 0.125rem;
}
.homepage-link:hover{
    transition:0.35s ease;
    background-color: #1A3636;
    color: #d7ccbb;
    scale: 1.04;
}

#clg-bg{
    background-image:linear-gradient(60deg, rgb(50, 50,50),rgb(33, 38, 40));
}

#clg-grid{
    background-color: transparent;
}

.content-bg{
    position:absolute; z-index: -2;
    top:0;left:0;right:0;bottom:0;
    
    background-position: center;
    background-size: cover;
}
.clg-content-bg{
    background: #0f2027;
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
}
.edu-content-bg{
    background: #0f2027;
    background: linear-gradient(60deg,#174370dc, #2a629ac2, #ff7e3e9f);
}

.minibox-heading{
    font-weight:bold;
    text-decoration:underline ;
}

.footer{
    background-color: rgb(24,24,24);
    display: flex;
    justify-content: center;
}
.contact{
    font-size: 3vh;
    padding-left:4vw; padding-right: 4vw; padding-top:1vh;
    background-color: purple;
    height:5vh; width: auto;
    color: whitesmoke;
    transition:color 0.4s ease, background-color 0.4s ease, padding 0.4s ease;
    border-radius:1.563rem;
}
.contact:hover{
    padding-left:7vw; padding-right: 7vw;
}
.contact:active{
    color:purple;
    background-color: whitesmoke;
}

.footer{
    bottom:0; left:0; right:0;
    display:flex; flex-direction: column;
    justify-content: center;
    height:40vh;
}
.footer-ed{
    background-color: #d48862ca;
}
.footer-clg{
    background-color: #538085dc;
}
.footer-heading{
    width:100%;
    font-family : "Fredericka the Great", serif;
    font-size: xxx-large;
    font-weight: 800;
    padding-bottom:3%;
    text-align:left;
    padding-left:3%;
}
.contact-flex{
    /* position:relative; */
    bottom:0;
    display:flex; flex-direction: row;
    width:100%;
}

.my-photo-div{
    display:flex;
    justify-content: center;
    width:40%; height: 100%;
}

.my-photo{
    align-self: center;
    object-fit:scale-down;
    height:100%;
    object-position: top;
}

.contact-button-flex{
    display:flex;
    flex-direction: column;
    width: 40%;
    justify-content: space-around;
    align-items: center;
    row-gap: 0.375rem;
}

.footer-contact-button{
    position:relative;
    display: flex; flex-direction: row; flex-grow: 1;
    border: solid 0.125rem transparent; border-radius: 0.313rem;
    height: 25%; width:80%;
}
.clg-footer-contact-button:hover{
    transition: 0.15s linear;
    border-color: rgb(77, 202, 233);
}
.ed-footer-contact-button:hover{
    transition: 0.15s linear;
    border-color: rgb(190, 23, 76);
}
.footer-contact-button>div{
    position: absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);

    font-family:"Iansui", cursive;
    font-size: 3vh;
    font-weight: 700;
}

.clg-footer-contact-button>div{
    color:black;
}
.ed-footer-contact-button>div{
    color:black;
}
.footer-contact-button>img{
    position: absolute;
    left:2%; top:50%; transform: translateY(-50%);

    height: 2.5rem;
    width: auto;
}

.contact-text-home-hyper{
    position:absolute;
    z-index: 2;
    top:55%; left:50%;
    transform: translate(-50%, -50%);
    padding-left:2%; padding-right: 2%;
    color:#FFC26F;
    background: rgba(40, 40, 2, 0.83);
    border-radius:0.625rem;
    font-size:6vh;
    text-align: center;
    font-family: "Merienda"; 
}

.center-photo{
    transform-origin:center;
    position:absolute; z-index: 1;
    top:50%; left:50%;
    width:20vw;height:30vh;
    transform: translate(-50%, -50%);
    background-image:url('../images/me-convo.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius:50%;
}

.github{
    position:absolute; z-index: 1;
    top:50%; left:50%;
    width:15vh;height:15vh;
    transform: translate(-50%, -50%);
    animation: planet-github 7s infinite linear;
}

/* .slack{
    position:absolute; z-index: 1;
    top:50%; left:50%;
    width:10vh;height:10vh;
    transform: translate(-50%, -50%);
    animation: planet-slack 13s infinite linear;
} */

.gmail{
    position:absolute; z-index: 1;
    top:50%; left:50%;
    width:10vh;height:10vh;
    transform: translate(-50%, -50%);
    animation: planet-gmail 10s infinite linear;
}

/* .insta{
    position:absolute; z-index: 1;
    top:50%; left:50%;
    width:10vh;height:10vh;
    transform: translate(-50%, -50%);
    animation: planet-insta 18s infinite linear;
} */




.contact-buttons{
    background-color: transparent;
    width:45%;
    padding-left:10%; padding-right:5%;
    row-gap:5%;
    display:flex; flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}
.contact-button-hyper{
    background-color:transparent;
    display:flex;
    justify-self: center;
}
.contact-flex-button{

    background-color:transparent;
    display:flex;
    justify-self: center;
    width:100%;
}
.contact-button-logo{
    max-height: 15vh;    
}
.contact-button-other-half{
    flex:1;
    text-align: center;
    justify-self: center;
    position:relative;
}
.button-name{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);

    color:#FF6500;
    font-weight:bold;
    font-size: 5vh;
    text-wrap: wrap;
    font-family: "Play";
}

@media all and (max-width:50rem){
    .homepage-heading{
        font-size:5.5rem;
        height: 35vh;
    }
    .homespace{
        height: 65vh;
    }

    .right-home{  
        height: auto;
    }

    .homepage-link{
        width:40vw;
        font-size: 1rem;
    }

    .image-box>a>img{
        filter:blur(0) hue-rotate(0);
        border-width:0.313rem; border-style: solid;
    }

    .ed-image-box>a>img{
        border-color:#CE744D;
    }
    .clg-image-box>a>img{
        border-color:#276364;
    }

    .image-box{
        max-width:35%;
    }

    .text-box-heading{
        font-size:1.4rem;
    }
    .text-box-content{
        font-size:1rem;
    }
    .footer-heading{
        width:auto;
    }
    .footer-contact-button>div{
        font-size:1rem;
        position:absolute;
        left:50%; top:50%;
        transform:translate(-10%, -50%);
    }
}




@media all and (max-width:23.75rem){

    .homespace{
        height: 85vh;
    }

    .homepage-heading{
        font-size:3rem;
        height: 15vh;
    }
    
}