/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 15, 2021, 6:39:14 PM
    Author     : Robert
*/

html
{
    scroll-behavior: smooth;
}

*{
    box-sizing: border-box;
    font-family: sans-serif;
}

.container_title
{
    color: white;
    width: 95%;
    margin: 0 auto;
    padding-top: 1%;
    font-style: italic;
    padding-bottom: 0.5%;
    text-transform: uppercase;
    font-size: 0.8em;
    font-family: Verdana;
}

.container_title_landing
{
    color: white;
    width: 80%;
    margin: 0 auto;
    padding-top: 1%;
    font-style: italic;
    padding-bottom: 0.5%;
    text-transform: uppercase;
    font-size: 0.8em;
    font-family: Verdana;
}

.landing_container
{
    display: flex;
    width: 80%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color:rgb(150, 150, 150);

    border-radius: 5px;

    /*glass*/
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    border: 2px solid #70d6f5;

    font-family: Verdana;
}

.landing_image>img
{
    width: 100%;
    max-width: 300px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 50%;
    padding: 2%;
}

.landing_text
{
    flex: 1;
    padding: 0 2%;
    text-align: justify;
}

.landing_text>h1
{
    padding-top: 0px;
    text-align: center;
    font-weight: lighter;
    font-size: 2.5em;
    margin-bottom: 0;
    color: white;
}

.landing_text>h2
{
    text-align: center;
    font-weight: lighter;
    margin-top: 0;
}

.landing_text>p
{
    padding-bottom: 1%;
    font-size: 0.9rem;
  line-height: 150%;
}

.bioicons_container
{
    text-align: center;
}

.bioicons
{
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 5px;
    margin: 5px;
}

.bioicons:hover
{
    transform: scale(1.1);
    box-shadow: 0px 3px 6px #70d6f5;
}

.contact_container
{
    display: flex;
    width: 95%;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin: 0 auto;
    padding: 0 1%;
    padding-bottom: 1%;
    text-align: justify;
    color:rgb(150, 150, 150);

    border-radius: 5px;

    /*glass*/
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    border: 2px solid #70d6f5;

    font-family: Verdana;
}

.contact_left>h2
{
    font-weight: lighter;
    font-size: 1.2rem;
}

.contact_left
{
    width: 50%;
    float: left;
    border-right: 1px dashed #70d6f5;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
}

.contact_right
{
    width: 50%;
    float: right;
    margin: 0 auto;
    text-align: center;
    vertical-align: top;
}

.contact_right>h2
{
    font-weight: lighter;
    margin-bottom: 0;
    font-size: 1.2rem;
}

.contact_buttons
{
    width: 9rem;
    margin: 1%;
    height: 4vh;
    font-size: .75rem;
    margin-bottom: 2%;
    border-radius: 5px;
    text-decoration: none;
    font-variant: small-caps;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid white;
    color: white;
}

.contact_buttons:hover
{
    background-color: rgba(0, 0, 0, 0.5);
    color: #70d6f5;
    border: 2px solid #70d6f5;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.contact_img
{
    width: 2rem;
    vertical-align: middle;
    margin-right: 2%;
    border-radius: 5px;
}

.container_title_tools
{
    color: white;
    width: 60%;
    margin: 0 auto;
    padding-top: 1%;
    font-style: italic;
    padding-bottom: 0.5%;
    text-transform: uppercase;
    font-size: 0.8em;
    font-family: Verdana;
}

.project_container
{
    background-color: rgba(0,0,0,0.3);
    width: 95%;
    justify-content: center;
    margin: 0 auto;
    border-radius: 5px;

    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    border: 2px solid #70d6f5;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.project_main
{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1%;
    padding-bottom: 1%;
}

.project_card
{
    width: 850px;
    height: 300px;
    background-color: black;
    border-radius: 5px;
    margin: 0.5%;
    position: relative;
    overflow: hidden;

    display: inline-block;
    flex-wrap: wrap;
}

.project_card:last-child
{
    margin-bottom: 0;
}

.project_card_info
{
    margin: 0;
    color: white;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    position: absolute;
    padding: 2%;
    padding-top: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.project_card_info:hover
{
    opacity: 1;
}

.project_card_info>p
{
    padding: 1%;
    padding-top: 0;
    padding-bottom: 1%;
    margin: 0;
    font-style: italic;
    font-weight: lighter;
    font-size: 0.9em;
    color: #70d6f5;
}
.project_card_info>h1
{
    padding: 1%;
    padding-bottom: 0;
    color: #00a8db;
    margin: 1% 0;
    font-weight: lighter;
    font-size: 2em;
}

.project_card_info>h2
{
    padding: 1%;
    padding-top: 0;
    padding-bottom: 1%;
    margin: 0;
    color: #ffffff;
    font-weight: lighter;
    font-size: 1.2em;
}

.project_icons
{
    padding-left: 1%;
}

.project_icons>img
{
    margin-right: 1em;
    width: 2.5em;
}

.project_icons>img:hover
{
    transform: scale(1.1);
}

.project_card:hover .project_card_info
{
    display: block;
}

.project_button
{
    bottom: 2.5%;
    right: 3.5%;
    position: absolute;
    border-radius: 5px;

    width: 10em;
    height: 4em;
    font-size: .75rem;
    margin-bottom: 2%;
    border-radius: 5px;
    text-decoration: none;
    font-variant: small-caps;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid white;
    color: white;
}

.project_button:hover
{
    background-color: rgba(0, 0, 0, 0.5);
    color: #70d6f5;
    border: 2px solid #70d6f5;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.all_projects
{
    float: right;
    width: 7vw;
    height: 3vh;
    font-size: .7vw;
    border-radius: 5px;
    text-decoration: none;
    font-variant: small-caps;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid white;
    color: white;
}

.all_projects:hover
{
    background-color: rgba(0, 0, 0, 0.5);
    color: #70d6f5;
    border: 2px solid #70d6f5;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

/* Credit for below background animation: https://www.divinectorweb.com/2023/05/animated-background-using-pure-css.html */
.background_wrapper span {
	position: fixed;
	bottom: -180px;
	height: 50px;
	width: 50px;
	z-index: -1;
	background-color: rgb(0, 0, 0);
	box-shadow: 0 0 50px #00a8db, 0 0 100px #00a8db, 0 0 150px #00a8db, 0 0 200px #00a8db;
	animation: animate 10s linear infinite;
}
.background_wrapper span:nth-child(1) {
	left: 60px;
	animation-delay: 0.6s;
}
.background_wrapper span:nth-child(2) {
	left: 10%;
	animation-delay: 3s;
	width: 60px;
	height: 60px;
}
.background_wrapper span:nth-child(3) {
	left: 20%;
	animation-delay: 2s;
}
.background_wrapper span:nth-child(4) {
	left: 30%;
	animation-delay: 5s;
	width: 80px;
	height: 80px;
}
.background_wrapper span:nth-child(5) {
	left: 40%;
	animation-delay: 1s;
}
.background_wrapper span:nth-child(6) {
	left: 50%;
	animation-delay: 7s;
}
.background_wrapper span:nth-child(7) {
	left: 60%;
	animation-delay: 6s;
	width: 100px;
	height: 100px;
}
.background_wrapper span:nth-child(8) {
	left: 70%;
	animation-delay: 8s;
}
.background_wrapper span:nth-child(9) {
	left: 80%;
	animation-delay: 6s;
	width: 90px;
	height: 90px;
}
.background_wrapper span:nth-child(10) {
	left: 90%;
	animation-delay: 4s;
}
@keyframes animate {
	0% {
		transform: translateY(0);
		opacity: .7;
	}
	80% {
		opacity: .35;
	}
	100% {
		transform: translateY(-1000px) rotate(360deg);
		opacity: 0;
	}
}
/* --- */