@import url("./common.css");

/* global variables local to profile.css */
:root {
    --color-electron-1: #FF0000;
    --color-electron-2: #00FF00;
    --color-electron-3: #0000FF;
    --color-atom-gradient-start: #F6F6F6;
    --color-atom-gradient-end: #000000;
    --color-text-alternative: #FFFFFF;
    --color-text-contrast: var( --color-background-alternative );
    --color-info-border: grey;
    --color-svg-alternative: var( --color-svg-filter-dark );
    --color-border-circle-alternative: #FFFFFF;
    --color-border-circle: var( --color-background-alternative );
    --color-contact-icon: #49E51A;
}
/* other stuff here */
.hero-icon {
    position: absolute;
}
.oval {
    width: 40vw;
    height: 15vw;
    max-width: 50vh;
    max-height: 50vh;
    border-radius: 50%;
    opacity: 0.15;
}
.atom {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    opacity: 0.40;
    background-image: linear-gradient( var( --color-atom-gradient-start )  , var( --color-atom-gradient-end ) );
}
.electron-1 {
    background-color: var( --color-electron-1 );
    overflow:visible;
}
.electron-2 {
    background-color: var( --color-electron-2 );
    overflow:visible;
}
.electron-3 {
    background-color: var( --color-electron-3 );
    overflow:visible;
}
/* ANIMATED CLASSES */
.rotate-atom {
    animation: rotate-atom 6s linear infinite;
}
.rotate-electron-1 {
    animation: rotate-electron-1 4s linear infinite;
}
.rotate-electron-2 {
    animation: rotate-electron-2 5s linear infinite;
}
.rotate-electron-3 {
    animation: rotate-electron-3 2s linear infinite;
}
/* animation rules which can be used on classes */
/* ex. animation: rotate 5s linear infinite; */
/* {name},{duration},{time},{iterations} */
@keyframes rotate-electron-1 {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg);   }
}
@keyframes rotate-electron-2 {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
@keyframes rotate-electron-3 {
    from { transform: rotate(120deg);   }
    to   { transform: rotate(300deg); }
}
@keyframes rotate-atom {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
.bryan-icon-container {
    width: 30vw;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.bryan-icon {
    width: 80%;
    height: auto;
    aspect-ratio: 1/1;
    
}
.cat-desk {
    width: 50vw;
    height: auto;
    max-height: 50vh;
    position: absolute;
    bottom: 0;
    left: 50%; /* Center the image horizontally within the container */
    transform: translateX(-50%); /* Adjust to center the image */
}
.cat {
    position: relative;
}
.overflow-visable {
    overflow:visible;
}
.section-half {
    width: 100vw;
    height: 45vh;
}
.section-overlap {
    width: 90vw;
    margin-left: 5vw;
    transform: translatey(20vh);
    border-radius: 1%;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns each with 100px width */
    grid-template-rows: repeat(3, 1r); /* Three rows each with 100px height */
    gap: 1em; /* Gap between grid items */
    width: 90vw;
    height: 100%;
    margin-left: 5vw;
  }
 .info-column {
    /* transform: translatey(20vh); */
    border-style: solid;
    border-color: var( --color-info-border );
    border-width: 2px;
    border-radius: 8vw;
 }
 .info-icon {
    width: 25%;
    height: auto;
    aspect-ratio: 1/1;
 }
.section-fold {
    position: relative;
    width: 100vw;
    height: 270vh;   
}
.text-color-alternative {
    color: var( --color-text-alternative );
}
.text-color-contrast {
    color: var( --color-text-contrast );
}
.width-90vw {
    width: 90vw;
    margin-left: 5vw;
}
.list-clean {
    list-style-type: none;
}
.middle {
    align-items: center;
}
.recent-work-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns each with 100px width */
    grid-template-rows: repeat(6, 1r); /* Three rows each with 100px height */
    gap: 1em; /* Gap between grid items */
    width: 90vw;
    height: 95%;
    margin-left: 5vw;
}
.recent-work {
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: var( --color-info-border );
    border-width: 2px;
    border-radius: 8px;
    transition: transform 0.3s, opacity 0.5s;
    overflow: hidden;
}
.recent-work-click {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: var( --color-transparent );
}
.recent-work-iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: none;
    pointer-events: none; /* Prevent the iframe from being interactive */
}
.recent-work:hover {
    transform: scale(0.9);
}
.recent-work:not(:hover) {
    transform: scale(0.8);
}
.svg-alternative {
    filter: var(--color-svg-alternative );
}
.border-circle-alternative {
    overflow:hidden;
    border-style: solid;
    border-width: 0.5vw;
    border-color: var( --color-border-circle-alternative );
    border-radius: 50%;
    padding:1vw;
}
.contact-icon:hover {
    border-color: var( --color-border-circle );
    background-color: var( --color-contact-icon );
    transition-delay: 100ms;
}
.hidden {
    opacity: 0.0;
    filter:blur(5px);
    transform: translateX(-200%);
    transition: 1s;
}
.show {
    opacity: 1.0;
    filter:blur(0);
    transform: translateX(0);
}
.contact-icon {
    width: 15vh;
    height: auto;
    max-height: 15vh;
    aspect-ratio: 1/1;
    transition-delay: 200ms;
}
.contact-icon:nth-child(2){
    transition-delay: 400ms;
}
.contact-icon:nth-child(3){
    transition-delay: 600ms;
}
.contact-icon:hover {
    transform: scale(1.2);
    transition: 0.5s;
}
.contact-icon:not(:hover) {
    transform: scale(0.8);
}
.contact-form {
    display: grid;
    width: 90vw;
    height: 40vh;
    margin-left: 5vw;
}
.contact-name {
    width: 70vw;
    height: 4vh;
    background-color: var( --color-border-circle-alternative );
    border-style: solid;
    border-color: black;
    border-width: 2px;
}
.contact-email {
    width: 70vw;
    height: 4vh;
    background-color: var( --color-border-circle-alternative );
}
.contact-details {
    width: 70vw;
    height: 16vh;
    aspect-ratio: 1/1;
    background-color: var( --color-border-circle-alternative );
}
.contact-submit {
    margin-top: 2em;
    width: 36vw;
    height: 18vh;
    aspect-ratio: 2/1;
    max-height: 10vh;
    background-color: var( --color-border-circle-alternative );
}
.color-contact {
    background-color: var( --color-border-circle-alternative );
}
.contact-border {
    border-style: solid;
    border-color: var( --color-info-border );
    border-width: 2px;
    border-radius: 1vw;
}
.contact-field {
    width: 70vw;
    height: 4vh;
    padding-left: 0.3em;
    padding-left: 0.4em;
    padding-right: 0.4em;
}
.contact-box {
    width: 70vw;
    height: 16vh;
    aspect-ratio: 1/1;
    padding-left: 0.4em;
    padding-top:0.4em;
    padding-right: 0.4em;
}
.contact-label {
    color: var( --color-border-circle-alternative );
    width: 70vw;
    text-align: left;
} 
.contact-button {
    margin-top: 4vh;
    width: 16vw;
    min-width: 100px;
    max-height: 8vw;
    height: auto;
    aspect-ratio: 2/1;
}
.contact-button:hover {
    background-color: var( --color-contact-icon );
    transition: 0.5s;
    transform: scale(1.35);
    border-color: var( --color-border-circle );
    background-color: var( --color-contact-icon );
}

/* fixes for screen resolution problems */
@media screen and (min-width: 320px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 576px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns each with 100px width */
        grid-template-rows: repeat(1, 1r); /* Three rows each with 100px height */
        gap: 1em; /* Gap between grid items */
      }
      .section-fold {
        height: 90vh;   
    }
    .recent-work-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns each with 100px width */
        grid-template-rows: repeat(2, 1r); /* Three rows each with 100px height */
        height: 85%;
    }
      .recent-work:hover {
        transform: scale(1.2);
        opacity: 1.0; /* Darken on hover */
    }
    .recent-work:not(:hover) {
        opacity: 0.6;
    }
    .contact-field {
        width: 40vw;
    }
    .contact-label {
        width: 40vw;
    }
    .contact-box {
        width: 40vw;
    }
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 900px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1025px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 2560px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}