style.css

html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 100px;
}
body {
    margin: 0 auto;
    background-color: #383c3f; /* 464E47 green*/
    color: black;
}
p {
    font-size: 1rem;;
}
div a {
    text-decoration: none;
    color: black;
    transition: color 1s;
}
div.main {

    position:relative;
    background-color: #383c3f;
    margin: 0;
    text-align: center;
    overflow: hidden;
    height:70rem;

}


/* Section wrappers and section list items */
.about-section-wrapper {
    background-color: #464E47;
    margin: 4em;
    border: 5px solid #8c8273;
    border-radius: 30px;
    display:flex;
}
.section-wrapper {
    background-color: #464E47;
    margin: 4em;
    border: 5px solid #8c8273;
    border-radius: 30px;
}
.about-wrapper {

    flex-direction: column;
    align-items: center;
    
    /* bottom: 40rem;
    position: relative; */
}
.about-list-item {
    width: fit-content;
    padding: 10px 10px;
    margin: 1em;
    transition: ease-in-out 0.2s;
    color: #8c8273;
    width: 60rem;
}
.about-list-item:hover {
    color:#c4b5a1
}
.about-list-item p{
    font-size: 2rem;
}
.experience-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
}
.experience-list-item {
    border: 4px solid #8c8273;
    width: 22rem;
    padding: 10px 10px;
    margin: 1em;
    border-radius: 15px;
    transition: ease-in-out 0.2s;
    text-align: center;
    background-color: #a69783;
    /* box-shadow: 0.2em 0.2em 0.2em 0.2em black; */
}
.experience-list-item:hover {
    border: 6px solid;
    background-color: #c4b5a1;
    padding: 20px 20px;
}
.projects-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    /* justify-content: space-around; */
}
.projects-list-item {
    border: 4px solid #8c8273;
    width: 250px;
    padding: 10px 10px;
    margin: 1em;
    border-radius: 15px;
    transition: ease-in-out 0.2s;
    text-align: center;
    background-color: #a69783;
    /* box-shadow: 0.2em 0.2em 0.2em 0.2em black; */
    
}
.projects-list-item:hover {
    border: 6px solid;
    background-color: #c4b5a1;
    padding: 20px 20px;
}

div.projects-list-item img {
    border-radius: 50%;
}
div.section-wrapper h1 {
    font-family: 'Wix Madefor Display', sans-serif;
    position: relative;
    width: fit-content;
    top: 20px;
    left: 1em;
    transition: color 1s;
    font-size: 60px;

}
div.about-section-wrapper h1 {
    font-family: 'Wix Madefor Display', sans-serif;
    position: relative;
    width: fit-content;
    top: 20px;
    left: 1em;
    transition: color 1s;
    font-size: 60px;

}
div.about-section-wrapper h1:hover {
    color:#c4b5a1
}
div.section-wrapper h1:hover {
    color:#c4b5a1;
}

.copyright-tag {
    display: flex;
    justify-content: center;
    color: white;
}


/* Arrow classes */
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
.arrow:hover {
    border:solid white;
}
  
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}


/* images */
div.img-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: fit-content;
}  
div.pfp-wrapper {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    height: fit-content;
    position: relative;
    right: 5rem;
    top: 10rem;
}
div.subimg-wrapper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    height: fit-content;
}
img.me {
    position: relative;
    align-self: flex-start;
    border-radius: 50%;
    margin: 20px;
    float:left;
    box-shadow: 0.2em 0.2em 0.2em 0.2em black;
}
img.aboutImgs {
    margin:20px;
    border-radius: 50%;
    float: right;
    position: relative;
    box-shadow: 0.2em 0.2em 0.2em 0.2em black;
    align-self: flex-end;
}
img.paper {
    position:relative;
    height: 16px;
    width: 21px;
}







img.snake {
    position:relative;
    top: 8em;
    border-radius: 50%;
    right:11em;
}
img.twenty_forty-eight {
    position: relative;
    top: 8em;
    left: 48em; 
    border-radius: 10%;
}

img.robot {
    position: relative;
    left: 69em;
    bottom: 7em;
    border-radius: 50%;
}
img.sleep {
    position: relative;
    top: -22em;
    left: 65em;
    border-radius: 50%;
}
img.mochi {
    position: relative;
    bottom: 37em;
    left: 44em;
    border-radius: 50%;
}
iframe.by0w {
    position: relative;
    bottom: 7em;
    right: 24em;
}
iframe.interpreter {
    position: relative;
    bottom: 7em;
    left: 10em;
}

div.abox {
    background-color: #B5B0C9;
    position: relative;
    top:1em;
    height:600px;
    width: 1400px;
    left: 150px;
    
}
div.abox2 {
    background-color: #3E66A3;
    position: relative;
    top:1em;
    height:600px;
    width: 1600px;
    left: 150px;
    
}
ul {
    list-style-type: None;
}
ul.top_bar {
    background-color: #1c1f20;
    width: 100%;
    position: fixed;
    margin:0; 
    padding:0; 
    opacity: 100%;
    z-index: 1;
}
li {
    float:right;
}
li a {
    font-family: 'Wix Madefor Display', sans-serif;
    display:block;
    color:#8c8273;
    text-align:center;
    padding: 2rem;
    text-decoration: none;
    list-style-type: none;
    transition: background-color 1s;
}
li a:hover {
    background-color:#8c8273;
    color: #464E47
}
div.name {
    position: relative;
    top: 23rem;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size:4em;
    padding:0;
    margin:0;
    transition: color 1s;
    text-align: center;
    line-height: 0;
    color: #8c8273;
    
}
div.name:hover {
    color:#F1FFFA;
}
div.subtitle {
    position: relative;
    top: 23rem;
    font-family: 'Wix Madefor Display', sans-serif;
    text-align: center;
    font-size:2rem;
    color:#8c8273;
    transition: color 1s;
    padding:0;
    margin:0;
    /* width: fit-content; */
}
div.subtitle:hover {
    color:#F1FFFA;
}

h1.title2 {
    font-family: 'Wix Madefor Display', sans-serif;
    position: relative;
    width: fit-content;
    top: 20px;
    left: 1em;
    transition: color 1s;
    font-size: 60px;

}
h1.title2:hover {
    color:#3E66A3;
}

div.ap1 {
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top:60px;
    left:20em;
    color:black;
    width: fit-content; 
    transition: color 1s;
}
div.ap1:hover {
    color:white;
}
div.ap2 {
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top:90px;
    left:20em;
    color:black;
    width: fit-content; 
    transition: color 1s;
}
div.ap2:hover {
    color:white;
}
div.ap3 {
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top: 120px;
    left:20em;
    color:black;
    width: fit-content; 
    transition: color 1s;
}
div.ap3:hover {
    color:white;
}
div.ap4 {
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top: 50px;
    left:2em;
    color:black;
    width: fit-content; 
    transition: color 1s;
}
div.ap4:hover {
    color:white;
}
div.BYOW {
    display: block;
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top:7em;
    left:10em;
    color:white;
    width: fit-content; 
    transition: color 1s;
}
div.BYOW a:hover {
    color: black;
}
div.scheme {
    display: block;
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top:5em;
    left:40em;
    color:white;
    width: fit-content; 
    transition: color 1s;
}
div.scheme a:hover {
    color:black;
}
div.snake {
    display: block;
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top: 12em;
    left:10em;
    color:white;
    width: fit-content; 
    transition: color 1s;
}
div.snake a:hover {
    color:black;
}
div.twenty_forty-eight {
    display: block;
    position:relative;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 25px;
    top:10em;
    left:40em;
    color:white;
    width: fit-content; 
    transition: color 1s;
}
div.twenty_forty-eight a:hover {
    color:black;
}

#home {
}
#about{
}
#projects{
}