main_mobile.css

/*Author: Jordy A. Larrea Rodriguez*/ 

body, html{
    margin:0;
    /* min-width: 1200px; */
}
/* Background image properties for the body of the webpage*/
.maincontainer{
    min-width: 1200px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}
/*styling for background container*/
#background{
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}
/*styling for the dynamic background image*/
#backgroundImage{
    height: 200%;
    width: auto;
    object-fit: contain;
}
/*styling for the webpage contents*/
#contents{
    padding: 100px 100px;
    position: relative;
}

html{
    background-size:cover;
}
h3{
    text-align: center;
}
h1{
    font-family: "Lucida Console",monospace;
    font-size: xx-large;
}

/* styling for the header of the main tabbed page*/
#header{
    overflow: hidden;
    color:rgb(0, 0, 0);
    background-color: #ccc;
    margin-bottom: 0%;
    opacity: .9;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0px 0px;
    padding-left: 20px;
}
/* Style for the tab elements*/
.tab{
    overflow:visible;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style for tab buttons */
.tab button {
    font-family: "Lucida Console",monospace;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: larger;
}

/*Changes Background color of buttons on hover*/
.tab button:hover{
    background-color: #ddd;
    padding: 20px 23px
}
/* Creates an active/current tablink class*/
.tab button.active {
    background-color: #ccc;
}

/*Style for the tab Contents*/
.tabcontent{
    display: none;
    background-color: rgba(255,255,255,.8);
    padding: .6% 15%;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0px 0px 20px 20px;
    font-size: larger;
}

/* Style for the download resume button*/
.resumelink{
    border: none;
    color: #333;
    outline: none;
    word-wrap: normal;
    background-color: rgba(255,255,255,.8);
    cursor:pointer;
    padding: 2% 2%;
}

/* Fades out the download resume button upon hover*/
.resumelink:hover{
    background-color: #ddd;
    padding: 4% 4%;
    color: inherit;
}
/* Style for the resume-button element*/
#resumeButton{
    width: 100%;
}
/* Container for resume button element*/
#resumeButtonDiv{
    display: flex;
    text-align: center;
    flex: 2;
    width: 100%;
    margin-bottom: 5%;
}
/* flex container for the self-portrait image / button and About Me*/
#ME{
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 20px;
    display:inline-flex;
    gap: 5%;
    width: fit-content;
    height: max-content;
    overflow: hidden;
}
/* Flex Container for Resume button and self portrait */
#jlr_info{
    flex: 1;
    gap: 5%;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}
/* Style for the self-portrait element*/
#selfPortrait {
    border-radius: 5% 5% 5% 5%;
    width: 100%;
    flex: 1;
    padding-bottom: 5%;
    height: 100%;
}
/* About Me paragraph styling */
#About_Me{
    flex: 2;
    padding-right: 5%;
    display: flex;
    word-wrap: break-word;
    max-width: fit-content;
    height: fit-content;
}
/* style for the social media flex container*/
.socialmedialine{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 10%;
    height:30px;
    justify-content: space-between;
    align-items: center;
    font-family: "Lucida Console",monospace;
    max-width: 140px;
    min-width: 132px;
    padding-right: 10px;
}
/* style for social media buttons*/
.socialmediabutton{
    width:25px;
    height:25px;
    border-radius: 16%;
    border: none;
}
/* style for the flex container containg the social media buttons*/
.socialmediabuttons{
    display: flex;
}
/* style for the linked in button*/
#linkedInButton{
    background-color: rgb(40, 103, 178);
    font-family: "Signia Pro",sans-serif;
    color: white;
    font-size:20px;
}
#linkedInButton:hover{
    background-color: royalblue;
}

/*style for the git-hub button*/
#githubButton{
    width: 25px;
    height: 25px;
    background-image: url("Resources/Images/Icons/GitHubIcon.png");
    text-align: center;
    background-color:white;
}
#githubButton:hover{
    background-color: rgb(202, 202, 202);
}