/* Links to GoogleFonts go here */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/*****  main body elements */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 4em;
 }


* {
    box-sizing: inherit;
}

body {
    /*Resets the pages default margin and padding for the entire html file. This will allow you to have more control when you are styling specific elements.   */
    margin: 0; 
    padding: 0;
    font-size: 100%; /* will make your text 100% of the base font size set in the browser */ 
    background-color: #E3F4F4;
    font-family: "Roboto", sans-serif;
}

#wrapper {
    min-width: 1400px; /* will not allow the page to be smaller than 1400px in a desktop screen */
    max-width: 2000px; /* will not allow the page to be larger than 2000px in a desktop screen */
    margin-left: auto; /* will center the page in the browser */
    margin-right: auto;
}

h1 {
    font-size: 3em;
    letter-spacing: 0.25em;
    font-family: "JetBrains Mono", monospace;
}

h2 {
    font-size: 1.5em;
    letter-spacing: 0.25em;
    margin-bottom: 3em;
    font-family: "Roboto Mono", monospace;
}

h4, h3 {
    margin-top: 50px;
}

/**** styles for the navigation menu */

#cvmenu {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
}

#cvmenu li {
    font-size: 1em;
    text-transform: uppercase;
    font-family: "Roboto Mono", monospace;
    letter-spacing: .2em;
}

#cvmenu li a {
    display: block;
    text-decoration: none;
    color: darkslategray;
    border-radius: 1em;
    padding: 0.5em 1em;
    margin: .5em;
    background-color: #C5E8E4;
    border: 2px solid #008080;
}

#cvmenu li a:hover {
    background-color: #008080;
    color: whitesmoke;
    transition: 0.5s;
}

nav#mainmenu {
    position: sticky;
    top: 0px;
    background-color: #E3F4F4;
}

li.resume {
    margin-right: auto; /* will push the resume link to the far left and the rest to the right */
    padding-left: 20px;
}

#cvmenu li.resume a {
    background-color: #E3F4F4;
    border: none;
}

/**** styles for photos, icons  and logos */
.logo {
    float: left;
    margin-right: 10%;
    margin-bottom: 5%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.roundphoto {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-top: 2em;
}

.roundphoto:hover, #icons:hover {
    transition: 0.5s;
    transform: scale(1.25);
}

#icons {
    list-style-type: none; /* removes the default bullet points */
    display: flex; /* convertir el container #icons a flex permite centralizar mas facilmente los elementos */
    justify-content: center;
}

#icons li {
    margin-right: 2em;
}

/**** styles for other sections and elements of the resume  */

.box {
    width: 80%;
    background-color: #C5E8E4;
    padding: 5em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
    margin-bottom: 4em;
    border: 2px solid #008080;
}

hr {
    clear: left;
    margin-bottom: 5%;
    border-color: #008080;
}

.centertext {
    text-align: center;
}

.double {
    line-height: 2em;
}

.squarebullet {
    list-style-type: square;
}

#skills ul {
    list-style: none;
}

#skills ul li::before {
    content: "\2713   "; /* will add a checkmark before each list item as well as 3 empty spaces for visibility*/
    font-weight: bolder;
    font-size: 1.5em;
}


/**** styles for lists in bullets for the main sections of the resume */

.bulleticon {
    list-style-image: url(bullets/navyball.gif);
}