/* colors I use 

7466ff
9ca1ff
eaebfc
f5f5ff

ffffcc - yellow

*/

/* 
Table of Content for main site

1. CSS Reset
2. Clearfix
3. Grid Layout (including sidebars)
4. Lists
5. Typography 
6. Header Section (Mobile & Desktop)
7. Left Sidebar Menu
8. Footer Section
9. Column
10. Images
11. Right Sidebar Content
12. Links
13. Mobile Menu
14. H2 Animation Effect
15. Contact Me
16. Traits
17. Expertise
18. Skills
19. Timeline
20. Background

Table of Content for web development site

100. Container
101. Flip Cards

*/

/*
  ============================================================================================================
  1. CSS Reset
  ============================================================================================================
*/


/* The below is the CSS to reset browsers so that these don't apply any styling of their own. It makes all browsers the same. This should always be on top in the CSS file */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p {
  color: rgb(0, 0, 0);
  font-size: 16px;
}

/* The below grid is the code to make every element have the box-sizing: border-box; class which means that padding and borders will not be added 
to the width and height of an element. Only margin will. We include webkit and moz to specifically target Mozilla and Chrome, even if it probably 
isn't necessary. We also include *:before and *:after even if it may not be necessary as it is good practise to do so whenever the * selector is used */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/*
  ============================================================================================================
  2. Clearfix
  ============================================================================================================
*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}


/*
  ============================================================================================================
  3. Grid Layout
  ============================================================================================================
*/

/* 
grid should only be available on desktop. Mobile devices should have full width.
We have given both desktop and mobile devices 4% horizontal spacing.
We use the grid class only on header, footer and top section as we have a three-column flex container for the main body of content.

*/

.grid {
  margin: 0 auto;
width: 100%;
}

@media (min-width: 1281px) {
  .grid {
    width: 960px;
  }
}


/*
  ============================================================================================================
  3.1 Three Column Flex Container (Left Sidebar, Right Sidebar, Main Content)
  ============================================================================================================
*/

/* We have created a flex container with three items in order to get two sidebar areas and one main area on desktop
.sidebar-left is flex item 1, main-content is flex item 2, sidebar-right is flex item 3

 */

.flex-container-main {
  display: flex;
}

.sidebar-left {
  flex-basis: 25%;
}

.sidebar-right {
  flex-basis: 25%;
}

/* Here we have added 4% padding so that mobile devices get 4% horizontal spacing */

.main-content {
  flex-basis: 50%;
padding-left: 4%;
padding-right: 4%;
padding-top: 17px;
}

/* Here I have added padding top on the sidebars + main content to avoid the sticky header appearing on top.
I have also added padding bottom because I have sticky sidebar on desktop
 */

@media (min-width: 1281px) {
  .flex-container-main {
    padding-top: 60px;
    padding-bottom: 70px;
  }
}

/* Here I have made it so that on devices that aren't laptops/desktop, the orders of the flexbox items are changed and they also appear on top of each other
instead of next to each other */

@media (max-width: 1280px) {

  .flex-container-main {
    flex-direction: column;
  }

  .sidebar-left {
    order: 3;
  }

  .sidebar-right {
    order: 1;
  }

  .main-content {
    order: 2;
  }

}

/*
  ============================================================================================================
  4. List
  ============================================================================================================
*/

/* Universal list style below */

ul,
ol {
  margin-top: 20px;
}

li {
  margin-bottom: 15px;
  margin-left: 20px;
}

ul {
  list-style: disc;
  margin-left: 25px;
}

/*
  ============================================================================================================
  5. Typography
  ============================================================================================================
*/

p,
li {
  font-size: 20px;
  line-height: 1.5em;
  letter-spacing: 0.7px;
  word-spacing: 0.9px;
}

p {
  margin-bottom: 25px;
font-size: 19px;
}

h1 {
  letter-spacing: 2px;
  line-height: 1.5em;
}

h2 {
  font-size: 30px;
  margin-bottom: 25px;
margin-top: 30px;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding-top: 4px;
padding-bottom: 4px;
}

h3 {
  font-size: 25px;
  margin-bottom: 20px;
}

.bolded {
font-weight: 600;
}

i {
font-style: italic;
}


/* here I have made it so that the H2 gets margin so that the borders the H2 have don't take up full space as it doesn't look as good
I don't have to do it on main-content, because main-content gets this margin from the .grid */

  aside h2 {
  margin-left: 4%;
  margin-right: 4%;
  }


/*
  ============================================================================================================
  6. Header Section (Mobile & Desktop)
  ============================================================================================================
*/

/*
  ============================================================================================================
  6.1 Desktop Header
  ============================================================================================================
*/

header {
  width: 100%;
  background: #000;
}

header h1 {
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 0;
  margin-bottom: 0;
}

header p {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 0;
}

/* Here I have made the desktop header sticky and also added z-index so that it goes above my sidebars which it otherwise didn't. */

@media (min-width: 1281px) {
  header {
    position: fixed;
    z-index: 5;
  }
}

/* here I have made the header not visible on mobile devices */

@media (max-width: 1280px) {
  header {
display: none;
  }
  }

/*
  ============================================================================================================
  6.2 Mobile Header
  ============================================================================================================
*/


/* 

here I use media query to make the mobile header only show on mobile + ipad 

The image has more height than the actual image because the mobile menu is in the way.

I add padding on the h1 to move down the text to make it centered.

I have negative margin to move up the mobile header as we have a lot of margin top on h2s.

*/

@media (max-width: 1280px) {

.mobile-header {
background-image:url(images/mattias-background-1400px.jpg);
background-position: center;
background-repeat: no-repeat;
height: 770px;
margin-bottom: -60px;
}

.mobile-header-text-box {
background-color: rgba(0, 0, 0, .3);
height: 710px;
}

.mobile-header-text-box p {
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), 2px 2px 6px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);
}

.mobile-header h1 {
font-size: 2.3em;
color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), 2px 2px 6px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);
padding-top: 250px;
text-align: center;
}

}

/* here I have made the mobile header not be visible on computers */

@media (min-width: 1281px) {
  .mobile-header {
display: none;
  }
}

/*
  ============================================================================================================
  7. Left Sidebar Menu
  ============================================================================================================
*/

/* Here I have put shadow on the entire left sidebar */

.sidebar-left {
  background: linear-gradient(#eaebfc, #9ca1ff);
  background: -webkkit-linear-gradient(#eaebfc, #9ca1ff);
  background: -moz-linear-gradient(#eaebfc, #9ca1ff);
  box-shadow: inset 0 1px 5px 3px rgba(0, 0, 0, .3);
  padding-top: 20px;
}

/* Here I have created a flex container in order to center the fixed positioned content in the left sidebar. Since sidebar-left is a flex item, 
I could not make this a flex container as well so I had to create a new flex container under .sidebar-left (a flex container within a flex item).
This became <div class="sidebar-left-flex">. */

.sidebar-left-flex {
display: flex;
justify-content: center;
}

/* here I have made the menu sticky on desktop */

@media (min-width: 1281px) { 
.sidebar-left-content {
position: fixed;
}
}

/* I have removed the universal left-margin we have on listings */

.sidebar-menu li {
  margin-top: 20px;
  margin-bottom: -5px;
  color: #000;
  font-size: 22px;
  text-shadow: 1px 1px 5px #fff;
list-style-type: none;
margin-left: 0;
}

/* here I have made the spacing between the list items bigger on desktop */

@media (min-width: 1281px) { 
.sidebar-menu li {
  margin-top: 20px;
  margin-bottom: 20px;
}
}

/* I have removed the margin we have on UL */

.sidebar-menu ul {
margin: 0;
}

.sidebar-menu a {
  color: #000;
  text-decoration: none;
}

.sidebar-menu a:hover {
  color: #ffffff;
  font-weight: 900;
  font-size: 27px;
  text-shadow: 1px 1px 5px black;
}

/* this gives the same styling to a menu item as when it is hovered over whenever it is active (this is triggered by javascript
and by using data-section code on our links in html) */

.sidebar-menu a.active {
  color: #ffffff;
  font-weight: 900;
  font-size: 27px;
  text-shadow: 1px 1px 5px black;
}

/*
  ============================================================================================================
  8. Footer
  ============================================================================================================
*/


footer {
  background: #000;
  width: 100%;
}

.footer-list {
  color: #fff;
  margin-top: 0;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 1px;
}

/* I have set margin-bottom to 0 because we have universal bottom-margin on lists that needed to be removed. */

.footer-list li {
  display: inline-block;
  margin-right: 25px;
  font-size: 20px;
  margin-bottom: 0;
}

/* Since we have universal left margin on lists, I have to remove it here on the first child do get the content centered */

.footer-list li:first-child {
  margin-left: 0;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  color: #afb3f7;
  font-size: 30px;
  font-weight: 900;
}

/* Here I have made the footer sticky on desktop */

@media (min-width: 1281px) {
  footer {
    position: fixed;
    bottom: 0;
  }
  }

/*
  ============================================================================================================
  9. Columns
  ============================================================================================================
*/

/* I have wrapped these in comment because I am not using these anywhere so don't need them to burden CSS file

.onethirdcolumn {
display: inline-block;
width: 33%;
}

.twothirdcolumn {
display: inline-block;
width: 66%;
}

*/

/*
  ============================================================================================================
  10. Images
  ============================================================================================================
*/

/* max width to make images mobile responsive: to always take upp 100% of the container, but not extend larger 
than their size */

img {
  max-width: 100%;
}

.profile-image {
  border-radius: 30px;
margin-top: 30px;
box-shadow: 0 0 5px 2px black;
}


/* to give the image more spacing on mobile to make it look better with the close button */

@media (max-width: 1280px) { 
.profile-image {
margin-top: 50px;
}
}


/*
  ============================================================================================================
  11. Sidebar Content
  ============================================================================================================
*/

/* Here I have horizontally centered content on both sidebars */

.sidebar-left-content,
.sidebar-right-content {
  text-align: center;
}

/*
  ============================================================================================================
  11.1 Right Sidebar
  ============================================================================================================
*/

/* Here I have put shadow on the entire right sidebar */

.sidebar-right {
  background: #fff;
  box-shadow: inset 0 1px 5px 3px rgba(0, 0, 0, .3);
  padding-top: 12px;
}


/*
  ============================================================================================================
  11.2 My Portfolio
  ============================================================================================================
*/

/* This is to make the my portfolio section in columns on ipads and small laptops */

@media (min-width: 641px) and (max-width: 1280px)  { 
.my-portfolio-flex {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
}

/* this is to remove white space on mobile devices under the right sidebar */

.sidebar-right-content {
margin-bottom: -22px;
}

/* Here I have styled each container under My Portfolio */

.sidebar-right-content div {
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}


/* to style the headers for "current projects and "old projects" */

.sidebar-right-content h3 {
font-weight: 900;
border: 1px solid black;
padding: 10px 50px;
display: inline-block;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-top: 15px;
margin-bottom: 30px;
}


/* Here I have made the text under each image display on its own row */

.image-description {
  display: block;
  font-style: italic;
  padding-bottom: 15px;
}

/* 
This is for the H2 to make it align with personality traits on desktop
*/

.portfolio {
  margin-top: 35px;
  margin-bottom: 20px;
}


/* to remove the styling on links and make font-size bigger on hover over */

.sidebar-right-content a {
  color: #000;
  text-decoration: none;
}

.sidebar-right-content a:hover {
font-size: 20px;
}

/*
  ============================================================================================================
  11.3 Left and Right Sidebar
  ============================================================================================================
*/

/* Here I have removed the box shadow that the entire sidebar areas have on mobile. I had to put this after the above, or else the above would overwrite */

@media (max-width: 1280px) {
  .sidebar-left,
  .sidebar-right {
    box-shadow: none;
  }
}

/*
  ============================================================================================================
  12. Links
  ============================================================================================================
*/

/* this makes it so that when jump linking internally, it jumps to the header, but 150px above the header. This way the sticky menu
does not cover the text */

h2[id] {
scroll-margin-top: 150px;
}


/*
  ============================================================================================================
  13. Mobile Menu (with JavaScript)
  ============================================================================================================
*/

/* here I have made the menu fixed on mobile devices. Even though it is fixed on desktop as well, we had to do separate code here since the mobile menu
works differently. 

The -80xw is added so that per default, the menu is not visible on the screen. It is ouside of the viewport. With the help of Javascript, the open class
is then added to the element and this open class gives the left viewport 0, which means that the menu is now visible. 

The z-index is to make the menu appear on top of the open menu bar (which in turns must have z-index to appear on top of other content */


@media (max-width: 1280px) {

.sidebar-left {
  position: fixed;
  top: 0;
  left: -80%;
  width: 75%;
  height: 100%;
  transition: left 0.3s;
z-index: 3;
}

/* This is so the sidebar opens from the left and shows when we click the button (done with javascript) */

.sidebar-left.open {
  left: 0;
}

/* here I have styled the container that the opening menu button is located in and made it fixed and put z-index to have it appear on top of other content */

.mobile-menu-button-container {
  background: linear-gradient(#eaebfc, #9ca1ff);
  background: -webkkit-linear-gradient(#eaebfc, #9ca1ff);
  background: -moz-linear-gradient(#eaebfc, #9ca1ff);
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
width: 100%;
border-bottom: 1px solid black;
z-index: 2;
}

/* this is to style the menu button (which we use an image for) */

.open-menu {
margin-right: 10px;
}

/* this is to style and position the close menu button (which we use an image for) */

.close-menu {
position: absolute;
top: 4px;
right: 4px;
}

}

/* this is to hide the menu buttons on computers */ 

@media (min-width: 1281px) {
.open-menu,
.close-menu {
display: none;
}
}



/*
  ============================================================================================================
  14. H2 Animation Effect
  ============================================================================================================
*/

/* This makes it so that when an H2 element with an ID is targeted (when clicking a link that goes to it), the h2 plays an animation
where it becomes bigger and then transitions back to a smaller size */

h2:target {
animation: highlight 2.5s ease forwards; 
}

@keyframes highlight {
  from {font-size: 50px;}
  to {font-size: 30px;}
}

/*
  ============================================================================================================
  15. Contact Me
  ============================================================================================================
*/

input,
textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 15px;
}

/* This is for the textarea. 
Resize makes it so that users can't resize the textarea field.
Overflow hidden removes the scrollbar.
Height auto allows the textarea's height to be automatic.
*/

.message {
resize: none;
height: auto; 
overflow: hidden;
}

input[type="submit"]:hover {
cursor: pointer;
font-size: 15px;
font-weight: 600;
}

/*
  ============================================================================================================
  16. Traits
  ============================================================================================================
*/

.general-flex {
display: flex;
flex-direction: column;
}

@media (min-width: 641px)  { 
.general-flex {
display: flex;
flex-direction: row;
gap: 30px;
}
}

/* We have put opacity 0 here so that the div containters are not visible at first, but only after the animation plays */ 

.general-flex div {
flex-basis: 50%;
margin-bottom: 25px;
background-color: #ffffcc;
border-radius: 30px 0 30px 0;
border: 2px solid black;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .3);
position: relative;
opacity: 0;
}

.general-flex div:nth-of-type(2n) {
background-color: #f5f5ff;
}

.odd div {
background-color: #f5f5ff;
}

.odd div:nth-of-type(2n) {
background-color: #ffffcc;
}

.general-flex h3 {
background-color: #000;
color: #fff;
padding: 15px;
text-align: center;
margin-bottom: 0;
border-radius: 30px 0 0 0;
}

.general-flex p {
padding: 10px;
margin: 0;
}

.general-flex img {
position: absolute;
top: 8px;
right: 9px;
}


/* These are the animations for the div boxes */

.trait-animation-1.animate {
animation-name: trait-animation-1;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes trait-animation-1 {
  to {opacity: 0.85;}
  from {left: -100%;}
  to {left: 0;}
}

.trait-animation-2.animate {
animation-name: trait-animation-2;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes trait-animation-2 {
  to {opacity: 0.85;}
  from {right: -100%;}
  to {right: 0;}
}


/*
  ============================================================================================================
  17. Expertise
  ============================================================================================================
*/

.accordion-header {
background-color: #ffffcc;
padding: 15px;
padding-bottom: 0;
border: 1px solid black;
margin-bottom: 10px;
position: relative;
}

.accordion-header h3 {
margin-bottom: 15px;
}

.gambling-accordion,
.health-accordion {
height: 0;
visibility: hidden;
background-color: #ffffcc;
border: 1px solid black;
}

.gambling-accordion.is-open,
.health-accordion.is-open {
height: 100%;
visibility: visible;
margin-bottom: 10px;
padding: 15px;
padding-bottom: 0;
}

/* Here I have positioned the image (wrapped around the button tag) and removed the background color and border that the button tag initially has */

.accordion-header button {
position: absolute;
top: 12px;
right: 5px;
cursor: pointer;
background-color: transparent;
border: none;
}

/*
  ============================================================================================================
  18. Skills
  ============================================================================================================
*/

/* this is to have the flex container only affect desktop */

@media (min-width: 641px)  { 
.skills-flex {
display: flex;
gap: 20px;
}

.skills-flex > div {
flex-basis: 50%;
}
}

/* this is to make the H3 closer to each bar and to make the text underneath get some padding and become italic */

.skills-flex h3 {
font-size: 22px;
font-weight: 500;
margin-bottom: 0;
}

.skills-flex p {
font-style: italic;
padding-top: 5px;
font-size: 16px;
}

/* these are the colored bars and their animations 

The animation effect is put in a class that has .animate on it. This is to have the animation only begin when it is in the viewport of the visitors.
This is done with the help of JavaScript where the animate class is added whenever the class is in the viewport. 

*/

.colored-bar-sixty {
width: 0;
height: 10px;
border-radius: 20px;
}

.colored-bar-sixty.animate {
  animation-name: colored-bar-sixty;
  animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes colored-bar-sixty {
  to {width: 60%;}
}

.colored-bar-seventy {
width: 0;
height: 10px;
border-radius: 20px;
}

.colored-bar-seventy.animate {
  animation-name: colored-bar-seventy;
  animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes colored-bar-seventy {
  to {width: 70%;}
}

.colored-bar-hundred {
width: 0;
height: 10px;
border-radius: 20px;
}

.colored-bar-hundred.animate {
animation-name: colored-bar-hundred;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes colored-bar-hundred {
  to {width: 100%;}
}

.colored-bar-eighty {
width: 0;
height: 10px;
border-radius: 20px;
}

.colored-bar-eighty.animate {
animation-name: colored-bar-eighty;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes colored-bar-eighty {
  to {width: 80%;}
}

.colored-bar-ninety {
width: 0;
height: 10px;
border-radius: 20px;
}

.colored-bar-ninety.animate {
animation-name: colored-bar-ninety;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes colored-bar-ninety {
  to {width: 90%;}
}


/* different colors for the bars */

.yellow-bar {
background-color: #fdfda4;
}

.red-bar {
background-color: #ff9090;
}

.blue-bar {
background-color: #a4d7f5;
}

.green-bar {
background-color: #b7fcb7;
}

.pink-bar {
background-color: #fbc3d0;
}

.peach-bar {
background-color: #f3d0b0;
}

/* this is to add the white bar for each skill. This needs to be a separate div containter that wraps each colored div container */

.white-bar {
width: 100%;
height: 12px;
background-color: #ffffff;
border: 1px solid black;
border-radius: 20px;
}

/* different percentage numbers and their animations 

The animation effect is put in a class that has .animate on it. This is to have the animation only begin when it is in the viewport of the visitors.
This is done with the help of JavaScript where the animate class is added whenever the class is in the viewport. 

*/

.sixty-percent {
width: 60%;
left: -60%;
text-align: right;
font-size: 20px;
font-weight: 600;
position: relative;
}

.sixty-percent.animate {
animation-name: sixty-percent;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes sixty-percent {
  to {left: 0;}
  from {opacity: 0;}
  to {opacity: 100%;}
}

.seventy-percent {
width: 70%;
left: -70%;
text-align: right;
font-size: 20px;
font-weight: 600;
position: relative;
}

.seventy-percent.animate {
animation-name: seventy-percent;
animation-duration: 5s;
animation-fill-mode: forwards;
}


@keyframes seventy-percent {
  to {left: 0;}
  from {opacity: 0;}
  to {opacity: 100%;}
}

.hundred-percent {
width: 100%;
left: -100%;
text-align: right;
font-size: 20px;
font-weight: 600;
position: relative;
}

.hundred-percent.animate {
animation-name: hundred-percent;
animation-duration: 5s;
animation-fill-mode: forwards;
}


@keyframes hundred-percent {
  to {left: 0;}
  from {opacity: 0;}
  to {opacity: 100%;}
}

.eighty-percent {
width: 80%;
left: -80%;
text-align: right;
font-size: 20px;
font-weight: 600;
position: relative;
}

.eighty-percent.animate {
animation-name: eighty-percent;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes eighty-percent {
  to {left: 0;}
  from {opacity: 0;}
  to {opacity: 100%;}
}

.ninety-percent {
width: 90%;
left: -90%;
text-align: right;
font-size: 20px;
font-weight: 600;
position: relative;
}

.ninety-percent.animate {
animation-name: ninety-percent;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes ninety-percent {
  to {left: 0;}
  from {opacity: 0;}
  to {opacity: 100%;}
}

/* this is to make the font for the % numbers smaller as they were too big on mobile */

.skill-percent-font {
font-size: 14px;
padding-top: 5px;
}



/*
  ============================================================================================================
  19. Timeline
  ============================================================================================================
*/


/* This is to have any ul with the .fade-in class attached to it fade in on scroll. This uses JavaScript to work */

.fade-in li.animate {
animation-name: fade-in-list;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fade-in-list {
  to {opacity: 100%;}
}


/*
  ============================================================================================================
  20. Background
  ============================================================================================================
*/

.main-body {
background-image:url(images/background.webp);
}


/*
  ============================================================================================================
  100. Container
  ============================================================================================================
*/

.grid-web {
  margin: 0 auto;
width: 100%;
padding-left: 4%;
padding-right: 4%;
padding-top: 30px;
}

@media (min-width: 1281px) {
  .grid-web {
    width: 960px;
  }
}

.flex-container-web {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}

/* detta är bara för att ge margin till footern. Så jag targettar den sista sektionen och ger den margin bottom) */

.grid-web section:last-of-type {
margin-bottom: 150px;
}

/*
  ============================================================================================================
  101. Flip Cards
  ============================================================================================================
*/

/* Below is the animation part of the flip card
============================================================================================================

The key to making this work is:

- backface-visibility that hides the content of an element that is rotated 180 degree (showing its back instead of front)
- applying transform-style: preserve-3d; to the parent container of the front and back element (backface-visibility doesn't work without it)
- applying back-face visibility to both the front element and back element
- having the back element show its back on default by using the transform: rotateY(180deg); propety
- having the front element show its back and the back card show its front when the flip card is hovered over 
(we do this by applying transform: rotateY(180deg);)

This way, whenever we hover over the flip card, both the front and back will rotate. The front will rotate to show its back (and be hidden),
wile the back will rotate to show its front (and be visible).

- We also add a transition duration to get a transition effect as otherwise the flip happens instantly
- We use absolute position on both the front and back cards so that the content appears on top of each other and not on separate rows
- We put the card content into two containers. The other container is just to set the width and height of the flip card
- The inner container is to set position relative so both the back and front card position to this. This is also the container that flips on
hover over and has the transition styling. 

if we use rotateX instead of rotateY, the cards will flip the other way instead for another effect

*/


/* This is the outer container where we just put the width and height of the flip card. 

perspective is not needed, but is supposed to add a 3D effect that makes the flip more realistic. I'm not sure I can tell a difference */

.flip-card {
height: 300px;
width: 250px;
cursor: pointer;
perspective: 1000px;
}

/* this is the inner container that will actually flip when we hover over the outer container. Since both the front card and back card is inside
of this container in HTML, both of them rotate 180 degrees on hover over. Transition is to add the visible effect. 

transform-style: preserve-3d; is added because this is required for backface-visibility: hidden; to work. We could have added this separately on front
and back card along with the transform: rotateY(180deg); property, but this makes the code a bit more efficient. 

*/

.card-container {
position: relative;
transition-duration: 1.4s;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}

.flip-card:hover .card-container {
transform: rotateY(180deg);
}

/* the back card is rotated by default so that its content doesn't show on pageload */

.back-card {
transform: rotateY(180deg);
}

/* Here give both front and back card position absolute so they position on top of each other. And we make it so their backside isn't visible */

.front-card,
.back-card {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
}


/* Below is just the styling part of the flip cards
============================================================================================================*/

.card-top {
background-color: teal;
height: 80%;
border: 1px solid black;
border-bottom: none;
}

/* The reason why we have z-index and position relative here is because the image was covering our shadow effect 
so we had to bring this element to the front */

.card-bottom,
.back-card-bottom {
background-color: orange;
height: 20%;
box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, .7);
border-top: 1px solid black;
position: relative;
z-index: 3;
}

.card-bottom p::after {
content: "\21BA";
padding-left: 10px;
}

/* We're using the line-height trick here to vertically center content. The div container is 300px and top is 80% (which is 240px) and bottom is 20% 
(which is 60px). */

.card-top p {
color: #fff;
text-align: center;
line-height: 240px;
}

.card-bottom p,
.back-card-bottom p {
color: #fff;
text-align: center;
line-height: 60px;
}

.card-top li {
color: #fff;
}

.card-top li:first-of-type {
padding-top: 12px;
}

/*
  ============================================================================================================
  102. Rotating Banners
  ============================================================================================================
*/

.rotating-banners {
position: relative;
}

/* by using overflow: hidden; on the containers the images are in, when we move them out of the container, they disappear

We also need to put the images in a div container and give the containers position absolute. If we only give the images position absolute, the
transform translate property is not working.

 */

.rotating-banners div {
position: absolute;
overflow: hidden;
border: 3px solid black;
border-radius: 15%;
}

/* I had to add margin-bottom: -10px; because for some reason there is spacing from the div container in the bottom */

.banner-1,
.banner-2,
.banner-3 {
animation-duration: 15s;
animation-name: banner-loop;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
margin-bottom: -10px;
}

/* By using translate -100% to translate 0 to translate 100% each image starts outside of the container. It then slides in from the left to be fully 
visible and then slides out to the right.

The key to making this with several images is to put delay and use % on keyframes to determine how long each part should last. 

16.67% with an animation duration of 15s, means that each image's left slide in takes 2.5 seconds.
16.67% - 33.33% means that that each image stays on its position for 2.5 seconds (33.33 - 16.67 = 16.66)
33.33% - 50% means that each image slides out to the right over 2.5 seconds (50 - 33.33 = 16.67)
50% - 100% means that each image stays slided out for 7.5 seconds (50% of 15s is 7.5s)

This means that after 5 seconds, each image will start to transition out. To make the loop work, we put a 5s delay on the second image and
a 10 second delay on the third image. 

The more images we add, the longer the total animation duration must be. And we must adjust the % values accordingly. 
 */

@keyframes banner-loop {
0% {transform: translate(-100%);}
16.67% {transform: translate(0);}
33.33% {transform: translate(0);}
50% {transform: translate(100%);}
100% {transform: translate(100%);}
}

.banner-2 {
animation-delay: 5s;
}

.banner-3 {
animation-delay: 10s;
}

/* because the rotating banners have position absolute and the images have different height on different devices, they screw up where the rest of the
content underneath it appears. The spacing becomes different. However, by adding an image that is the same size as the images in the rotating banner
and making the visibility hidden, it then takes up the exact same space without being visible. */

.hidden-image {
visibility: hidden;
}


/*
  ============================================================================================================
  103. Sidewide Announcement
  ============================================================================================================
*/


.announcement-box {
position: relative;
text-align: center;
height: 30px;
background-color: hsl(29, 74%, 82%);
border-bottom: 1px solid black;
border-top: 1px solid black;
overflow: hidden;
}

.announcement-1,
.announcement-2 {
white-space: nowrap; 
position: absolute;
animation-duration: 20s;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.announcement-1 {
animation-name: announcement-1;
}

@keyframes announcement-1 {
0% {transform: translate(-100%);}
80% {transform: translate(100%);}
100% {transform: translate(100%);}
}

.announcement-2 {
animation-name: announcement-2;
animation-delay: 10s;
}

@keyframes announcement-2 {
0% {transform: translate(-100%);}
80% {transform: translate(100%);}
100% {transform: translate(100%);}
}

/*
  ============================================================================================================
  104. Timelinme
  ============================================================================================================
*/


/* Har försökt göra mobile first approach här men får inte riktigt rätt på det. Behöver felsöka lite så att jag kan få ringarna rätt positionerade
på mobil. Behöver även få till pilarna på desktop */


/* This is the outmost container which we set the entire height of the timeline and its background color */
/* Position must be relative so that all other containers we add into it which we want to position end up on this container and not the body */

.timeline-container {
background-color: grey;
height: 800px;
position: relative;
}

/* this is a container added just to give spacing to the first content container */

.timeline-top-spacing {
height: 30px;
visibility: hidden;
}

/* This is the middle line, simply created by a div container with a width and background color and then positioned as we like it */

.timeline-ruler {
position: absolute;
width: 6px;
height: 100%;
background-color: #fff;
top: 0;
left: 20px;
}

/* This is the box that wraps all the content, which the content-container will be put in. Each container should be 50% width. The padding is to 
give spacing relative to the outmost container (timeline-container) */

.timeline-content-box {
width: 100%;
position: relative;
padding-left: 50px;
padding-top: 15px;
padding-right: 25px;
}


/* This is to create a ring after each content box that appears on the vertical line that we created via "timeline-ruler". By creating the ring via
pseduo class :after we make sure that each content box that we add will get the ring. And the ring will have the same position for each box.

If we tried to add rings on the background, it would been much more difficult to position them all correctly. The ring is simply a container created
by content: ""; that has white background, orange border and border-radius: 50%. */

.timeline-content-box::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
background-color: #fff;
border: 4px solid #FF9F55;
border-radius: 50%;
top: 43px;
left: 10px;
}

/* arrows */

.left::before {
content: "";
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
position: absolute;
width: 0;
height: 0;
top: 38px;
right: 30px;
}

.right::before {
content: "";
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #fff transparent transparent;
position: absolute;
width: 0;
height: 0;
top: 40px;
left: 30px;
}


/* This is to style the container within the time-line-content-box which has all the content */
/* Position relative is so that we can create arrows with borders and move those arrows */

.timeline-content {
background-color: #fff;
padding: 20px 30px;
border-radius: 5%;
border: 1px solid black;
box-shadow: 3px 3px 10px 1px black;
}

@media (min-width: 641px)  { 

.timeline-ruler { 
left: 50%
}

.timeline-content-box {
width: 50%;
padding: 15px 40px;
}

/* This is where we position the box left or right by adding a left or right css class */

.left {
left: 0;
}

/* Since the box takes up 50%, we have to move it 50% from the left to get it over to the right side. */

.right {
left: 50%;
}

/* This is to change the position of the ring of the right content box. I'm a bit amazed that this works because the ring is created after the
timline-content-box class. But I guess since the the element has both the classes, it works to do it like this. */

.right::after {
left: -10px;
}

.left::after {
position: absolute;
right: -100px;
}

}