@font-face {
    font-family: Sofia Pro;
    src: url("assets/Sofia Pro/desktop/SofiaPro-Regular.otf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family: Futura;
    src: url("assets/FuturaCyrillicMedium.ttf") /* TTF file for CSS3 browsers */
}

body, html {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 250%;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    cursor: url('assets/pointer_c.png'), auto;
}

a{
    cursor: auto;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}


body::-webkit-scrollbar {
    display: none;
}


#top{
    z-index: 1;
    color: white;
    text-shadow: rgb(73, 204, 237) 0px 0px 4px;
    font-family: IBM Plex Sans;
    font-size:4vw;
    left:12.5%;
    top: 35.2%;
    position: absolute;
    cursor:text;
}

#subhead{
    z-index: 1;
    color: white;
    font-family: Sofia Pro;
    font-size: 1vw;
    left:9.5%;
    top: 50%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
}
#subheadp{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
    z-index: 1;
    color: rgb(106, 0, 255);
    font-family: Sofia Pro;
    font-size: 1vw;
    left:9.6%;
    top: 50%;
    position: absolute;
}


#headr{
    z-index: 1;
    color: white;
    font-family: Futura;
    font-size: 3vw;
    right:73.9%;
    top: 43%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
}


#instruct{
    z-index: 1;
    color: white;
    font-family: Futura;
    font-size: 2vw;
    right:11.9%;
    top: 45%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
}

#laginstruct{
    z-index: 1;
    color: white;
    font-family: Futura;
    font-size: 1vw;
    right:14.5%;
    top: 50%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
    cursor: pointer;
    text-decoration: underline;
}
#projecthead{
    z-index: 1;
    color: white;
    font-family: Futura;
    font-size: 2vw;
    left:11.9%;
    top: 135%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
    transform: translate(-50%, -50%);
    display: none;
}


#middle8{
    z-index: 1;
    color: rgb(106, 0, 255);    
    font-family: Futura;
    font-size: 2vw;
    left:11.8%;
    top: 135%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
    transform: translate(-50%, -50%);
}

#abouthead{
    z-index: 1;
    color: white;
    font-family: Futura;
    font-size: 2vw;
    left:11.9%;
    top: 435%;
    position: absolute;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; 
    transform: translate(-50%, -50%);
}

#leftabout{
    z-index: 1;
    border-color:  rgb(73, 204, 237);
    top: 560%;
    width: 20vw;
    position: absolute;
    left: 5%;
    border-width: 1px;
    border-style: solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: flex;
    flex-direction: column;

}

#labout{
    margin-top: 6px;
    font-family: IBM Plex Sans;
    margin-left: 10px;
}

#desc{
    font-family: Futura;
    color: white;
    margin-left: 10px;
    margin-top: 10px;
}

#footer{
    font-family: Futura;
    color: white;
    margin-left: 10px;
    margin-top: 20px;
    font-size: small;
    margin-bottom: 10px;
}


#rightabout{
    z-index: 1;
    border-color: rgb(73, 204, 237);
    top: 560%;
    width: 20vw;
    position: absolute;
    right: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: flex;
    flex-direction: column;

}

#rabout{
    margin-top: 6px;
    font-family: IBM Plex Sans;
    margin-left: 10px;
}


#container{
    opacity: 0.6;
}

#titles{
    outline: white;
}

.picbtn{
    cursor:pointer;
    border:none;
    width:3vw;
    height:3vw;
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 10px
}

.email{
    font-family: Futura;
    color: rgb(129, 43, 250);
    margin-left: 10px;
    cursor: pointer;
}

.resume{
    font-family: Futura;
    color: white;
    margin-top: 18px;
    font-family: IBM Plex Sans;
    margin-left: 10px;
    cursor: pointer;
    margin-bottom: 10px;
}




#project1{
    z-index: 1;
    border-color: white;
    top: 530%;
    width: 20vw;
    position: fixed;
    left: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}
#projectlink1{
    margin-top: 7px;
    margin-bottom: 2px;
}
.projecttext{

    font-family: IBM Plex Sans;
    margin-left: 10px;
    color: white;
}

#project1image{
    content: url('assets/hoop.png');
    max-width: 400px;
}

#project2image{
    content: url('assets/cafe.png');
    max-width: 20vw;
}

#project3image{
    content: url('assets/slice.png');
    max-width: 400px;
}

#project4image{
    content: url('assets/nature.png');
    max-width: 400px;
}

#project5image{
    content: url('assets/leball.png');
    max-width: 400px;
}

#project6image{
    content: url('assets/monashreflect.png');
    max-width: 400px;
}

#project7image{
    content: url('assets/animehol.png');
    max-width: 400px;
}

#project8image{
    content: url('assets/leag.png');
    max-width: 400px;
}

#project9image{
    content: url('assets/mik.png');
    max-width: 400px;
}

.projectdesc{
    font-family: Futura;
    margin-left: 10px;
}

.projectskills{
    font-family: Futura;
    margin-top: 10px;
    margin-left: 10px;
    font-size:14px;
}

.projectlink{
    font-family: Futura;
    margin-left: 10px;
    font-size:14px;
    color: white;
    cursor: pointer;
}



#project2{
    z-index: 1;
    border-color: white;
    top: 390%;
    width: 20vw;
    position: fixed;
    right: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
}



#project3{
    z-index: 1;
    border-color: white;
    top: 180%;
    width: 20vw;
    position: fixed;
    left: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

#project4{
    z-index: 1;
    border-color: white;
    top: 180%;
    width: 20vw;
    position: fixed;
    right: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}
#project5{
    z-index: 1;
    border-color: white;
    top: 230%;
    width: 20vw;
    position: fixed;
    left: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

#project6{
    z-index: 1;
    border-color: white;
    top: 230%;
    width: 20vw;
    position: fixed;
    right: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

#project7{
    z-index: 1;
    border-color: white;
    top: 230%;
    width: 20vw;
    position: fixed;
    left: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

#project8{
    z-index: 1;
    border-color: white;
    top: 230%;
    width: 20vw;
    position: fixed;
    right: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

#project9{
    z-index: 1;
    border-color: white;
    top: 230%;
    width: 20vw;
    position: fixed;
    left: 5%;
    border-width: 1px;
    border-style: ridge solid;
    color: white;
    font-family: IBM Plex Sans;
    opacity: 0.6;
    display: none;
    flex-direction: column;
}

.progress-bar-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1200%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    accent-color: rgb(129, 43, 250);
    font-family: Futura;
    backdrop-filter: blur(3px);
}

#progress-bar {
    width: 30%;
    margin-top: 0.5%;
    height: 0.2%;
}


@media only screen and (max-width: 999px){

    
#headr{
    font-size: 8vw;
    top: 5%;
    left:26%;
}

#subhead{
    font-size: 2.8vw;
    top: 10%;
    left:32%;

}

#subheadp{
    font-size: 2.8vw;
    top: 10%;
    left:31.8%;
}


#instruct{
left:45%;
top:13.5%;
}

#laginstruct{
    left:45.8%;
    top:15%;
    font-size: 2vw;
}

#projecthead{
    font-size: 5vw;
    left:41.9%;
}


#abouthead{
    font-size: 5vw;
    left:41.9%;
}

#project1{
    left:20%;
    min-width: 200px;
}

#project2{
    left:20%;
    min-width: 200px;
}

#project2image{
    max-width: 200px;
}

#project3{
    left:20%;
    min-width: 200px;
}

#project4{
    left:20%;
    min-width: 200px;
}

#project5{
    left:20%;
    min-width: 200px;
}

#project6{
    left:20%;
    min-width: 200px;
}

#project7{
    left:20%;
    min-width: 200px;
}

#project8{
    left:20%;
    min-width: 200px;
}

#project9{
    left:20%;
    min-width: 200px;
}

#leftabout{
    left:20%;
    min-width: 200px;
}
#rightabout{
    left:20%;
    min-width: 200px;
}


.picbtn{
    width:25px;
    height:25px;
}

}