@charset "UTF-8";
.boxes {
    margin-top: 2.5%;
	height: 67.5vh;
}
.boxes .menu {
	width: calc(100% / 3);
	height: 100%;
    float: left;
}
.boxes .languages {
	width: calc(100% / 3);
	height: 100%;
    float: left;
}
.boxes .about {
	width: calc(100% / 3);
	height: 100%;
    float: right;
}

.boxes .menu .box {
    width: 65%;
    height: 100%;
    padding: 0%;
	padding-top: 0%;
    border: 8px solid #666666;
    margin-left: calc(17.5% - 8px + ((17.5% - 8px) / 2));
}
.boxes .languages .box {
    width: 65%;
    height: 100%;
    padding: 0%;
	padding-top: 0%;
    border: 8px solid #666666;
    margin-left: calc(17.5% - 8px);
}

.boxes .about .box {
    width: 65%;
    height: 100%;
    padding: 0%;
	padding-top: 0%;
    border: 8px solid #666666;
    margin-left: calc(17.5% - 8px - ((17.5% - 8px) / 2));
	
}

.boxes .languages .box .language {
	font-size: 140%;
    text-align: center;
	text-indent: 0%
}
.boxes .languages .box .Experience { /* ew why is it capitalised i really cant be bothered fixing it rn so do this later */
	text-align: center;
	text-indent: 0%;
	margin-top: 1%;
	margin-bottom: 4%;
}

.boxes .languages .box .title {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 140%;
    width: 100%;
	margin-top: 4%;
}
.boxes .about .box .title {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 140%;
    width: 100%;
	margin-top: 5%;

}

.boxes .languages .box .line {
	width: 95%;
	height: 7px;
	margin-top: 5%;
	margin-bottom: 7%;
	margin-left: 2.5%;
	border-radius: 100px;
	background: #666666

}
.boxes .about .box .line {
	width: 95%;
	height: 7px;
	margin-top: 5%;
	margin-bottom: 7%;
	margin-left: 2.5%;
	border-radius: 100px;
	background: #666666

}
.name {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    height: 100%;
    width: 100%;
	margin-top: 4%;
}
.line {
    width: 16%;
    height: 7px;
    margin-top: 1%;
    margin-left: 42%;
    border-radius: 100px;
    background: #666666;
    font-size: 20%;
}

/* BUTTONS BUTTONS BUTTONS */
/* BUTTONS BUTTONS BUTTONS */
/* BUTTONS BUTTONS BUTTONS */

.menu .box .home {
    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    height: calc(100%/ 4);
    color: #999999;
    border-style: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    background-color: #333333;
}
.menu .box .home:hover {
	background-color:#3F3F3F
}
.menu .box .projects {
    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    height: calc(100%/ 4);
    color: #999999;
    border-style: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    background-color: #333333;
}
.menu .box .projects:hover {
	background-color:#3F3F3F
}
.menu .box .github {
    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    height: calc(100%/ 4);
    color: #999999;
    border-style: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    background-color: #333333;
}
.menu .box .github:hover {
	background-color:#3F3F3F
}
.menu .box .contact {
    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    height: calc(100%/ 4);
    color: #999999;
    border-style: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    background-color: #333333;
}
.menu .box .contact:hover {
	background-color:#3F3F3F
}

/* PROJECTS PAGE CSS :D */

.boxes .projects {
	width: calc((100% / 3) * 2);
    height: 100%;
    float: right;
    text-indent: 0px;
}

.boxes .projects .box {
    width: calc(50% + (50% * 0.65) + (50% * 0.175) - 8px - (((50% * 0.175) - 8px) / 2));
    height: 100%;
    border: 8px solid #666666;
    overflow: auto;
    scrollbar-color: #666666 #333333;
    scrollbar-width: 2%;
    font-size: 200%;
    text-align: left;
}

.namebox {
    width: calc(100% / 3);
	margin-top: 4%;
}

.name1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 160%;
    height: 100%;
    width: calc(65% + 16px);
	margin-left: calc(17.5% - 8px + ((17.5% - 8px) / 2));
    text-align: center;
    float: none;
}

.line1 {
    width: 16%;
    height: 7px;
    margin-top: 1%;
    margin-left: calc((100% / 3) * 0.175 - 8px + (((100% / 3) * 0.175 - 8px) / 2) + 3%);
    border-radius: 100px;
    background: #666666;
    font-size: 20%;
    float: none;
}

.abouttocry {
	width: calc((100% / 3) * 2);
    float: right;

}

.projectstitle {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 200%;
    height: 100%;
    width: 100%;
    float: none;
    margin-top: 0%;
    text-align: left;
}

/* project formatting */

.boxes .projects .box .project:hover {
	background-color:#3F3F3F
}

.boxes .projects .box .project .title {
    font-size: 120%;
	margin-left: 2%;
	margin-top: 2%;
}

.boxes .projects .box .project .language {
    font-size: 100%;
	margin-left: 4%;
	margin-top: 0.5%;
}

.boxes .projects .box .project .description {
    font-size: 75%;
	margin-left: 4%;
	margin-top: 0.5%;
}

.boxes .projects .box .project .seperator {
	width: 50%;
	height: 7px;
	margin-top: 3%;
	margin-left: 25%;
	border-radius: 100px;
	background: #666666
}

/* GENERIC NAME
	GENERIC NAME
	Generic nfdniwekgfheshgierhgt */

.returnBox {
	position: absolute;
	margin-left: 0.5%;
	margin-bottom: 0.5%;
	text-align: left;
    float: left;
}

.returnBox:hover {
	color: #B9B9B9;
	border-color: #B9B9B9;
}

.ReturnLine {
	width: 95%;
	height: 4px;
	margin-top: 5%;
	margin-bottom: 7%;
	margin-left: 2.5%;
	border-radius: 100px;
	border-width: thick;
	border-color: #666666;

}

.boxes1 {
	height: 97vh;

}

.boxes1 .mainBox {
	position: absolute;
    width: 65%;
    height: 90%;
    padding: 0%;
	margin-top: 1.5%;
    border: 8px solid #666666;
    margin-left: 16.25%;
	
	overflow: auto;
    scrollbar-color: #666666 #333333;
    scrollbar-width: 2%;
    font-size: 200%;
    text-align: left;

}