/*
COLOR PALETTE:
https: //coolors.co/1e152a-3dfaff-92140c-f72585-4361ee
#13152A - Dark Purple
#3DFAFF - Aqua
#92140C - Dark Red
#F72585 - Flickr Pink
#4361EE - Ultramarine Blue
#343434 - Black (for text)

#0B0014 - Xketic 
#D44D5C - Paradise Pink
*/

/* NOTE:
- the vw is 1% of the viewport width (which is why we need it to make it responsive to different devices).
- I am going to change mutliple sections to make it more responsive for the css

NOTE ALSO FOR CERTAIN SELECTOR STYLES:
> (element1 > element2) refers to all <element2> where the parent is an <element1> element
+ (element1 + element2) refers to all <element2> that are placed after <element1> elements
~ (element1 ~ element2) refers to selecting all <element2> that are preceded by a <element1> element (meaning 

/* GLOBAL STYLES
--------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: #434da7;
    position: relative;
    display: block;
    color: white;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: 'Montserrat',sans-serif;
    font-size: 16px;
    /* Line-height is the property referring to the space between each line. 1.6 is the normal. */
    line-height: 1.6;
}

a {
    color: white;
}

img {
    width: 400px;
}

h1 {
    font-size: 70px;
}

h2, th {
    font-size: 35px;
}

p, td {
    font-size: 100%;
    line-height: 2;
}

/* we add a content-wrapper to maximize the width that we can have on any given section */
.content-wrapper {
    width: 85%;
    /* the margin is set to 0 automatically, because if we need to change it later, we'll do it in different areas */
    margin: 0 auto;
    padding: 60px 0;

}

.nobull {
    list-style-type: none;
}

.major {
    padding-bottom: 1em;
    border-bottom: 2px solid grey;
}

/* creating an animation that has the text moving in from the right to the left as the user opens up the page. */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.scene_element {
    animation-duration: 1.5s;
    transition-timing-function: ease-in;
}

.scene_element--fadein {
    animation-name: fadeIn;
}

.scene_element--fadeinright {
    animation-name: fadeInRight;
}

/* Navigation section
--------------------------------------*/
/* NOTE: Preserve the background as #4361EE and the text as white */
/* How this works....

- .dropdown class uses position:relative, when we need the dropdown content to be placed
BELOW the dropdown button (position:absolute).
- Then, .dropdown-content holds actual dropdown menu, which is actually hidden by default, and will
be displayed on hover. Min-width is set to 160px (which can be changed). I will change
the width of the dropwdown content to be as wide as the dropdown button by setting the width to 100% and overflow:auto
so that we can scroll on small screens.
- box-shadow property will be used to make the dropdown menu look like a card, and the z-index will place the dropdown
in front of other elements.*/

/* SOME OTHER NOTES:

-- overflow: hidden refers to content that will be clipped should it go past its container
*/

header {
    overflow: hidden;
    background-color: #0B0014;
    text-align: right;
    z-index: 1000;
}

.dropbtn {
    background-color: #10258371;
    border-color: 10px solid grey;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 2em;
    right: 3em;
    width: 5em;
    
}

/* Dropdown button on hover & focus */
.dropbtn:hover {
    background-color:#24274e;
}

.dropbtn:focus {
    background-color: #10258371;
}

.dropdown {
    float: right;
    /* I need the actual dropdown menu to be floated to the right */
}

/* Dropdown Content (which is hidden by default) */
.dropdown-content {
    display: none;
    position: fixed;
    background-color: #1d0531;
    min-width: 160px;
    overflow: auto;
    z-index: 1000;
    /* I'm not comfortable with having the menu and dropdown content pushed against the top, so I will allow for a little bit of space */
    top: 6em;
    right: 3em;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown a:hover {
    background-color: #ddd;
}

/* Show dropdown menu (we have to use JS to add the class to the .dropdown-content container when userclicks on
dropdown button */
.show {
    display: block;
}


/* Home section
--------------------------------------*/

#home {
    padding-bottom: 20px;
}

/* Professional Experience
--------------------------------------*/

/* Projects
--------------------------------------*/
/* Note that you must fix the projects here because this is currently not responsive. */

.inner.project {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.inner article {
    border: 2px solid grey;
    background-color: #13152A;
    padding: 1.75em 1.75em 0.1em;
    border-radius: 10px;
    margin: 1.5em 3em 1.5em 0;
    width: calc(50% - 1.5em);
    text-align: left;
}

.inner img {
    width: 100%;
}

.inner article button {
    margin: 0 0 2em;
}

.inner article:nth-child(2n) {
    margin-right: 0;
}


/* Awards
--------------------------------------*/
table {
    border-collapse: collapse;
}

th, td {
    padding: .75em;
    border-bottom: 1px solid whitesmoke;
}

th.year {
    padding: 0;
}

/* Contacts
--------------------------------------*/
.logos.nobull {
    display: block;
    margin: 0;
    align-content: center;
}

.logos a {
    margin: 0 0 0 3em;

}

.logos img {
    width: 3em;
}


/* Responsive media
--------------------------------------*/
@media screen and (min-width: 750px) {
   
}

@media screen and (max-width: 749px) {
   
}