@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Foldit:wght@500&family=Playfair+Display:ital@1&display=swap');

* {
    /* box-sizing: border-box; */
    margin: 0;
    padding: 0;
}

h2 {
    color: rgb(145, 183, 221);
}

h3 {
    color: rgb(13, 8, 71);
}

.sidebar{
    position: absolute;
    /* position: relative; */
    background-color: grey;
    width: 200px;
    height: 100vh;
    font-family: 'Bruno Ace SC', cursive;
    transition: transform 0.3s ease-in;
}

.sidebar nav {
    padding: 22px;
    margin-top: 25px;
}

.sidebar nav li {
    list-style: none;
    font-size: 15px;
    padding: 15px 0;
}

.sidebar nav li a {
    text-decoration: none;
    color: aquamarine;
}

.hamburger {
    position: absolute;
    cursor: pointer;
    top: 10px;
    left: 10px;
}

.cross {
    margin-left: 160px;
}

.container {
    display: flex;
}

.main {
    background-color: #474e5d;
    width: 100vw;
    height: 100vh;
    font-family: 'Playfair Display', serif;
    color: rgb(70, 3, 49);
}

.about_me {
    position: relative;
    max-width: 1200px;
    margin: 10px auto auto 200px;
}

.about_me p {
    font-size: 12.8px;
    font-family: Arial, Helvetica, sans-serif;
}

.about_me::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: grey;
    top: -10;
    bottom: -3;
    left: 43.5%;
    margin-left: -3px;
}

/* Container around content */
.container1 {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 37%;
}

/* The circles on the timeline */
.container1::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: rgb(145, 183, 221);
    border: 4px solid rgb(70, 3, 49);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    right: 1%;
}

/* Place the container to the right */
.right {
    left: 43.5%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid grey;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent grey;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid grey;
    border-width: 10px 10px 10px 0;
    border-color: transparent grey transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -16px;
}

/* The actual content */
.content {
    padding: 20px 30px;
    background-color: grey;
    position: relative;
    border-radius: 6px;
}

.sidebarGo {
    transform: translate(-200px, 0px);
    position: absolute;
}