/* @font-face {
	font-family: 'myFont';
	font-style: normal;
	font-weight: normal;
	src: local('gill-sans/Gill\ Sans.otf');
} */

p, h1, h2, h3, a {
    color: #FDE8E9;
    /* font-family:'myFont'; */
}
.centeredHeader {
    position: absolute;
    z-index: 3;
    text-align: center;
    /* font-family:'myFont'; */
    color: #1F2232;
    font-size: 60;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    opacity: 0;
    transition: opacity 1s;
}

.introMenu {
    position: absolute;
    z-index: 3;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    top: 82%;
}

.introMenuButton {
    text-align: center;
    /* font-family:'Gill Sans'; */
    font-size: 25;
    font-weight: bold;
    color: 20%#1F2232;
    height: 10vh;
    background-color: #1F223250;
    border: 2px solid #FDE8E9;
    border-radius: 6px;
    border: none;
    color: #FDE8E9;
    width: 25%;
    opacity: 0;
    transition: opacity 1s;
}

.introMenuButton:hover {
    transition: background-color .4s;
    background-color: #1F223270;
}
.introMenuButton:active {
    transition: background-color 0s;
    background-color: #1F2232A0;
}

.commonPanel {
    position: absolute;
    z-index: 2;
    text-align: center;
    left: 50%;
    top:5%;
    transform: translate(-50%, 0);
    /* font-family:'Gill Sans'; */
    width: 70%;
    height: 80%;
    opacity: 0;
    transition: opacity 1s;
    background-color: #1F2232A0;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.startMenu {
    opacity: 1;
    transition: opacity .5s;
}

.backButton {
    position: absolute;
    width: 30vw;
    height: 10vh;
    left: 50%;
    bottom: 0;
    margin-bottom: calc((5vh) / 2);
    transform: translate(-50%, 0);
}

.centeredPageHeader {
    z-index: 3;
    text-align: center;
    color: #FDE8E9;
    font-size: 35;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

.socials {
    position: fixed;
    top: 2vh;
    right: 0;
    color: #1F2232;
    z-index: 3;
    width: 5%;
    transition: opacity .5s;
    opacity: 0;
}

.contactSquare {
   float: right;
    position: relative;
    margin-right: 1vw;
    margin-bottom: 1vh;
    height: auto;
    /* bottom: 2vh */
}
.contactImg {
    height: 5vh;
    width: auto;
}

.textH2 {
    margin-bottom: 5px;
}

.textH3 {
    margin: 0;
    font-size: var(--textVar);
}
.textP {
    top: 3px;
    bottom: 4vh;
    font-weight: normal;
    text-align: left;
}
.projectDiv {
    height: 6vh;
}

.textH1 {
    margin: 3vh 0;
}

body { margin: 0;
    background-color: #1F2232; 
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    font-family: Tahoma, sans-serif;
    font-weight: bold;

}
canvas { width: 100%; height: 100%; z-index: 1;}

.progress-bar-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4;
    transition: opacity 0.5s;
}

#progress-bar {
    width: 30%;
    margin-top: 0.5%;
    height: 2%;
    accent-color: #BC9EC1;
    /* border-color: #1F2232; */
    /* border 0px; */
    /* border:none; */
    /* border-radius: 10px; */
}

label {
    color: #FDE8E9;
    font-size: 2rem;
    /* font-family:'Gill Sans'; */
}

progress[value]::-webkit-progress-bar {
   accent-color: #FDE8E9 !important;
}
progress[value]::-webkit-progress-value {
   background: #BC9EC1 !important;
}

.text404 {
    font-size: 70px;
    width: 100%;
    position: relative;
}

.centerDiv404 {
    text-align: center;
    /* font-family:'Gill Sans'; */
    color: #FDE8E9;
    width: 100%;
    top:50%;
    position: absolute;
   transform: translate(0, -50%);
}

.text404small {
    font-size: 30px;
    width: 100%;
    position: relative;
} 

.inFront {
    z-index: 100;
}

.ianPics {
    width: 20%;
    height: 100px;
}

.projectArray {
    display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 20px;
	padding-right: 20px;
	padding-left: 20px;
	height:  calc(100% - 120px);
}

.buttonCtr {
    background-position: center;
    border-radius: 6px;
    object-fit: cover;
    background-size: cover;
    height: 100%;
}

.projButton {
    width: 100%;
    height: 100%;

    text-align: center;
    transition: opacity 1s;
    background-size: cover;

    background-color: #1F223280;
    color: #FDE8E9;
    border: none;
    border-radius: 6px;
    font-size: 25;

    font-weight: normal;
}

.projButton:hover {
    transition: background-color .4s;
    background-color: #1F223290;
    top:4px;
}

.visible {
    opacity: 1;
    z-index: 100;
    pointer-events: all;
}

*, *::after, *::before {
	/* font-family: 'Almarai Regular'; */
	-webkit-user-select: none;
    user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
	cursor: default;
}