html{
    margin:0px;
    padding:0px;
    width:100%;
}
body {
    background-position-y: top;
    background-position-x: left;
    background-image:url('../../images/background-tile.svg');
    background-color:rgb(236, 236, 236);
    color: black;
    font-family: "Arial", Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    width:100%;
    overflow-y: scroll;
    overflow-x:hidden;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
.bg1{
    position:relative;
    background-image: url('../../images/website-background.png');
    padding:-30px;
    width:100vw;
    height:calc(100vh);
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
}

.bg2{
    position:relative;
    background-image: url('../../images/unity2.png');
    width:100vw;
    height:70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
}
.downbutton{
    font-size:17pt;
    line-height:60px;
    text-align: center;
    background-color:rgb(39, 39, 39);
    border: 1px solid white;
    color:white;
    left:0;
    right:0;
    margin:auto;
    height:60px;
    width:200px;
    position: absolute;
    bottom:5%;

}
.downbutton:hover{
    background-color:gray;
}
.container{
    /* border-left: 1px solid black;
    border-right: 1px solid black; */
    background-color:#FFFFFFBB;
    justify-content: center;
    display:flex;
    margin:0px auto 0px auto;
    padding:50px 20px 0px 20px;
    width:50%;
    max-width:100vw;
}
.darken{
    width:100%;
    height:100%;
    background-color: #00000099;
}
.subtext{
    max-width:450px;
    border-bottom: 1px solid black;
}
.contacticons{
    display:flex;
    align-content: center;
    justify-content: center;
}
.contacticons img{
    height:30px;
    padding:0px 10px 0px 10px;
}
nav{   
    background-color:white;
    color:black;
    margin:0;
    height:60px;
    padding:0px 100px;
}
nav:after{
    clear:both;
}
.navimg{
    margin:0;
    padding:5px;
    float:left;
    height:50px;
    width:50px;
}
.contact{
    color:white;
    width:100%;
    height:120px;
    background-color:#484848CC;
}
.contact h3{
    text-align: center;
    padding:20px;
    margin:0;
}
.profilepic{
    max-width:100%;
    width:300px;
    border-radius: 50%;
    margin:2% 0 15% 0;
}
.whoami{
    margin: 0% 3% 0% 3%;
    padding:0px 0px 10px 0px;
}
.maintext{
    text-align: center;
    color:white;
    top:0;
    bottom:0;
    position:absolute;
    left:0;
    right:0;
    max-width:800px;
    height:300px;
    margin:auto;
}
.bottomtext{
    border-bottom-style: solid;
    border-width: 1px;
    
}
.about{
    margin: 0% 3% 0% 3%;
    padding:0px;
}
h1{
    font-size:55pt;
    margin-bottom:0;
}
h2{
    font-size:28pt;
    margin-top:0;
    margin-bottom:2%;
}

ul{
    margin:0;
    list-style-type: none;
}
li{

    float:right;
}
li a {
    border-color:black;
    
    width:55px;
    margin:0px 20px;
    display:block;
    color:rgb(73, 73, 73);
    text-align: center;
    line-height: 56px;
    padding:1px 20px;
    text-decoration:none;
    border-bottom-style:solid;
    border-width:2px;
}

li a:hover {
    line-height: 54px;
    padding: 1px 20px 0px 20px;
    border-color: rgb(53, 165, 240);
}

@media only screen and (max-width:860px) {
    h1{
        font-size:8.5vw;
    }
    h2{
        font-size:5vw;
    }
    .container{
        flex-wrap: wrap;
        width:calc(100% - 40px);
    }

    .whoami p{
        padding-right: 40px;
    }

}