html,body{
  margin:0;
  overflow:hidden;
  color: white;
  font-family: Raleway;
  font-size: 3vw;
}    


.topLogo {
	display:block;
	margin-left:auto;
	margin-right:auto;
    margin-top:calc((100vh - 50vw) / 2);
	opacity:0.15;
	height:50vw;
    width:50vw;
}

.project1 {
    position:absolute;
    top:calc(50vh - 30vw - 10vw);
    right:calc(50vw - 0vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project1Title {
    position:absolute;
    top:calc(50vh - 30vw - 3.5vw);
    right:calc(50vw - 0vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project1:hover {
    cursor:pointer;
}

.project1Title:hover {
    cursor:pointer;
}

.project2 {
    position:absolute;
    top:calc(50vh - 15vw - 10vw);
    right:calc(50vw - 25.98vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project2Title {
    position:absolute;
    top:calc(50vh - 15vw - 3.5vw);
    right:calc(50vw - 25.98vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project2:hover {
    cursor:pointer;
}

.project2Title:hover {
    cursor:pointer;
}

.project3 {
    position:absolute;
    top:calc(50vh + 15vw - 10vw);
    right:calc(50vw - 25.98vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project3Title {
    position:absolute;
    top:calc(50vh + 15vw - 3.5vw);
    right:calc(50vw - 25.98vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project3:hover {
    cursor:pointer;
}

.project3Title:hover {
    cursor:pointer;
}

.project4 {
    position:absolute;
    top:calc(50vh + 30vw - 10vw);
    right:calc(50vw + 0vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project4Title {
    position:absolute;
    top:calc(50vh + 30vw - 3.5vw);
    right:calc(50vw + 0vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project4:hover {
    cursor:pointer;
}

.project4Title:hover {
    cursor:pointer;
}

.project5 {
    position:absolute;
    top:calc(50vh + 15vw - 10vw);
    right:calc(50vw + 25.98vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project5Title {
    position:absolute;
    top:calc(50vh + 15vw - 3.5vw);
    right:calc(50vw + 25.98vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project5:hover {
    cursor:pointer;
}

.project5Title:hover {
    cursor:pointer;
}

.project6 {
    position:absolute;
    top:calc(50vh - 15vw - 10vw);
    right:calc(50vw + 25.98vw - 10vw);
    height:20vw;
    width:20vw;
    opacity:0.6;
    border-radius:50%;
    border-color:white;
    border-width:0.5vw;
    border-style:solid;
    display:inline-block;
}

.project6Title {
    position:absolute;
    top:calc(50vh - 15vw - 3.5vw);
    right:calc(50vw + 25.98vw - 9.5vw);
    width:20vw;
    font-size:2.5vw;
    display:block;
}

.project6:hover {
    cursor:pointer;
}

.project6Title:hover {
    cursor:pointer;
}

@media (orientation:landscape) {
    html,body{
    margin:0;
    overflow:hidden;
    color: white;
    font-family: Raleway;
    font-size: 3vh;
    }   
    
    .topLogo {
	display:block;
	margin-left:auto;
	margin-right:auto;
    margin-top:25vh;
	opacity:0.15;
	height:50vh;
    width:50vh;
    }
    
    .project1 {
        position:absolute;
        top:calc(20vh - 10vh);
        right:calc(50vw - 0vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project1Title {
        position:absolute;
        top:calc(20vh - 3.5vh);
        right:calc(50vw - 0vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }

    .project2 {
        position:absolute;
        top:calc(35vh - 10vh);
        right:calc(50vw - 25.98vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project2Title {
        position:absolute;
        top:calc(35vh - 3.5vh);
        right:calc(50vw - 25.98vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }
    
    .project3 {
        position:absolute;
        top:calc(65vh - 10vh);
        right:calc(50vw - 25.98vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project3Title {
        position:absolute;
        top:calc(65vh - 3.5vh);
        right:calc(50vw - 25.98vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }

    .project4 {
        position:absolute;
        top:calc(80vh - 10vh);
        right:calc(50vw + 0vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project4Title {
        position:absolute;
        top:calc(80vh - 3.5vh);
        right:calc(50vw + 0vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }
    
    .project5 {
        position:absolute;
        top:calc(65vh - 10vh);
        right:calc(50vw + 25.98vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project5Title {
        position:absolute;
        top:calc(65vh - 3.5vh);
        right:calc(50vw + 25.98vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }

    .project6 {
        position:absolute;
        top:calc(35vh - 10vh);
        right:calc(50vw + 25.98vh - 10vh);
        height:20vh;
        width:20vh;
        opacity:0.6;
        border-radius:50%;
        border-color:white;
        border-width:0.5vh;
        border-style:solid;
        display:inline-block;
    }

    .project6Title {
        position:absolute;
        top:calc(35vh - 3.5vh);
        right:calc(50vw + 25.98vh - 9.5vh);
        width:20vh;
        font-size:2.5vh;
        display:block;
    }
    
}

/* Make all project title links white */
.project1Title a,
.project2Title a,
.project3Title a,
.project4Title a,
.project5Title a,
.project6Title a {
  color: white;
  text-decoration: none; /* removes underline */
}

/* Keep them white even after being visited */
.project1Title a:visited,
.project2Title a:visited,
.project3Title a:visited,
.project4Title a:visited,
.project5Title a:visited,
.project6Title a:visited {
  color: white;
}

/* Optional hover effect */
.project1Title a:hover,
.project2Title a:hover,
.project3Title a:hover,
.project4Title a:hover,
.project5Title a:hover,
.project6Title a:hover {
  color: #ddd; /* slightly lighter white */
  text-decoration: underline;
}