/*
    External CSS
    Work in progress
    Need to learn more about position of elements 
    along with how to make UI feel prettier to look at
    Go for class over ID
*/
:root {
    --color-main:rgb(102, 224, 102);
    --color-transOne:rgba(30,111,20,0.7);
    --color-transTwo:rgba(84, 198, 84, 0.5);
    --font-main:"VT323", monospace;
}
* {
    margin-left:15px;
    margin-right:15px;
}
html {
    height:100vh;
    margin:0px;
    background-image:url('ImageAssets/oldCompNoText.jpeg');
    background-size:100% 100%;
    background-repeat:no-repeat;  
}
img {
    height:200px;
    width:350px;
    border:5px;
    border-style:solid;
    border-color:black;
    margin-top:5%;
}
td, th {
    border:2px;
    border-style:double;
}
table {
    border:2px;
    border-style:double;
    background-color:var(--color-transOne);
    position:relative;
    left:20%;
}
figcaption {
    font-size:large;
}
#computerScreen {
    height:auto;
    width:1000px;
    margin-top:220px;
    position:relative;
    left:43%;
}
#reverse {
    display:none;
}
.textOptions {
    width:55%;
    font-family: var(--font-main);
    font-weight:400;
    font-style:normal;
    font-size:80px;
    color:var(--color-main);
    cursor:pointer;
    padding:0px;
}
.textOptions:hover {
    font-size:100px;
    border:6px dashed black;
}
.textContent {
    font-family: var(--font-main);
    font-weight:400;
    font-style:normal;
    color:var(--color-main);
    font-size:30px;
}
#Heading {
    font-family:'Courier New', Courier, monospace;
    width:400px;
    position:relative;
    top:10px;
    left:43%;
}
#intro-paragraph {
    border-width:5px;
    border-style:dashed;
    border-radius:20%;
    padding:5%;
}
.projects {
    height:min-content;
    font-family:var(--font-main);
    color:black;
    flex:1 1 300px;
    min-width: 250px;
}
#inProgress {
    display:flex;
    flex-direction:row;
    width:min-content;
    height:min-content;
}
#loginDiv {
    width:min-content;
    border:1px ridge var(--color-transTwo);
    border-radius:5px;
    background-color:var(--color-transOne);
    transition:transform 1s ease;
}
.projectImages {
    cursor:pointer;
}
#calcDiv {
    width:min-content;
    border:1px;
    border-radius:5px;
    border-style:ridge;
    border-color:var(--color-transTwo);
    background-color:var(--color-transTwo);
    transition:transform 1s ease; 
}
.projectText {
    font-family:"Ubuntu";
    font-size:medium;
}
#technical {
    width:max-content;
    border-width:2px;
    border-style:dashed;
    margin-right:80%;
}
.rowElements {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;
}
.Icons {
    width:25px;
    height:25px;
    border-color:white;
    border-width:4px;
    border-style:outset;
    border-radius:10px;
}
.SkillTitle {
    font-family:'Arial Narrow Bold', sans-serif;
    font-size:medium;
}
#contact {
    position:relative;
    padding-top:10px;
    font-size:larger;
    color:var(--color-main);
    top:auto;
    left:10%;
    width:400px;
}
.not-hovered {
    opacity: 0.5;
}
/* 
 Will design to make it look like a terminal
*/
#terminal {
    display:flex;
    flex-direction:row;
    width:20%;
}
#cliPath:hover {
    border:initial;
    font-family: var(--font-main);
    font-weight:400;
    font-style:normal;
    font-size:80px;
    color:var(--color-main);
    cursor:pointer;
    padding:0px;
}
#cli {
    background-color:rgba(30,111,20,0.2);
    align-self:center;
    box-sizing:border-box;
    border:0;
    height:80px;
    width:auto;
    font-family: var(--font-main);
    font-weight:300;
    font-size:40px;
    color:var(--color-main);
}
.outputText {
    color:var(--color-main);
    font-family: var(--font-main);
    font-weight:200;
    font-size:25px;
}
#content{
    width:70%;
}
#commandOutput {
    height:200px;
    overflow-y:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
#commandOutput::-webkit-scrollbar {
    display:none;
}

a:visited{
    color:green;
}
@media (max-height: 1200px){
    .textContent{
        font-size: 20px;
    }
    ul{
        margin: 8px;
    }
}

@media (max-height: 1000px){
    .textContent{
        font-size: 15px;
    }
    ul{
        margin: 3px;
    }
}
@media (max-width: 1500px){
    .textOptions{
        font-size:60px;
        width:50%;
    }
    .textOptions:hover{
        font-size:65px;
    }
    .textContent{
        font-size:25px;
    }
    #content{
        width:60%;
    }
    #computerScreen{
        width:60%;
    }
}

@media (max-width: 1200px){
    .textOptions{
        font-size:55px;
        width:400px;
    }
    .textOptions:hover{
        font-size:60px;
    }
    .textContent{
        font-size:20px;
    }
    #content{
        width:50%;
    }
    #computerScreen{
        width:50%;
    }
}
@media (max-width: 1000px){
    .textOptions{
        font-size: 50px;
        width:30%;
    }
    .textOptions:hover{
        font-size:55px;
    }
    #cli {
        width: 250px;
    }
    .textContent{
        font-size:15px;
    }
    #content{
        width:40%;
    }
    #computerScreen {
        width:40%;
    }
}
@media (max-width: 800px){
    .textOptions{
        font-size: 40px;
        width:20%;
    }
    .textOptions:hover{
        font-size:50px;
    }
    #cli{
        width: 150px;
    }
    .textContent{
        font-size:10px;
    }
    content{
        width:20%;
    }
}
@media (max-width: 600px){
    .textOptions{
        font-size: 30px;
        width:10%;
    }
    .textOptions:hover{
        font-size:45px;
    }
    #cli{
        width: 50px;
    }
    .textContent{
        font-size:5px;
    }
    content{
        width:10%;
    }
}