* { margin:0; padding:0; }

.hidden { display:none !important; }

.flex { display:flex; }
.justify-between { justify-content:space-between; }
.justify-around { justify-content:space-around; }
.justify-evenly { justify-content:space-evenly; }
.justify-center { justify-content:center; }
.align-center { align-items:center; }

body {
    font-family:"Quicksand";
    background-color:rgb(44, 44, 44);
    margin-top:7.5vh;
    margin-bottom:7.5vh;
}

a {
    color:white;
    text-decoration:none;
}
a:hover {
    color:yellow;
}

.wrap {
    margin:auto auto auto auto;
    display:flex;
    flex-direction:column;
    height:calc(85vh);
    max-width: 900px;
}
a { text-decoration: none;}

.interact-colour { background-color:rgb(175, 175, 255) !important; opacity:1 !important; }

.nav-styling {
    color:black;
    background-color:rgb(255, 255, 255);
    height:56px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    
}


/* nav */
.items {
    width:100%;
}
.items h1 {
    text-align:center;
    font-size:26px;
    cursor:progress;
}
.items .about-btn {
    margin-right:auto;
    padding:18px 20px;
    border-top-left-radius:8px;
    background-color:rgb(225, 225, 225);
    opacity:0.6;
    cursor:pointer;
}
.items .work-btn {
    margin-left:auto;
    padding:18px 20px;
    border-top-right-radius:8px;
    background-color:rgb(225, 225, 225);
    opacity:0.6;
    cursor:pointer;
}
.items .title-font-size { font-size:clamp(24px, 5vw, 34px); }
/* nav */

.main { 
    flex-grow:1;
}

.container {
    height:100%;
    color:white;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.work-view {
    display:flex;
    position:relative;
    flex-direction:column;
    justify-content:flex-end;
    background:black;
}

.about-view {
    background: radial-gradient(at 70% 80%, rgb(70, 70, 70), black);
    display:flex;
    position:relative;
    flex-direction:column;
    justify-content:flex-end;
}
.about-view .filler {
    height:40%;
}
.about-view .view-projects {
    width:140px;
    text-align: center;
    color:black;
    background-color:rgb(175, 175, 255);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    padding:10px 18px;
    font-size:20px;
    cursor:pointer;
    margin:0 50px;
}
.about-view h1 {
    font-size:48px;
    max-width:40%;
    margin:0 50px;
}
.about-view p {
    font-size:20px;
    max-width:54%;
    margin:0 50px;
}
.about-view p .inline-colour {
    color:rgb(175, 175, 255);
}
.about-view .img-wrapper-homepage {
    position:absolute;
    max-width:400px;
    height:480px;
    right:40px;
    bottom:0px;
}
.about-view .img-wrapper-homepage .merlin {
    height:100%;
    width:100%;
}

.slide-up {
    height:0px;
    width:100%;
    overflow:hidden;
    transition: all 0.45s ease-in-out;
    position:absolute;
    background-color:black;
    z-index:2;
    border-radius:6px;
}
.slide-up-div-height-clicked {
    height:85vh !important;
}

@media screen and (max-width: 750px) {
    .about-view .img-wrapper-homepage {
        display:none;
    }
    .about-view h1 {
        max-width:100%;
    }
    .about-view p {
        max-width:100%;
    }
  }

@font-face {
    font-family:"Quicksand";
    src: url("./fonts/Quicksand-VariableFont_wght.ttf");
}